在WordPress的CSS中选择页面的最有效方法是什么?

时间:2014-08-19 07:42:09

标签: php html css wordpress

我想在wordpress中为一组页面添加背景图片。

我想将另一张背景图片添加到另一组页面

目前,我正在使用PageID将其应用于每个页面,如下面的代码所示。因为有超过1000页。是否有更简单的方法来应用于每组页面?

    .page-id-264 #header .logo a,
    .page-id-272 #header .logo a {
     background-image: url("http://www.richcoward.com/newcges/wp-content/uploads/2014/08/NWU-No-Frame.png") !important;
     background-size: 100% !important;
     background-repeat: no-repeat !important;
     height: 86px !important; 
     width: 416px !important;
     }

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

您可以在functions.php文件中使用过滤器将类添加到所有相关页面。您仍然需要对每个页面ID进行调整,但我想在PHP中进行此操作会使CSS更小(因此加载速度更快):

// Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
    // array of Page IDs
    $pageids = array(264, 272);
    // if 
    if ( is_page( $pageids ) ) {
        // add 'class-name' to the $classes array
        $classes[] = 'class-name';
        // return the $classes array
        return $classes;
    }
}

或者,为每个背景创建页面模板。

答案 1 :(得分:0)

这是一个简单的解决方案。

在主题文件夹中创建自定义css(比如mystyle.css)文件。添加

#header .logo a {
     background-image: url("http://www.richcoward.com/newcges/wp-content/uploads/2014/08/NWU-No-Frame.png") !important;
     background-size: 100% !important;
     background-repeat: no-repeat !important;
     height: 86px !important; 
     width: 416px !important;
     }

进入你的mystyle.css。现在,打开你的functions.php并有条件地将你的样式表排入队列。使用is_page()is_page_template()条件检查。我相信你在谈论的是一组页面,所以我想你会为特定的群体使用特定的页面模板,所以我倾向于选择is_page_template

function enqueue_custom_style() {

  if(is_page_template('page-whatever.php')) {

    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/mystyle.css' );

  }
}

add_action('wp_enqueue_scripts', 'enqueue_custom_style', 999);

这应该给你一个想法