首頁  >  文章  >  web前端  >  快速掌握WordPress中載入JavaScript腳本的方法_javascript技巧

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

WBOY
WBOY原創
2016-05-16 15:24:571784瀏覽

在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' );

小結

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn