php - 更改导航菜单 parent 和 child 的 CSS

Question

我有一个 PHP 脚本，它会根据标题出现在哪个菜单项下将 CSS 属性分配给标题。

我有这个菜单结构。 About 及其子项需要有橙色 标题，Services 及其子项需要有紫色 标题

关于服务
第1页第4页
第2页第5页
第 3 页第 6 页

目前我的脚本会检测一个页面是否是某个页面的子页面，但所有标题的样式都与我脚本的第一个 if 语句的样式相同。 (即我首先检查服务，所有内容都分配了一个紫色标题)

这是两个脚本，谁能告诉我哪里出了问题？

if(get_the_title($ID) === "Services" || is_tree($ID) == true) {
     echo '<style type="text/css">
                .header-page h1 {
                        background-color: #9B87A9;
                    }

                    .header-page h2 {
                        background-color: #9B87A9;
                    }
                </style>';
}

else if(get_the_title($ID) === "About" || is_tree($ID) == true) {
    echo '<style type="text/css">
                .header-page h1 {
                        background-color: #dea949;
                    }

                    .header-page h2 {
                        background-color: #dea949;
                    }
                </style>';
}

和第二个脚本/函数:

function is_tree($pid) {      // $pid = The ID of the page we're looking for pages underneath
global $post;         // load details about this page
if(is_page()&&($post->post_parent==$pid||is_page($pid))) 
           return true;   // we're at the page or at a sub page
else 
           return false;  // we're elsewhere
};

Answer 1

你不应该在样式标签中回显一些 CSS，而是有条件地为你的菜单或菜单项分配类，然后为特定类使用 css。

您在这里所做的是将相同的样式分配给所有 .header-page h1元素(是菜单标题吗？)，它将应用于所有 <h1 class="header-p[age"> .

如果您的“关于”菜单有一个不同的类，比方说 .about您只需为此元素使用不同的 css，而无需使用 php 条件。

例如，使用 html 和 css:

<h1 class="header-page about">About</h1>
<ul class="menu about">
 ...
</ul>


 <h1 class="header-page services">Services</h1>
 <ul class="menu services">
 ...
 </ul>

现在您可以在没有条件的情况下应用样式:

 <style>
 h1.header-page.about {color:black}
 ul.menu.about {color:red}
 h1.header-page.services {color:green}
 ul.services {color:yellow}
 </style>