WordPress 加载自定义 CSS

优化 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

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 下添加引用

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 文件被引用了