Css WordPress：激活不同页面上的不同样式表

为了将我的样式表链接到我的WordPress主题，我在customtheme/style.css中有以下内容：

@import url('bootstrap/bootstrap.min.css');
@import url('includes/styles1.css');
@import url('includes/styles2.css');

---

假设我只想在一个页面（比如主页）上加载styles1.css，在所有其他页面上加载styles2.css。是否仍要指定此项

为什么要在不同的页面上加载不同的样式表？拥有最少的纸张将导致更好的分数和/或更快的加载时间。只需在一个样式表中针对不同的页面指定特定的类或id，您就是黄金。

和

工作原理：

wp_register_样式允许您注册自己的样式表并给它们自己的句柄。这使您能够定义所有样式，并根据需要加载它们。在许多情况下，您经常会看到样式表在主题生命周期的早期注册，然后根据一些逻辑检查排队

例如：

假设您有一些自定义短代码，但不想加载其任何样式表，除非实际使用了短代码本身：

functions.php

不过，在大多数情况下，wp_排队方式就足够了。使用此功能，您可以一次性注册样式表并将其排入队列：

add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
    //Register and enqueue the style
    wp_enqueue_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}

在您的情况下，您可以在加载适当的样式表之前执行一些快速逻辑检查以确定用户正在访问的页面：

add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
    if(is_home()){ //is_front_page() if you're using a Page for the home page
        //Load only on the home page
        wp_enqueue_style('home-styles', get_template_directory_uri() . '/css/styles1.css');
    }
    //Load everywhere else
    wp_enqueue_style('my-theme', get_template_directory_uri() . '/css/styles2.css');
}

快速提示：为了让样式表排队工作，您的主题必须使用和。如果您的活动主题在其模板文件中缺少这些，那么样式表队列将无法工作

另见：

---

我看到您有一个if-then语句，在这个语句中您有一个

is_home（）

——这是一个检索front-page.php的函数吗？另外，

主页样式

和

我的主题

只是随机标签，还是它们引用了WordPress或我的主题中的某个内容？

是一个WordPress函数，用于确定您是否正在查看主页<代码>主样式

和

我的主题

只是随机标签。您可以将它们更改为您喜欢的任何样式，但如果您使用的是

wp\u register\u style

和

wp\u enqueue\u style

的组合，则这些句柄必须相同。感谢您的详细回复。这两个函数分别是_home（）和_front_page（）！

add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
    if(is_home()){ //is_front_page() if you're using a Page for the home page
        //Load only on the home page
        wp_enqueue_style('home-styles', get_template_directory_uri() . '/css/styles1.css');
    }
    //Load everywhere else
    wp_enqueue_style('my-theme', get_template_directory_uri() . '/css/styles2.css');
}