在模板中直接使用link標簽引用css樣式文件是在wordpress主題開發中常用的方法,但這不是wordpress正確的引用css文件的方法。
- 原文來源:詳情
wordpress正確引用方法是使用wp_enqueue_style()函數。
語法結構
<?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?>
參數
- $handle – 調用的樣式文件名稱,唯一性,因此不能和其它css文件命名相同。
- $src – css文件的路徑(即url),不要直接使用域名url,要使用路徑函數,如get_template_directory_uri()來獲取主題目錄中的樣式文件。
- $deps – 依賴關系,如果丟失某些其他樣式文件將導致你的樣式表將無法正常工作,你可以使用該參數設置“依賴關系”。,非必需。
- $ver – 加載的css文件的版本號,可以使用主題的版本號或隨意自定義一個,設置為null則不使用版本號。默認為false,使用WordPress的版本號。
- $media – 是指CSS的媒體類型,比如“screen”或“handheld”或“print”。如果不知道是否需要,就留空。默認為“all”。
通過wp_enqueue_style()
函數加載css文件時,應該將它分配給一個鉤子,如只在前臺調用,使用鉤子wp_enqueue_scripts
;
只在后臺調用,使用admin_enqueue_scripts
;
用在WP登陸頁面加載則使用login_enqueue_scripts
。
只在前臺調用
<?php
function tone_front_boot(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );
}
add_action( 'wp_enqueue_scripts', 'tone_front_boot' );
?>
只在后臺調用
<?php
function tone_admin_boot(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );
}
add_action( 'admin_enqueue_scripts', 'tone_admin_boot' );
?>
另外一種方法,使用wp_head
鉤子和admin_head
鉤子
為WordPress后臺添加css和js代碼
<?php
function admin_jscss() {
wp_enqueue_style( 'admin-myjscss', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_script('admin-myjscss', get_template_directory_uri() . '/js/bootstrap.js' );
wp_enqueue_script( 'admin-myjscss', get_template_directory_uri() . '/js/jquery.min.js' );
}
add_action('admin_head', 'admin_jscss');
?>