如何輕鬆地將 jQuery 腳本添加到 WordPress
已發表: 2021-09-21WordPress 已經存在於我們身邊十多年了。 儘管該平台因其易於訪問而廣為人知，但在 WordPress 主題和插件中添加 jQuery 是許多開發人員關注的問題。
我們之前已經編寫過有關解決諸如 WordPress 白屏死機和將您的 WordPress 網站置於維護模式等問題的指南。 在這篇文章中，我們將解釋如何將 jQuery 添加到 WordPress，但在深入探討之前，這裡先簡要介紹一下 jQuery 的兼容模式。
jQuery的兼容模式
在開始在 WordPress 中使用 jQuery 之前，了解 jQuery 的兼容模式同樣重要。
WordPress 中的 jQuery 是預加載的，您可以在代碼中使用它。 不過這裡的重點是，它還自帶了jQuery的兼容模式，避免了與其他不同編程語言的庫發生衝突。
儘管這聽起來很正常，但這種防禦機制存在一個小問題。 在 WordPress 中使用 jQuery 時，您必須使用術語“ jQuery ”而不是我們良好的舊$符號。
看看這個例子。
/* 常規 jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})
/* 兼容模式 */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})
現在這裡的問題不是那麼大，而是不是很愉快。 首先，你需要每次都編寫“ jQuery ”，這需要相當多的時間，其次，這會讓你的腳本看起來雜亂無章，難以閱讀。
但別擔心，通過一些修改，您可以繞過兼容性問題並能夠使用舊的 $ 符號。
作為參考，$ 是jQuery()的別名和函數的句柄。
這是基本結構的樣子。
$(選擇器).action()
這裡， $符號指的是 jQuery， $(selector)查找 HTML 元素， action()定義要對這些元素執行的操作。
這裡有一些技術可以用來解決 jQuery 的兼容性問題。
如何克服 jQuery 的兼容性問題？
- 進入“jQuery Stealth”模式
- 進入“無衝突”模式
進入 jQuery 的隱身模式
圖片來源：Podfeet
解決兼容性問題的第一種也是最常見的方法是進入隱身模式（隱秘地使用您的代碼）。
假設您正在嘗試在頁腳中加載腳本。 將代碼包裝在一個匿名函數中，該函數最終將 jQuery 映射到 $。
參考這個例子
（函數（$）{
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );
現在，如果您想在標題中添加腳本，請將所有內容包裝在文檔就緒函數中，並一路傳遞 $。
這是一個例子。
jQuery(文檔).ready(函數($){
$('.hideable').on('click', function() {
$(this).hide();
})
});
進入無衝突模式
現在這是解決兼容性問題的一種非常簡單的方法。 您所要做的就是在腳本頂部聲明這行代碼，並且可以使用 $j 代替默認的 $ 符號。
var $j = jQuery.noConflict();
現在您已經知道如何在 WordPress 中使用 jQuery，讓我們繼續我們的主題——如何將 jQuery 腳本添加到您的 WordPress 網站。
如何將 jQuery 添加到 WordPress 網站
圖片來源：fl1digital.com
將 jQuery 添加到 WordPress 可以通過一個名為Enqueueing的過程輕鬆完成。
我們使用元素<link>在常規 HTML 網站中添加腳本。 我們也可以在 WordPress 中做同樣的事情。 但是，我們需要發揮一些 WordPress 的特殊功能才能進入其中。 請注意，這樣做會為您處理所有依賴項。
假設您正在使用 WordPress 主題。 在您的functions.php文件中使用此函數。
wp_enqueue_script()
這是它的外觀。
功能 my_theme_scripts() {
wp_enqueue_script('my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
這是此函數將採用的五個參數。
- $handle：可用於引用腳本的唯一句柄
- $src：腳本文件的位置
- $deps：用於指定一個依賴數組
- $ver：腳本的版本號
- $in_footer：指示 WordPress 放置腳本的位置
默認情況下，該腳本將加載到您網站的標題中，不建議這樣做，因為它會顯著影響您網站的速度。
相關：關於如何編輯 WordPress – HTML、CSS、PHP、JavaScript 的終極指南
如何將 jQuery 腳本添加到 WordPress 管理員
您可以使用相同的功能將 jQuery 添加到 WordPress 管理員。 你所要做的就是使用不同的鉤子。
這是一個例子
功能 my_admin_scripts() {
wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');
現在只需將wp_enqueue_scripts與admin_enqueue_scripts交換就可以了。
如何在 WordPress 中取消註冊 jQuery
如果您願意使用與預加載不同的 jQuery 版本，則需要取消註冊 WordPress 的 jQuery。
這是一個如何在 WordPress 中取消註冊 jQuery 的示例。
// 包含自定義 jQuery
功能 shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
這很簡單。 您需要做的就是使用wp_deregister_script()取消註冊 WordPress 的 jQuery 並包含您想要的腳本。
這裡要記住的一件事是，我們在此示例中添加了 Google 託管的 jQuery 庫。 您需要使用自己的腳本 URL 進行切換。
您應該在入隊之前註冊腳本嗎？
如果您希望它們僅在頁面中需要時加載，您可以在此過程的早期註冊腳本。
這是一個例子
add_action('wp_loaded', 'register_all_scripts');
函數 register_all_scripts()
{
wp_register_script(…);
}
完成此操作後，在需要時將腳本排入隊列。 就是這樣。
add_action('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action('admin_enqueue_scripts', 'enqueue_back_scripts');
使用條件標籤
您還可以使用條件標籤僅在需要時在 WordPress 中加載您的 jQuery。
儘管此方法通常用於管理員，您只希望在特定頁面上使用它，但它可以節省大量帶寬和處理時間，最終提高您網站的加載速度。
有關使用附加標籤的更多信息，請參閱 WordPress 的管理員入隊腳本文檔。
如何使用插件將 jQuery 添加到 WordPress
WordPress 擁有超過 45000 個插件的插件目錄。 您可以在 WordPress 網站上找到所需的任何功能的插件。
在 WordPress 網站頁面、主題和帖子等中添加 jQuery 也是如此。
以下是一些用於將 jQuery 添加到 WordPress 的最流行的插件。
- 高級自定義字段
- 簡單的自定義 CSS 和 JS
- 腳本 N 樣式
- 資產清理
結論
所以你去。 現在您知道如何添加和使用 WordPress jQuery。
將這些知識應用於您的項目將幫助您創建出色的項目。 您還可以閱讀我們關於 JPG 與 JPEG 和 WordPress 白標等主題的權威指南，以提高您的知識。