如何在WordPress中为单独页面引入CSS文件

在WordPress开发中，经常会遇到需要为特定页面引入单独CSS样式的情况，尤其是在使用include或其他方式将独立的HTML页面嵌入到主题中时。直接在HTML文件中添加标签可能无法生效，正确的做法是利用WordPress提供的wp_enqueue_style函数。

使用 wp_enqueue_style 函数引入CSS

WordPress推荐使用 wp_enqueue_style 函数来管理CSS文件的引入，这不仅符合WordPress的最佳实践，也方便进行依赖管理和版本控制。

wp_enqueue_style 函数的基本语法如下：

wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' );

• $handle (string) (Required): CSS文件的唯一标识符。
• $src (string) (Optional): CSS文件的URL。
• $deps (array) (Optional): 依赖的其他样式表，可以是一个包含 handle 的数组。
• $ver (string|bool|null) (Optional): CSS文件的版本号，用于缓存管理。如果设置为 null，则WordPress会自动添加版本号。
• $media (string) (Optional): 指定CSS应用于哪些媒体类型，默认为 all。

关键在于 $src 参数，它需要是CSS文件的完整URL。

立即学习“前端免费学习笔记（深入）”；

具体步骤

1. 确定CSS文件的URL： 首先，你需要确定aboutus.css文件的完整URL。这通常取决于你将该文件放置在主题目录下的哪个位置。例如，如果你的CSS文件位于主题目录下的 css 文件夹中，那么URL可能类似于：get_template_directory_uri() . '/css/aboutus.css'。

   

   名品购物网店系统

   适合品牌专卖店专用，从前台的美工设计就开始强调视觉形象，有助于提升商品的档次，打造网店品牌!后台及程序核心比较简洁，着重在线购物，去掉了繁琐的代码及垃圾程式，在结构上更适合一些中高档的时尚品牌商品展示. 率先引入语言包机制，可在1小时内制作出任何语言版本，程序所有应用文字皆引自LANG目录下的语言包文件，独特的套图更换功能，三级物品分类，购物车帖心设计，在国内率先将购物车与商品显示页面完美结合，完

   下载

2. 在 functions.php 文件中注册和引入CSS： 在你的主题的 functions.php 文件中，使用 wp_enqueue_style 函数来注册和引入CSS文件。最好将其放置在 wp_enqueue_scripts 钩子中。

   function my_theme_enqueue_styles() {
       $location_of_file = get_template_directory_uri(); // 获取主题目录的URL
       wp_enqueue_style( 'aboutus', $location_of_file . '/css/aboutus.css', array(), filemtime( get_template_directory() . '/css/aboutus.css' ) );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

   • get_template_directory_uri() 函数用于获取当前主题的URL。
   • filemtime( get_template_directory() . '/css/aboutus.css' ) 用于获取CSS文件的最后修改时间，并将其作为版本号，方便浏览器缓存更新。

3. 确保在特定页面加载CSS： 如果aboutus.css只需要在About Us页面加载，你需要添加条件判断。首先，你需要知道About Us页面的唯一标识，例如页面ID或模板文件。

   方法一：根据页面ID判断

   function my_theme_enqueue_styles() {
       $location_of_file = get_template_directory_uri();
   
       if ( is_page( 'about-us' ) ) { // 替换 'about-us' 为你的About Us页面的 slug
           wp_enqueue_style( 'aboutus', $location_of_file . '/css/aboutus.css', array(), filemtime( get_template_directory() . '/css/aboutus.css' ) );
       }
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

   方法二：根据模板文件判断

   如果你的About Us页面使用了特定的模板文件，你可以根据模板文件来判断。

   function my_theme_enqueue_styles() {
       $location_of_file = get_template_directory_uri();
   
       if ( is_page_template( 'template-aboutus.php' ) ) { // 替换 'template-aboutus.php' 为你的About Us页面的模板文件
           wp_enqueue_style( 'aboutus', $location_of_file . '/css/aboutus.css', array(), filemtime( get_template_directory() . '/css/aboutus.css' ) );
       }
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

注意事项

• CSS文件路径： 确保 $src 参数中的CSS文件路径是正确的，包括大小写。
• 缓存问题： 如果CSS文件更新后没有生效，尝试清除浏览器缓存或使用不同的版本号。
• 依赖关系： 如果你的CSS文件依赖于其他样式表，请在 $deps 参数中指定。
• 加载顺序： wp_enqueue_style 函数会按照注册的顺序加载CSS文件。如果需要控制加载顺序，可以使用 wp_dequeue_style 函数取消注册，然后重新注册并调整顺序。
• 钩子优先级： 如果你的CSS没有生效，可以尝试调整add_action中的优先级，例如add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 20 );

总结

通过使用 wp_enqueue_style 函数，你可以轻松地为WordPress中的独立HTML页面添加自定义CSS样式。记住，关键在于提供正确的CSS文件URL，并确保在合适的钩子中注册和引入CSS文件。通过条件判断，可以实现只在特定页面加载CSS，提高网站性能。