css - WordPress:在不同的页面上激活不同的样式表

Question

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

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

假设我只想在一个页面(比如主页)上加载 styles1.css 并在所有其他页面上加载 styles2.css。无论如何要指定这个？

Answer 1

wp_register_style和 wp_enqueue_style

工作原理:

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

举个例子:

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

函数.php

add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
    //Register the style
    wp_register_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}
add_action('init', 'custom_init');
function custom_init()
{
    //Example shortcode
    add_shortcode('my_shortcode', 'custom_shortcode');
}
function custom_shortcode($atts, $content = null)
{
    //If registered style isn't loaded....
    if (!wp_style_is('my-shortcode-styles')) {
        //Enqueue it!
        wp_enqueue_style('my-shortcode-styles');
    }
    return 'My Shortcode!';
}

但在大多数情况下，wp_enqueue_style 就足够了。使用它，您可以一次性注册和排队您的样式表:

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');
}

快速说明:为了使样式表入队工作，您的主题必须使用wp_head和 wp_footer .如果您的事件主题在其模板文件中缺少这些，则样式表入队将不起作用。

另见:

• > wp_register_script
• > wp_enqueue_script