在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' );
小結
本文只是非常簡單的講解了怎麼載入腳本,合理的利用腳本排隊機制,可以讓程式變得靈活,也可以加快效率。