快速掌握WordPress中載入JavaScript腳本的方法_javascript技巧

在WordPress 中載入腳本（為CSS 和JS，下同）文件，大多數人的做法是直接在header.php 文件中添加link 標籤，或者把link 標籤透過wp_head 鉤子直接添加到head 標籤裡，這種做法是不符合官方規範的。

標準的腳本載入方式應該是使用WordPress 官方提供的函數（後邊會說），統一標準有幾個好處，首先就是更加安全和利於管理，其次是更加的方便快捷，而且不僅主題能掛載腳本，插件也可以，並且還能管理腳本，並且調整掛載順序和位置和其它內容。

在哪個鉤子加載？

在呼叫載入腳本函數之前，我們首先要確定函數在哪個鉤子處執行，有四個常用的腳本載入鉤子，分別是wp_enqueue_scripts（在前台載入）、admin_enqueue_scripts（在後台載入）、login_enqueue_scripts（在登入頁載入）和init（全域載入）。

最常用的應該是 wp_enqueue_scripts 了，掛載到這上面，腳本只在前台載入。

載入 JavaScript 腳本

比如說我想在前台載入一個 JS，是主題根目錄 JS 資料夾的 themes.js 檔案。首先要使用 wp_register_script() 函式把 JS 加到腳本庫裡邊（註冊腳本），然後再使用 wp_enqueue_script() 函式掛載腳本。

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

載入 CSS 腳本

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

小結

本文只是非常簡單的講解了怎麼載入腳本，合理的利用腳本排隊機制，可以讓程式變得靈活，也可以加快效率。