1 有缺點的引用方法

• 2 WordPress Enqueue Scripts資源機制
• 3 WordPress怎樣適當引入JS和CSS文件？
• 4 WordPress主題使用wp_enqueue_script引入資源

 

用WordPress建站的程序員，在開發(fā)WordPress插件或定制WordPress主題時，會引用一些JavaScript和CSS腳本資源。

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

有缺點的引用方法

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

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

• Script標簽應用JS文件。這里不詳述了。

第2種：使用wp_head函數(shù)

• wp_head函數(shù)用于輸出一些自定義或系統(tǒng)定義的內(nèi)容。
• 我們有時使用以下代碼來引用此文件：

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

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

WordPress Enqueue Scripts資源機制

大家都知道，WordPress有非常多插件：

• 幾乎每個插件都會引用某些資源文件。
• 不可避免地，兩個插件引用的資源之間會發(fā)生沖突，這些資源將變得不穩(wěn)定并可能影響效率。

使用wp_enqueue_script函數(shù)

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

此外，一些常用的庫（如jQuery，jQuery UI等）內(nèi)置于WordPress中。

我們可以使用wp_enqueue_script函數(shù)直接調(diào)用內(nèi)置庫，這樣可以節(jié)省代碼和更清晰的規(guī)范。

此處提供了內(nèi)置定義庫和標識符（handle）的列表

若用此函數(shù)引用自己的JS和CSS文件，則需先使用wp_register_script函數(shù)注冊一個標識（handle），然后使用wp_enqueue_script函數(shù)調(diào)取與此標志對應的資源。

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函數(shù)，創(chuàng)建具有標識符plugin_stylesheet的資源。

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

雖然函數(shù)名稱是一個腳本，但它與資源文件的類型無關(guān)，并且對CSS和JS都有效。

wp_register_script函數(shù)，確實并不那么簡單，它可有五個參數(shù)：

1）$handle：資源標識符。

• 由wp_enqueue_script調(diào)用。

2）$src：資源的位置。

• 相對地址或絕對地址使用WordPress內(nèi)置函數(shù)來獲取地址等。
• 常見的定位函數(shù)有plugins_url、get_template_directory_uri等。

3）$deps：依賴。

• 如果你指的是jQuery插件并且需要依賴jQuery構(gòu)建，則需要填寫jQuery。
• 請注意以數(shù)組形式傳遞。

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

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

• 通常，JS文件應放在頁面底部，你可以將此參數(shù)設(shè)置為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主題開發(fā)中，使用wp_enqueue_script引入資源。

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

主要區(qū)別是使用相應的函數(shù)，用于獲取主題目錄，以獲取主題下的資源文件地址。

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

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

希望我們網(wǎng)站（ https://www.wordpressx.com/ ） 分享的《WordPress如何適當引入JavaScript？自定義加載JS和CSS文件》，對您有幫助。