如何在 WordPress 中正確添加 JavaScript 和样式

已發表: 2021-08-02

在本文中，我們將了解如何在 WordPress 中正確添加 JavaScript 和样式。

有許多新的 WordPress 開發人員喜歡專門為自己的網站編寫代碼和開發插件，或者在各種市場上出售它們並獲得豐厚的回報。

編寫代碼的方法有很多種，但只有選定的方法可以有效地編寫代碼。

如果您可以在兩行而不是十行中編寫代碼，那麼您將節省大量的處理和內存。

如果對於小型輕量級網站可能無關緊要，但對於重型網站來說，這可能意味著很多。

如果您不編寫清晰的代碼並有效地使用可用資源，您將為其他程序製造大量衝突。

例如，有多種方法可以在 WordPress 中為您的插件加載外部現成的 Javascript。

但是如果你不遵循正確的標準，所有激活的插件都會被嚴重卡住。

本文主要面向願意開發 WordPress 主題和插件的新 WordPress 開發者。

除非您正確編碼，否則您的代碼將是不專業的，並且您製作的任何產品，無論概念多麼好，您都永遠不會被接受。

因此，最好了解如何在 WordPress 中正確添加 JavaScript 和样式。

添加 JavaScript 的錯誤

你們中的一些人可能知道 WordPress 有一個名為 wp_head 的函數，它可以幫助您在網站的標題部分加載任何內容。

您需要做的就是在腳本文件中添加以下代碼行，所有內容都將出現在標題中。

add_action('wp_head', 'wpb_bad_script');
函數 wpb_bad_script() {
echo 'jQuery 在這裡';
}

這是添加東西的一種相當快捷的方式，但它不是最好的方法。您必須遵循正確的標準放棄快捷方式，這就是本插圖的重點。

例如，您在插件中手動加載 JQuery，而另一個開發人員也手動或通過適當的標準加載相同的 JQuery。如果有人激活了你的兩個插件，那麼 JQuery 將在內存中加載兩次，這是一種浪費。

此外，如果加載的 JQuery 版本不同，那麼由於衝突，插件中會出現很多故障。在編寫任何代碼之前，您需要知道如何在 WordPress 中正確添加 JavaScript 和样式。

如何避免此類錯誤——入隊函數的概念？

您可能知道，WordPress 開發者社區是一個龐大而強大的社區。每天都有成千上萬的開發人員開發新的主題和插件。

但是他們正在做的是通過入隊腳本功能來確保彼此的編碼方法永遠不會發生任何衝突。

這是負責在 WordPress 中正確添加 JavaScript 和样式的函數，這樣就不會出現任何衝突和不必要的內存阻塞。

它確保以系統的方式加載 JavaScript 和样式。函數 qp_enquque_function 告訴 Wordless 何時加載這些 JavaScript 和样式，加載它們的位置，尤其是在什麼條件下加載。

在這些幫助下，您不必手動加載 JQuery 和類似的東西，因此，由於一次又一次地加載相同的文件，永遠不會出現內存阻塞的情況。

原因是 Enqueue 功能允許您使用 WordPress 本身附帶的內置庫。由於沒有手動加載 JavaScript，它還將減少頁面加載時間緩慢的負擔。

在 WordPress 中正確添加 JavaScript 和样式的步驟-

1. 在 WordPress 中排隊腳本

以下代碼行加載了 WordPress 附帶的內置 JavaScript 包。當您創建插件時，您必須將這些行放在插件文件中，或者如果您正在創建主題，則必須將它們放在 functions.php 中。

函數 wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');

代碼解釋

該腳本通過具有五個不同參數的函數 wp_register_script() 註冊。

1. $handle - 它是腳本的唯一名稱。這是'my_amazing_script'。

2. $src - 它定義了你的腳本的位置。庫函數 plugins_url 獲取插件文件夾的正確 URL。一旦它被獲取，它將開始在其中尋找 Amazing_script.js 文件。

3. $deps——它定義了依賴。當您要求 WordPress 加載 Jquery 之類的庫腳本時，您需要添加它。

如果腳本已經加載到內存中，則不會再次加載，而是進行新的加載。這確保了沒有衝突、沒有內存阻塞和沒有時間浪費。

4. $ver - 它定義了腳本的版本號。這不是強制性的。

5. $in_footer - 用於在頁腳中加載腳本。如果要在標頭中加載腳本，則應將其設置為 false。

一旦定義了所有內容，您只需使用 wp_enqueue_script() 調用腳本。

2. WordPress 中的入隊樣式

就像 JavaScript 一樣，您必須將樣式表排入隊列。在您的插件文件或 functions.php 文件中使用以下代碼來創建主題。

功能 wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');

上述代碼適用於您創建插件時。創建主題時，必須將 plugins_url() 更改為 get_template_directory_uri()。其餘的事情將保持不變。

函數 wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');

如果要創建子主題，則必須使用 get_stylesheet_direcroy_uri() 而不是 get_template_directory_uri()。

這是在 WordPress 中正確添加 JavaScript 和样式的標準方法。

如果您的插件或主題遇到任何故障，您應該使用上述代碼行修改它們的代碼，也許故障會得到解決。

始終遵循世界各地遵循的編碼標準，以便與其他成功的開發人員保持一致。