您是否想了解如何在WordPress上加載JavaScript？

所有 WordPress主題 通常由 PHP、HTML、CSS 和 JavaScript 文件組成。 JavaScript 是開發人員中流行的編程語言。 WordPress主題. 它是一種使 HTML 頁面具有交互性的語言，還可以讓您與服務器進行交互。

知道如何在您的網站上使用它將是一個巨大的優勢。

為了實際使用JavaScript，您需要知道如何將其加載到您的網站上。

但是之前，如果您從未安裝過WordPress發現 如何安裝WordPress博客7步驟 et 如何找到，安裝和你的博客激活WordPress主題 

然後回到為什麼我們在這裡。

如何在WordPress上加載JavaScript腳本

讓我們退後一步，首先了解WordPress如何加載腳本和样式。 您了解到，在創建JavaScript文件時，可以將它們添加到頁眉的頁眉部分或頁腳中。

另請參閱我們的教程 如何壓縮CSS，HTML和Javascript文件

WordPress 做完全相同的事情，但你不能只是將這些腳本標籤放入你的文件的頭文件或頁腳中。 WordPress主題。 WordPress 使用一種名為「 入列 “。

該機制對於賦予依賴關係意義是必要的。 如果您正在為WordPress主題編寫jQuery代碼，則必須首先加載jQuery本身。

您編寫依賴jQuery插件的代碼。 在這種情況下，必須先加載jQuery，然後再加載jQuery插件，再加載您的代碼。

如何“排隊”腳本（添加到隊列）

您可以在 WordPress 主題文件夾或您的 WordPress插件. 以下是包含依賴 jQuery 的腳本的完整代碼：

函數（）的my_theme_scripts {

 wp_enqueue_script（'my-script“，get_template_directory_uri（）。'/js/my-script.js'，數組（'jquery'），'1.0.0'，true）;

}

add_action（'wp_enqueue_scripts'，'my_theme_scripts'）;

首先，一個函數必須是“ 迷上 在WordPress（使用WordPress Hooks）。 函數的第一個參數 ADD_ACTION（） 告訴WordPress這些腳本應放在哪裡：

• 在公共場所
• 在儀表板上

如果您使用“ wp_enqueue_scripts 如果您使用“ admin_enqueue_scripts 它們將被加載到儀表板上。

在功能« ADD_ACTION 您可以使用“ wp_enqueue_script 要添加腳本，您需要。 該函數帶有一個必需參數和四個可選參數：

• 第一個參數是腳本的名稱。 您可以選擇所需的名稱，但請確保使用唯一的名稱。
• 第二個參數應包含文件在您的 WordPress 主題上的位置或 WordPress插件.
• 第三個參數包含一個依賴項數組。 在上面的示例中，我說過jQuery是一個依賴項。 所有依賴項都在相關腳本之前加載。
• 第四個參數是版本號
• 第五個和最後一個參數指示您是要在頁眉還是頁腳上加載腳本。 使用“ true”加載到頁腳，或使用“ false”加載腳本到頁眉（您也不能填寫此參數).

依存關係

WordPress提供了jQuery的副本，這就是為什麼您可以輕鬆地將其添加為依賴項的原因。 WordPress提供了大量其他jQuery腳本和插件。 如果您的代碼依賴其中之一，則不必使用任何副本，只需將其添加為依賴項即可。 這裡有一個 WordPress提供的腳本列表.

如果包含多個相互獨立的腳本，則可以完全相同的方式將它們添加為依賴項。 看下面的例子：

函數（）的my_theme_scripts {

 wp_enqueue_script（“我的基本腳本”，get_template_directory_uri（）。'/js/my-base-script.js'，數組（'jquery'），'1.0.0'，true）;

 wp_enqueue_script（“ my-script-extension”，get_template_directory_uri（）。'/js/my-script-extension.js'，數組（“ my-script-base'），'1.0.0'，true）;

}

add_action（'wp_enqueue_scripts'，'my_theme_scripts'）;

由於第一個腳本依賴於jQuery，因此下一個腳本也依賴於jQuery。 因此，您無需將jQuery添加為兩者的依賴項。 這使得依賴管理更加容易。

有條件的加載

有時，您會希望在每個頁面上使用腳本，但是通常，您會希望在特定頁面上加載腳本。 考慮將腳本添加到儀表板時尤其如此。 一個很好的例子是 簡碼的使用。 短代碼允許用戶使用一些簡單的技巧在可視文本編輯器上創建高級顯示。

函數（）的my_theme_scripts {

 wp_register_script（'my-script'，get_template_directory_uri（）。'/js/my-script.js'，數組（'jquery'），'1.0.0'，true）;

 wp_enqueue_script（'my-script'）;

}

add_action（'wp_enqueue_scripts'，'my_theme_scripts'）;

我們已經保存了腳本，以便WordPress了解該腳本，但是我們使用了“ 排隊 “。 這樣，只有在此頁面上使用了短代碼時，腳本才會添加到該頁面。

使用條件加載腳本的另一種方法是使用條件函數。 如果要在該類別的所有存檔頁面上加載腳本，則可以使用該功能 is_category（）.

例如，您可以創建一個輪播圖片，用戶可以將其添加到文章中，如下所示：[輪播ID = '42,124,123,331,90，XNUMX']。 輪播將使用其ID指定的圖像在文章頁面上創建。

為此，您必須創建一個文件“ carousel.js 這是基於jQuery的。 這是到達此處的代碼（它不會創建輪播，但讓您了解加載過程是如何發生的）：

add_action（'wp_enqueue_scripts'，'my_theme_scripts'）;

函數（）的my_theme_scripts {

 wp_register_script（'my-carousel'，get_template_directory_uri（）。'/js/my-carousel.js'，array（'jquery'），'1.0.0'，true）;

}

add_shortcode（'carousel'，'my_carousel'）;

my_carousel函數（$ args）{

 $ atts = shortcode_atts（array（

 'Ids'=>“，

 ），$ Atts，“輪播”）；

 wp_enqueue_script（'my-carousel'）;

 //在此處顯示輪播的代碼

}

刪除和替換腳本

到目前為止，這是一種常見的情況，但是有時您可能需要刪除或替換腳本。 我陷入了由插件添加腳本的情況（但未被主題使用）引起兼容性問題。 “提現”是最好的選擇，因為錯誤完全消失了。

如果要測試某些東西以確保它與較新版本兼容，則也可以用較新的版本替換jQuery。

在這些情況下，功能 wp_deregister_script（） “和” wp_dequeue_script（） 很有用。 這是編輯已添加在WordPress上的代碼的方法。

函數（）的my_theme_scripts {

 wp_deregister_script（'jquery'）;

 wp_enqueue_script（'jquery'，get_template_directory_uri（）。'/js/jquery3.0.0.js'，array（），'3.0.0'，true）;

 wp_enqueue_script（'my-script'，get_template_directory_uri（）。'/js/my-script.js'，數組（'jquery'），'1.0.0'，true）;

}

add_action（'wp_enqueue_scripts'，'my_theme_scripts'）;

最後的想法

這種上傳到WordPress的方法很棒，因為它允許您以模塊化方式添加腳本。 這將使您確保以模塊化方式添加依賴項。

還發現一些高級WordPress插件  

您可以使用其他 WordPress插件 賦予現代外觀並優化您的博客或網站的處理。

我們在這里為您提供了一些高級WordPress插件，它們將幫助您實現這一目標。

1。 優質SEO包

高級 SEO 包是一個 WordPress插件 它可以優化您的 SEO 並壓縮 CSS 以提高網站的載入速度。

該插件還使您可以單擊幾下來管理網站的設計。 它的功能包括：CSS和JS壓縮，視頻和摘要站點地圖集成，HTML和XML文件格式，404和301頁面重定向，社交媒體共享，提供'ALT標籤，高度可定制的佈局

下載 | DEMO | 虛擬主機

2。 運輸的Woocommerce交貨時間選擇器

WooCommerce交貨時交貨時間選擇器是WooCommerce擴展，允許客戶在結帳頁面上選擇交貨日期和時間。 

客戶將可以在家中選擇包裹的交貨時間。 交付時間對於網站的管理員是可見的，並且還將通過電子郵件發送給網站或在線商店的管理員。

下載 | DEMO | 虛擬主機

3。 英雄菜單

這個插件使您可以通過幾個相當簡單的步驟來創建自己的自定義WordPress菜單。 特別是，它使您可以輕鬆直觀地創建一個優雅而專業的WordPress菜單。 

從功能最齊全的最複雜的大型菜單，到帶有下拉菜單的最簡單的菜單WordPress插件 HeroMenu 設置任何類型的菜單，並在幾分鐘內啟動並運行。

就功能而言，它提供的其他功能包括：在PC，平板電腦和智能手機上的完美操作，從 自定義CSS 在菜單中添加自己的樣式，一個megamenu構建器，幾個受支持的瀏覽器：Chrome，Firefox，Safari，Opera，IE9等。

下載 | DEMO | 虛擬主機

推薦資源

查看其他推薦資源，這些資源將幫助您解決其他常見的WordPress錯誤。 

• 如何解決WordPress上的重定向錯誤
• 如何使用Elementor創建自定義佈局
• 如何為您的組織創建WordPress Intranet
• 如何創建WordPress的登錄頁面

結論

這是 ！ 就是本教程的內容，我希望它能使您了解如何在WordPress上加載JavaScript。 不要猶豫，與您的朋友分享 社交網絡 首選。 

但是，您也可以諮詢我們的 RESSOURCES，如果您需要更多的元素來執行創建Internet網站的項目，請參考我們關於 WordPress博客創建。

但在此期間，請告訴我們您的情況 評論 和專用部分中的建議。

...