WordPress 加载自定义 CSS

Gelomen

已于 2024-01-04 15:05:07 修改

阅读量785

点赞数 1

分类专栏：优化文章标签： css wordpress php

于 2020-10-18 21:47:57 首次发布

本文链接：https://blog.csdn.net/Gelomen/article/details/109124935

版权

优化专栏收录该内容

19 篇文章 0 订阅

订阅专栏

优化 WordPress 或者编写了前端代码需要优化样式时，可以使用主题自带的 自定义 -> 额外CSS 添加样式，但若需要添加的样式特别多时且针对某一功能，则最好是写在一个 css 样式文件里，这时就可以使用 wp_enqueue_style/5 加载

函数语法参数

函数总共 5 个参数：wp_enqueue_style($handle, $src, $deps, $ver, $media);

$handle :（字符串，必需）脚本名称，小写字符串；
$src :（字符串，必需）WordPress 目录下的 css 路径，如：“/wp-content/uploads/css/xxx.css”，你也可以使用函数，如 get_template_directory_uri() 来获取主题目录中的样式文件；
$deps :（数组，可选）依赖关系数组，加载该样式前需要加载的其它样式，默认值： array()；
$ver :（字符串或布尔，可选）指明脚本版本号的字符串，默认为 false；
$media :（字符串，可选）是指 CSS 的媒体类型，比如 screen 或 handheld 或 print，如果你不知道是否需要使用这个，那就不使用它，默认值为 all

用法

我的首页顶部有个模拟 shell 的打字动画，编写以下代码并保存为 simulate_shell.css

#header_shell {
        text-transform: none;
}
#ps1, #my_curcor {
        float: left;
        color: #00b2d7;
        white-space: pre;
}
#my_curcor {
        width: 0;
}
#my_shell {
        float: left;
        color: #ffbd2f;
}

然后上传该 css 文件到 /wp-content/uploads/css 目录下，再到当前主题的 functions.php 下添加引用

// 加载自定义css
function my_css_fun() {
	wp_enqueue_style('simulate_shell', '/wp-content/uploads/css/simulate_shell.css', array(), '1.0');
}
add_action('wp_head', 'my_css_fun');

最后保存并刷新页面，就可以看到效果了，在页面的源码里可以看到该 css 文件被引用了