在 WordPress 中为通过 include 或类似方式引入的其他 HTML 页面添加 CSS 样式，通常会遇到一些问题。直接在 HTML 文件中使用 标签可能无法正常工作，或者在 functions.php 中使用 wp_enqueue_style 函数但未正确配置 URL 也会导致样式无法加载。正确的做法是利用 wp_enqueue_style 函数，并确保提供 CSS 文件的完整 URL。
使用 wp_enqueue_style 函数
wp_enqueue_style 是 WordPress 提供的用于注册和加载 CSS 样式的函数。它允许开发者以规范的方式将样式表添加到主题中，并处理依赖关系和版本控制。
以下是 wp_enqueue_style 函数的基本用法：
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
- $handle (string, required): 样式的唯一名称，用于标识该样式。
- $src (string, required): 样式表的 URL。这是关键，需要提供 CSS 文件的完整 URL。
- $deps (array, optional): 依赖的其他样式表的句柄数组。
- $ver (string|bool|null, optional): 样式表的版本号。建议使用，用于缓存控制。
- $media (string, optional): 样式表应用的媒体类型，例如 'all', 'screen', 'print'。
示例代码
假设你的 aboutus.html 文件位于主题目录下的一个子目录中，例如 templates/aboutus.html，并且 aboutus.css 文件与 aboutus.html 文件位于同一目录。你可以按照以下步骤操作：
立即学习“前端免费学习笔记（深入）”；
-
获取 CSS 文件的完整 URL：
使用 get_template_directory_uri() 函数获取当前主题的 URL，然后拼接上 CSS 文件的相对路径。
$aboutus_css_url = get_template_directory_uri() . '/templates/aboutus.css';
-
在 functions.php 文件中注册并加载样式：
将以下代码添加到你的主题的 functions.php 文件中。建议将此代码放置在一个自定义的函数中，并在 wp_enqueue_scripts 钩子上调用该函数。
function my_theme_enqueue_styles() { $aboutus_css_url = get_template_directory_uri() . '/templates/aboutus.css'; wp_enqueue_style( 'aboutus', $aboutus_css_url, array(), '1.0', 'all' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );这段代码首先定义了一个名为 my_theme_enqueue_styles 的函数，该函数使用 wp_enqueue_style 函数注册并加载 aboutus.css 样式表。wp_enqueue_scripts 是一个 WordPress 钩子，用于在页面加载样式和脚本时执行自定义函数。
注意事项
- URL 的正确性： 确保 $src 参数提供的是 CSS 文件的完整 URL，而不是相对路径。如果 URL 不正确，样式表将无法加载。
- 缓存问题： 浏览器可能会缓存 CSS 文件，导致样式更新后无法立即生效。可以通过修改 $ver 参数的值来强制浏览器重新加载样式表。例如，可以使用 time() 函数生成一个动态的版本号。
- 依赖关系： 如果你的 CSS 文件依赖于其他样式表，可以在 $deps 参数中指定依赖的样式表的句柄。
- 主题钩子： 确保将 wp_enqueue_style 函数调用放在 wp_enqueue_scripts 钩子上，以便在正确的时间加载样式表。
总结
通过正确使用 wp_enqueue_style 函数，并确保提供 CSS 文件的完整 URL，可以有效地为 WordPress 中通过 include 或类似方式引入的其他 HTML 页面添加 CSS 样式。 记住检查 URL 的正确性、处理缓存问题以及正确设置依赖关系，可以避免常见的问题，并确保样式表能够正常加载。
