Question

我为客户创建了一个WordPress网站，通过显示隐藏的项目（带有类＆＃34的无序列表;子菜单（生成）来筛选导航菜单（在外观 - >菜单中设置）通过WordPress菜单功能））。有三个层级;页面＆GT;定制链接和GT;帖子。单击页面时，将显示子项（自定义链接），单击自定义链接时，将显示子项目。然后，当您在帖子上时，所选路径将在导航中突出显示。这是通过使用wp_nav_menu函数生成的css和current / parent / ancestor类完成的。 wp_nav_menu函数生成的标记为：

<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155"><a href="http://localhost:8888/?page_id=60">Design</a>
<ul class="sub-menu">
    <li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152"><a href="#DesignCat1">#DesignCat1</a>
    <ul class="sub-menu">
        <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-207"><a href="http://localhost:8888/?p=113">DesignC1P1</a></li>
        <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-206"><a href="http://localhost:8888/?p=115">DesignC1P2</a></li>
    </ul>
</li>
    <li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153"><a href="#DesignCat2">#DesignCat2</a>
    <ul class="sub-menu">
        <li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144"><a href="http://localhost:8888/?p=117">DesignC2P1</a></li>
        <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143"><a href="http://localhost:8888/?p=119">DesignC2P2</a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-156"><a href="http://localhost:8888/?page_id=62">Research</a>
<ul class="sub-menu">
    <li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-149"><a href="#">#ResearchCat1</a>
    <ul class="sub-menu">
        <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-205"><a href="http://localhost:8888/?p=121">ResearchC1P1</a></li>
        <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-204"><a href="http://localhost:8888/?p=123">ResearchC1P2</a></li>
    </ul>
</li>
    <li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150"><a href="#">#ResearchCat2</a>
    <ul class="sub-menu">
        <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140"><a href="http://localhost:8888/?p=125">ResearchC2P1</a></li>
        <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139"><a href="http://localhost:8888/?p=127">ResearchC2P2</a></li>
    </ul>
</li>
</ul>
</li>
</ul>

当前页面是＆＃34; DesignC1P1＆＃34;，它分配了一个＆＃34; current-menu-item＆＃34;类，其父级（自定义链接（#DesignCat1））已分配＆＃34;当前菜单父＆＃34;和它的祖先（页面（设计））分配＆＃34; current-menu-ancestor＆＃34;。所以，使用CSS我做：

.current-menu-item > .sub-menu, .current-menu-parent > .sub-menu, .current-menu-ancestor > .sub-menu  {
    visibility: visible;
    display: inline;
}


.current-menu-item > a, .current-menu-parent > a, .current-menu-ancestor > a {
    color: #000;
    text-decoration: none;
}

效果很好，它可以使所有相关的菜单项可见并以黑色突出显示。

我的问题是我的客户明确要求帖子位于菜单中的多个位置，IE可能位于设计页面和研究页面下，或者设计/研究中的两个不同的自定义链接。这意味着为两个项目位置生成相同的标记，并且显示两个路径而不是所采用的路径。以下是使用＆＃34; Same Post＆＃34;生成的代码。在#DesignCat1和＃ResearchCat1下看起来像：

<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155"><a href="http://localhost:8888/?page_id=60">Design</a>
<ul class="sub-menu">
    <li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152"><a href="#DesignCat1">#DesignCat1</a>
    <ul class="sub-menu">
        <li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-202"><a href="http://localhost:8888/?p=193">Same Post</a></li>
    </ul>
</li>
    <li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153"><a href="#DesignCat2">#DesignCat2</a>
    <ul class="sub-menu">
        <li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144"><a href="http://localhost:8888/?p=117">DesignC2P1</a></li>
        <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143"><a href="http://localhost:8888/?p=119">DesignC2P2</a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-156"><a href="http://localhost:8888/?page_id=62">Research</a>
<ul class="sub-menu">
    <li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-149"><a href="#">#ResearchCat1</a>
    <ul class="sub-menu">
        <li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-203"><a href="http://localhost:8888/?p=193">Same Post</a></li>
    </ul>
</li>
    <li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150"><a href="#">#ResearchCat2</a>
    <ul class="sub-menu">
        <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140"><a href="http://localhost:8888/?p=125">ResearchC2P1</a></li>
        <li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139"><a href="http://localhost:8888/?p=127">ResearchC2P2</a></li>
    </ul>
</li>
</ul>
</li>
</ul>

任何想法如何只突出所采取的路径，而不是两者兼而有之？我知道HTML，CSS和一些java，用PHP不太好！任何帮助将不胜感激！

使用Wordpress Nav_Menu函数突出显示正确的路径

0 个答案: