如何給WordPress網站添加Javascript代碼

若是是修改本身製做的模板主題,升級和更新本身掌控,javascript代碼的添加比較自由,可根據實際業務邏輯引入便可。可是若是想添加與主題無關的javascript代碼,例如訪客統計,性能監控等類型的獨立代碼,因爲與主題文件沒有關係,那麼最好的辦法就是在插件中添加代碼。javascript

WordPress提供了函數 wp_enqueue_script 和鉤子 wp_enqueue_scriptsphp

以方便開發者有能力嵌入自定義的代碼。java

下面簡述添加的方法步驟:jquery

在插件目錄下新建一個目錄,進入目錄後新建一個插件文件index.php,插入以下示例代碼:ajax

<?php
/*
Plugin Name: custom javascript
Description: Add custom javascript
*/
function add_custom_scripts() {  
   wp_enqueue_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array(), '1.12.1', false);
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

wp_enqueue_script 函數五個參數說明api

1. string $handle #對當前引入的javascript文件的惟一命名瀏覽器

2. string $src = '' #javascript文檔資源url緩存

3. array $deps = array() #依賴代碼handle函數

4. string|bool|null $ver = false #版本號,若是未指定,與WordPress系統版本號一致性能

5. bool $in_footer = false #是否在文檔底部,若是是false,則默認在文檔頭部就載入javascript

最後保存文件,去插件中心激活插件,在瀏覽器頁面查看頁面源代碼,就能夠看到引入的 javascript 文件了。

使用 wp_enqueue_script 函數有如下優勢:

a. 能夠設定與其餘依賴代碼的載入次序

b. 能夠指定版本號利於緩存管理

c. 能夠指定嵌入代碼在文檔的位置