如何有条件地将样式表仅针对特定页面排队?

时间:2012-01-16 作者:Evan Mattson

在开始之前,我想承认,有一些非常好的文章针对如何根据页面/帖子内容有条件地将脚本排队。

  • WordPress Plugin Development - How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts
  • How to load JavaScript like a WordPress Master

    我觉得答案是使用内置is_page() 功能(codex), 但当我尝试使用它时,网站就会中断,或者根本不起作用。

    我想我只是在错误的地方执行了条件逻辑。

    以下是我试图添加到函数中的内容。php:

    function wpse39130_register_more_stylesheets() {
        wp_register_style( \'stylesheet_name\', get_stylesheet_directory_uri() . \'/stylesheet.css\' );
    }
    add_action( \'init\', \'wpse39130_register_more_stylesheets\' );
    
    function wpse39130_conditionally_enqueue_my_stylesheet() {
        // only enqueue on product-services page slug
        if ( is_page( \'products-services\' ) ) {
            wp_enqueue_style( \'stylesheet_name\' );
        }
    }
    add_action( \'wp_enqueue_scripts\', \'wpse39130_conditionally_enqueue_my_stylesheet\' );
    
    当我删除其中的条件部分时,样式表将成功排队,因此我知道这是可行的。

3 个回复
最合适的回答,由SO网友:mor7ifer 整理而成

我将您的代码复制粘贴到我的开发环境中,只更改了页面名称,效果很好。您确定它没有被排队,只是被指错了,或者页面没有被错误命名或其他什么吗?

SO网友:MathSmath

你所做的是对的,你只是把它和错误的行为挂钩。尝试“wp”操作,而不是“init”。当init运行时,is\\u page()还不能正常工作。

EDIT:我错了。我以为您已经将\\u my\\u样式表连接到init,但您没有。is\\u页面应该从enqueue\\u scripts操作开始工作。很抱歉继续

SO网友:Piclaunch S

我试图遵循相同的代码,看看是否可以得到相同的结果,我注意到的是\\u page()没有按预期工作。因此,我遵循全局变量$post并检查类别名称/slug,后者使用简单的文本比较来决定操作。

    global $post;
    $postcat = get_the_category( $post->ID );
if ( ! empty( $postcat ) ) {
 echo esc_html( $postcat[0]->ID );   // Debug 
 echo esc_html( $postcat[1]->name ); // Debug 
 echo var_dump($postcat ); // Debug 
}
如果类别只有一个类别(不是子类别),则其值为

echo esc_html( $postcat[0]->name ); //Display name on screen
对于子类别,您将填写以下变量

echo esc_html( $postcat[1]->name ); //Display name on screen
现在,根据您的需要,使用下面的代码,就像我用来检查子类别名称一样:

//Use $postcat[0]->name for parent category name Can be your sub category name 
        if ( $postcat[1]->name == \'Shopping\' ) { 

                wp_enqueue_style( \'stylesheet_name\' );
            }else{
        // other code 
        }
完整代码:

        function wpse39130_register_more_stylesheets() {
        wp_register_style( \'stylesheet_name\', get_stylesheet_directory_uri() . \'/whatsqshop.css\' );
    }
    add_action( \'init\', \'wpse39130_register_more_stylesheets\' );

    function wpse39130_conditionally_enqueue_my_stylesheet() {
        // only enqueue on product-services page slug
    global $post; //GLobal Post variable 
    $postcat = get_the_category( $post->ID ); // Get the Category info from POST ID

    if ( ! empty( $postcat ) ) { // IF POST CATEGORY IS NOT EMPTY
    //    echo esc_html( $postcat[0]->slug );   //Display SLUG On output screen <Debug option>
  //echo esc_html( $postcat[0]->name ); //Display name on screen
     //echo esc_html( $postcat[1]->name ); //Display name on screen

    //echo var_dump($postcat ); // For debug 
    }
    //  if( is_single(88)) {
       if ( $postcat[1]->name == \'Shopping\' ) {
            wp_enqueue_style( \'stylesheet_name\' );
        }else{
    //wp_enqueue_style( \'stylesheet_name\' );
    }

    }
    add_action( \'wp_enqueue_scripts\', \'wpse39130_conditionally_enqueue_my_stylesheet\' );
示例:*无额外CSShttp://whatsq.com/category/gst16/

*仅具有上述类别背景的额外CSShttp://whatsq.com/information-technology/shopping-information-technology/mothers-day-gift-plan-show-mom-the-love-with-flowers-and-and-more/

结束

相关推荐

插件开发/停止css冲突。

我已经到处搜索了,对于我正在开发的第一个插件,我有点困惑。我创建了一个快捷码,用户可以在他们创建的任何页面上使用。问题是,在许多主题上,插件都会超出容器的宽度。我认为大多数模板都是960px宽的,我的插件是800px宽的(我不寻求关于使用em、百分比等开发的建议。这是一个固定大小的插件)。如何停止css冲突?我希望容器宽度为960px宽。必须有一些默认id和类,我可以在css中覆盖它们。我可以想象主题使用标准命名约定,以便允许用户随时切换。编辑:我还想删除页面上显示的任何边栏()。。。帮助不管怎样,有人对