更改子页面的背景色

时间：2014-01-28 作者：4ndro1d

我有几页，按如下顺序排列：

Home
Projects
- Project 1
-- Project 1 Subpage 1
-- Project 1 Subpage 2
- Project 2
-- ...

我想改变背景色（在这种情况下.site-main {} 或任何其他css类），具体取决于用户当前所在的页面。

当前在主页上（这是默认布局）->标准背景颜色浅蓝色

我在项目1的页面上->背景应为绿色背景应为绿色

我在项目2->背景红或其他东西这是目前的标准布局（最轻的部分应更改）：

enter image description here

实现这一目标的最佳/最简单的方法是什么？

Edit:

我所知道的是：

在我的页面中。php我添加了这个

<div id="main-content" class="main-content <?php echo "roadkill-main-content"; ?>">

这很好用（我正在换一种颜色）。缺少的是如何检测当前页面是子页面还是孙页面，或者是包含slug“project1”或其他内容的页面。正确的方法是什么？

3 个回复

SO网友:Circuit Circus

另一个解决方案是为项目页面注册一个元框，它允许您为每个页面键入任何想要的类名…

function add_project_page_metabox() {
    add_meta_box(
        \'project_page_meta\',    //  $id
        \'Project Meta\', 
                        //  $title
        \'ppm_callback\', //  $callback
        \'page\', //  $post_type  
        \'side\',         //  $context
        \'low\'           //  $priority
    );
}
add_action( \'admin_init\', \'add_project_page_metabox\' );

function ppm_callback() {
    global $post;
    $project_class = get_post_meta($post->ID,\'project_class\',TRUE);
    wp_nonce_field( $_POST[\'page_meta_noncename\'],__FILE__);

    /*  some UI styling */ ?>
<style type="text/css">
#project_page_meta          {display:block;margin:0 0 12px;float:none;}
#project_page_meta label    {display:block;margin:0 1em .6em 0;}
#project_page_meta input    {margin:0 0 .25em;clear:both;float:none;max-width:97%;}
</style>
    <label>Add class name</label>
    <input class="project_class" size="35" type="text" name="project_class" value="<?php if($project_class) { echo $project_class; } ?>"/>
    <?php
}

    //  process the meta
function project_meta_save($post_id) {
    if(!current_user_can(\'edit_post\', $post_id)) { return $post_id; }
    $accepted_fields[\'page\'] = array(
        \'project_class\' 
    );
    foreach($accepted_fields[\'page\'] as $key){
        $custom_field = $_POST[$key];
        //If no data is entered
        if      (is_null($custom_field)) { delete_post_meta($post_id, $key); }
        elseif  (isset($custom_field) && !is_null($custom_field))
                { update_post_meta($post_id,$key,$custom_field); } 
        else    { add_post_meta($post_id, $key, $custom_field, TRUE); }
    }
    return $post_id;
}
add_action(\'save_post\', \'project_meta_save\', 3, 1 );

…然后在页面中使用此选项。类似phpclass="<?php echo get_post_meta($post->ID,\'project_class\',TRUE); ?>"

SO网友:Circuit Circus

布拉德·道尔顿（BradDalton）已经给出了一点答案——添加一个身体类(<body <?php body_class(\'nameofyourclass\'); ?>>). 然后，下一步是查看WP自动添加的类。这些是（关于你的例子）：

Projects:               .page-parent
- Project 1:            .page-parent and .page-child
-- Project 1 Subpage 1  .page-child

现在利用样式表中的所有功能，如：

body.nameofyourclass.page-parent            {/* rules for "Projects" */}
body.nameofyourclass.page-parent.page-child {/* rules for "Project 1" */}
body.nameofyourclass.page-child             {/* rules for "Project 1 Subpage 1" */}

希望，这会有所帮助。

SO网友:4ndro1d

这就是我解决问题的方法：

在我的功能中。php我添加了以下内容：

function custom_css_style () {
    global $post;
    $parent = get_page($post->post_parent);
    $grandparent = $parent->post_parent;

    if ( is_page(\'40\') || $post->post_parent == \'40\' || $grandparent == \'40\' ) {
        $cssclass = "roadkill-main-content";
    } else {
        $cssclass = "";
    }
    return $cssclass;
}

在我的页面中。php我调用了此函数：

<div id="main-content" class="main-content <?php echo custom_css_style(); ?>">

因此，我能够为我在函数中处理的案例定义背景颜色。php如下所示：

.roadkill-main-content {
     background-color: #9C006B;
}

我试着用Slug来实现这些，但似乎使用ID是唯一的方法

结束

小码农CODE

更改子页面的背景色

相关推荐

以自定义字段值为条件的CSS