如何將 WordPress 預設的 jQuery 替換為 Google Library

WPressize Me

01/13/2024

如何將 WordPress 預設的 jQuery 替換為 Google Library

你是否想將 WordPress 預設的 jQuery 腳本替換成來自 Google Hosted Libraries 的 jQuery?

WordPress 預設包含了 jQuery 這個 JavaScript 庫。然而,將其替換為來自 Google Library 的最新版本 jQuery 可以提高網站性能。

在本文中,我們將向你展示如何輕鬆地將 WordPress 預設的 jQuery 腳本替換為 Google Library 來提高性能和速度。

為什麼以及何時應該替換 WordPress 預設的 jQuery

jQuery 是一個受開發者歡迎的 JavaScript 庫,用於創建漂亮的網頁應用。在 WordPress 中,它常被用來添加功能如滑塊、彈出窗口等。

WordPress 包含了與核心軟件一起打包的 jQuery 庫。許多頂級的 WordPress 插件和流行的主題都依賴這個庫來提供基本的功能和特點。

然而,在共享主機伺服器上加載 jQuery 可能會消耗大量資源並使網站變慢,特別是當你使用一些沒有遵循 WordPress 最佳實踐的插件或主題時。

另一個問題是使用 WordPress 包含的 jQuery 版本,這些版本只有在 WordPress 更新時才會被更新。可能會有包含性能或安全修復的新版本,但你將無法使用,直到這些新版本包含在 WordPress 更新中。

有幾個解決方法可以解決這個問題。例如,可以通過 Google 的伺服器或 jQuery 官方的 CDN 加載 jQuery。

Google Hosted Libraries 是一個不錯的選擇,因為他們的伺服器穩定、更新且高度優化,這使得 jQuery 在你的 WordPress 網站上加載更快。

話不多說,讓我們來看看如何輕鬆地將 WordPress 預設的 jQuery 替換為 Google Library。

使用 Google Library 替換 WordPress 預設的 jQuery

WordPress 配備了一種內建方法,可以簡單地添加腳本和樣式表。這也能讓你安全地移除任何使用內建方法加載的腳本或樣式表。

我們將使用這個方法來首先禁用 WordPress 預設的 jQuery。之後,我們將告訴 WordPress 通過 Google Library 加載 jQuery。

你需要將以下代碼添加到主題的 functions.php 文件、特定網站插件或一個代碼片段插件中。

function wpb_modify_jquery() {
  //檢查是否正在查看前台部分
  if (!is_admin()) {
    // 移除 WordPress 預設的 jQuery
    wp_deregister_script('jquery');
    // 註冊通過 Google Library 的新 jQuery 腳本    
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
    // 將腳本加入佇列   
    wp_enqueue_script('jquery');
  }
}
// 當 WordPress 初始化時執行該動作
add_action('init', 'wpb_modify_jquery');

我們建議使用 WPCode 代碼片段插件來添加這段代碼到 WordPress 中。這個插件免費且易於使用,即使出現任何問題也不會使你網站崩潰。

注意:WPCode 也有高級版,提供如代碼修訂、自動轉換像素、計劃片段、私人雲端庫等進階功能。

要開始使用,你需要安裝並啟用 WPCode。如果需要幫助,請參見我們的指南 如何安裝 WordPress 插件

插件啟用後,從 WordPress 輸入檢控台導航到代碼片段»添加片段。從這裡,找到“添加自訂代碼(新片段)”選項,並點擊其下方的“使用片段”按鈕。

接下來,你可以為你的代碼片段添加標題。這個標題可以是任何有助於你記住代碼用途的名稱。

之後,簡單地將上面的代碼粘貼到“代碼預覽”框中,並從下拉菜單中選擇“PHP片段”作為代碼類型。

最後,將開關從“未啟用”切換到“啟用”並點擊“保存片段”按鈕。

這就是全部!WordPress 現在將替換預設的 jQuery,並通過 Google Library 加載它。

注意:這個方法將繼續加載 URL 中指定的 jQuery 版本。將來你可能需要更改 Google Library 的 URL 以使用更新的 jQuery 版本。

Google 不會為你自動更新版本號,因為如果你的主題或插件依賴於不同的版本,這可能會導致兼容性問題。

你可以訪問 Google Hosted Libraries 網站來找到最新的 URL。

從那裡,你還可以找到較舊版本的 jQuery 的 URL,以便在需要時用於故障排除。

替換其它預設的 jQuery 庫

除了核心 jQuery 庫外,WordPress 還包括飛其他一堆jQuery腳本。其中某些腳本,如 jQuery Mobile 和 jQuery UI,在Google 庫上託管。

對於其他庫,你可以使用 jQuery 自己的 CDN 伺服器來更快地加載它們。以下例子中,我們已將 WordPress 的 jquery-ui-core 腳本替換為官方的 jquery-ui 版本。

function wpb_modify_jquery_ui() {
  if (!is_admin()) {
    wp_deregister_script('jquery-ui-core');
    wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
    wp_enqueue_script('jquery-ui-core');
  }
}
add_action('init', 'wpb_modify_jquery_ui');

就像 Google Libraries 一樣,你需要在一段時間後替換 URL 以使用最新版本的腳本。

完全禁用 WordPress 中的 jQuery

鑑於其廣泛使用,我們不建議完全禁用 WordPress 網站上的 jQuery。即使你的 WordPress 主題不使用 jQuery,許多流行的 WordPress 插件仍然需要它。

但是,如果你確信自己的網站不需要 jQuery,那麼你可以安全地禁用它。

簡單地將以下代碼添加到主題的 functions.php 文件、特定網站插件或一個代碼片段插件,如 WPCode。

if ( !is_admin() ) wp_deregister_script('jquery');

這就是全部。此代碼將簡單地禁用 jQuery 腳本從 WordPress 網站的前端加載。

解決 WordPress 中的 jQuery 相關問題

jQuery 的新版本有時可能會廢棄或移除舊的方法和函數。如果你網站上的某個 WordPress 插件使用了較舊的方法,那麼這可能會破壞某些功能。

你可能會在檢查工具的控制台區域中看到警告,或者注意到一些功能停止工作。

WordPress 以前使用一個名為 jQuery-migrate 的腳本來提供對較舊版本 jQuery 的兼容性支持。然而,從 WordPress 5.5 開始,這個腳本已經從 WordPress 中移除了。

如果你想添加回 jQuery-migrate 腳本或在不同 jQuery 版本之間進行故障排除,那麼你可以嘗試以下方法。

簡單地安裝並激活 Version Control for jQuery 插件。詳細信息請參見我們的分步指南 如何安裝 WordPress 插件

激活後,你需要訪問設置» jQuery 版本控制頁面。從這裡,你可以選擇要使用的 jQuery 版本。

插件將自動從官方 jQuery CDN 加載該版本。

該插件還會加載 jQuery-migrate 腳本。如果你願意,你可以在故障排除期間禁用它。

不要忘記點擊“保存更改”按鈕來保存你的更改。

我們希望本文幫助你學習如何用 Google Library 替換 WordPress 預設的 jQuery。你可能還會感興趣於這些有用的 jQuery 教程或參見我們完整的 WordPress 性能優化指南。

如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>