WordPress常用函数 wp_enqueue_style()

在模板中直接使用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');
?>
溫馨提示:

文章標題:WordPress常用函数 wp_enqueue_style()

文章連結:https://www.wuyanshuo.cn/119.html

更新時間:2022年3月22日

1、本站所有資源均不添加推廣檔案或浮水印,壓縮包內若有廣告檔案和浮水印請勿輕易相信。

2、本站資源均為兩層壓縮,第一層7z(尾碼若為wys,請自行修改為7z)有解壓密碼; 第二層zip或cbz,無解壓密碼,可直接使用漫畫類軟件程式查看; 詳情可參攷解壓教程

3、本站大部分內容均收集於網絡! 若內容侵犯到您的權益,請發送郵件至:admin#wysacg.top我們將第一時間處理! 資源所需價格並非資源售賣價格,是收集、整理、編輯詳情以及本站運營的適當補貼,並且本站不提供任何免費技術支援。 所有資源僅限於參攷和學習,版權歸原作者所有!

给TA打赏
共{{data.count}}人
人已打赏
建站教程

WordPress常用函数 add_theme_support()

2022-1-7 7:57:22

建站教程

WordPress常用函数 wp_enqueue_script()

2022-1-7 20:52:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索