WordPress如何適當引入JavaScript？自定義加載JS和CSS文件

對於WordPress建立站的程序員，在開發WordPress外掛或定制WordPress主題時，會引用一些JavaScript和CSS腳本資源。

• 通常，人們直接為HTML使用link、script標記。
• 實際上，WordPress內置完善的引用腳本的函數和方法。
• 所以，使用WordPress的內置方法引用更專業，更具可擴展性。

有缺點的引用方法

有兩種常見的引用方法，它沒有問題，只是它不完美或不合理。

第1種：link 標籤引用CSS文件

• Script標籤應用JS文件。這裡不詳述了。

第2種：使用wp_head函數

• wp_head函數用於輸出一些自定義或系統定義的內容。
• 我們有時使用以下代碼來引用此文件：

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• 將以上的代碼複製到functions.php 文件中以引用相應的文件。

WordPress Enqueue Scripts資源機制

大家都知道，WordPress有非常多外掛：

• 幾乎每個插件都會引用某些資源文件。
• 不可避免地，兩個插件引用的資源之間會發生衝突，這些資源將變得不穩定並可能影響效率。

使用wp_enqueue_script函數

• 要在WordPress中引用資源，你應該使用wp_enqueue_script函數，該函數在排隊或排序的函數名中有一個單詞enqueue。
• 通過這種WordPress 的排隊引用（Enqueue Scripts）資源的方式，引用與相應的文件和核心代碼分開。
• 如果用戶想要禁用該資源，他可以刪除，修改和註釋它，而無需從核心代碼修改它。

此外，一些常用的庫（如jQuery，jQuery UI等）內置於WordPress中。

我們可以使用wp_enqueue_script函數直接調用內置庫，這樣可以節省代碼和更清晰的規範。

若用此函數引用自己的JS和CSS文件，則需先使用wp_register_script函數註冊一個標識（handle），然後使用wp_enqueue_script函數調取與此標誌對應的資源。

WordPress怎樣適當引入JS和CSS文件？

WordPress提供JS和CSS方法的合理引入方法。

你可以使用以下代碼給插件引入plugin.css文件 ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

以上使用wp_register_script函數，創建具有標識符plugin_stylesheet的資源。

然後，將其排隊的請求添加到wp_enqueue_scriptsactions操作中。

雖然函數名稱是一個腳本，但它與資源文件的類型無關，並且對CSS和JS都有效。

wp_register_script函數，確實並不那麼簡單，它可有五個參數：

1）$handle：資源標識符。

• 由wp_enqueue_script調用。

2）$src：資源的位置。

• 相對地址或絕對地址使用WordPress內置函數來獲取地址等。
• 常見的本土化函數有plugins_url，get_template_directory_uri等。

3）$deps：依賴。

• 如果你指的是jQuery插件並且需要依賴jQuery構建，則需要填寫jQuery。
• 請注意以數組形式傳遞。

4）$ver：資源版本，可選。

5）$in_footer：是否將它放在底部？

• 通常，JS文件應放在頁面底部，你可以將此參數設置為True，將其留空或False會輸出到頂部。

讓我們看一個更完善的JavaScript文件引用示例 ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress主題使用wp_enqueue_script引入資源

程序員在WordPress主題開發中，使用wp_enqueue_script引入資源。

• 以上示例是WordPress插件開發引用資源的示例。
• 主題中引用的方法類似。

主要區別是使用相應的函數，用於獲取主題目錄，以獲取主題下的資源文件地址。

你可以使用get_template_directory_uri函數來獲取當前主題目錄。

如果你使用的是子主題，則需要使用get_stylesheet_directory_uri函數獲取父主題的目錄以獲取相應的資源。