WordPress怎么引用javascript和 CSS 文件

2024-09-07 00:50:09

字體：大中小

來源：轉載

供稿：網友

第一種就是常見的 link 標簽引用 CSS 文件,Script 標簽應用 JS 文件,這里不再贅述.

第二種就是使用 wp_head 函數,wp_head 函數用來輸出一些自定義或者系統定義的內容,我們有時候會使用下面代碼引用文件:

<?php

add_action('wp_head', 'wpjam_normal_script');

function wpjam_normal_script() {

echo '資源文件的鏈接';

}

?>

將上面代碼復制到 functions.php 文件中,即可引用對應的文件.

WordPress 的排隊引用（Enqueue Scripts）資源機制

在 WordPress 中引用資源,應該使用 wp_enqueue_script 這個函數,函數名中有個單詞 enqueue 是排隊或者排序的意思,眾所周知，WordPress 有很多的插件,幾乎每個插件都會引用一些資源文件,難免會有兩個插件引用的資源發生沖突等,這樣會變得不穩定而且可能會影響效率.

使用這種方式引用,和對應文件以及核心代碼分離的,如果用戶想要禁用某個資源,直接刪除、修改、注釋掉即可,而不需要從核心代碼中修改.

此外,WordPress 中內置了一些常用的庫(例如 jQuery、jQuery UI 等),我們可以使用wp_enqueue_script 這個函數直接調用內置庫,可以節約代碼量,更加清晰規范.

如果使用這個函數來引用自己的 JS 和 CSS 文件,首先需要使用 wp_register_script 這個函數注冊一個標識(handle),然后使用 wp_enqueue_script 函數調取這個標志對應的資源。

WordPress 合理引入 JS 和 CSS 的方法,可以使用下面代碼為你的插件引入 plugin.css 文件.

<?php

function wpjam_add_styles() {

  wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));

  wp_enqueue_script('plugin_stylesheet');

}



add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );

?>

上面先用 wp_register_script 函數創建了一個標識符為 plugin_stylesheet 的資源,隨后將其排隊請求添加到 wp_enqueue_scripts action 中,雖然函數名中是 script，但是跟資源文件的類型沒有關系,對 CSS 和 JS 都有效。

很顯然 wp_register_script 函數沒有這么簡單,它可以有五個參數：

•$handle：資源標識符，供 wp_enqueue_script 調用。

•$src：資源的位置。相對地址或者絕對地址或者使用 WordPress 內置的函數獲取地址等。常用定位函數有 plugins_url、get_template_directory_uri 等。

•$deps：依賴關系。如果引用的是 jQuery 插件，需要依賴 jQuery 組建，那么就需要填寫上 jQuery。注意，以數組的形式傳遞。

•$ver：資源版本，可選的。

•$in_footer：是否放在底部,一般來說,JS 文件要放在頁面的底部,就可以設置這個參數為 True,留空或者 False 會輸出到頂部。

下面看一個引用 JavaScript 文件的比較完整的例子:

<?php

function wpjam_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', 'wpjam_add_scripts' );

?>