显示包含父项、子项和/或兄弟项页面的菜单

时间:2012-03-18 作者:rhand

Here 您可以看到在水平导航栏中选择的父菜单。我已经开始工作了。我需要一个侧边栏,就像他们有相同的父母加上孩子时,他们存在。目前,由于Michael\'s feedback at WordPress Stack Exchange on an earlier question here. 但该代码不会在子页面上方显示父页面,也不会在兄弟页面上方显示子页面。有什么想法我可以调整Michael的代码:

<?php                  
    $children = wp_list_pages(\'title_li=&child_of=\'.$post->ID.\'&echo=0&depth=2\');                   
    if ($children) { ?>                   
        <ul id="three-menu">                   
        <?php echo $children; ?>                   
        </ul>                   
        <?php } //ends (if($children)//
    elseif($post->post_parent) { //if no children, try to get parent page and show siblings pages including the page itself
        $siblings = wp_list_pages(\'title_li=&child_of=\'.$post->post_parent.\'&echo=0&depth=1\');                  
        if ($siblings) { ?>                   
              <ul id="three-menu">                   
            <?php echo $siblings; ?>                   
            </ul> 
    <?php } //ends if($siblings)// ?>                  
        <?php } else { //optional: if no children and if no parent, then show all top level pages
        $pagelist = wp_list_pages(\'title_li=&echo=0&depth=1\');                   
            if ($pagelist) { ?>                   
                <ul id="three-menu">                   
                <?php echo $pagelist; ?>                   
                </ul>
    <?php } //ends if($pagelist)// ?>
    <?php } ?>
WordPress Codex页面http://codex.wordpress.org/Function_Reference/wp_list_pages#List_current_Page_with_its_ancestors_and_children 看起来很有趣,但我还没有完全弄清楚。。

Update:

我用第一个添加了两个孩子if 陈述这有助于在permalink级别加载孩子和兄弟姐妹,如:http://domain.com/top-level-page/. 我只需要做一些造型和返工下一个级别。

Update 2 CSS Solution

在一些帮助下,我确实有一个菜单,使用wep_list_pages 还有一些CSS。这基本上是一个CSS解决方案。

 <div id="home-menu">

                     <div class="wplp_menu">
                        <ul id="top-level-sidebar">
                     <?php wp_list_pages(\'title_li=\'); ?>
                        </ul>
                     </div>

                </div>  
和CSS:

li.current-page-ancestor a, li.current-menu-item a 
 {
    color:#146BBB; //#0D55A8;
}

ul.children .current_page_item a:link, 
ul.children .current_page_item a:visited {
    background-color:#CCCCCC;
    width: 250px;
}


.wplp_menu li{
list-style:none;    /*blends out list dots,can be removed if done somewhere else*/
}

ul#top-level-sidebar {
    background: #5097EA;
    width: 300px;
    margin: 0 10px 0 50px;
    float: left;
}

.wplp_menu .page_item a {
display:none;   
}
.wplp_menu .current_page_ancestor a,.wplp_menu .children .current_page_item a,.wplp_menu .current_page_item li a  {
display:block;
}

.current_page_item a {    /* CSS for active item*/  
font-weight:bold;
}
.current_page_item li a {
font-weight:normal;  /* Resets the above for its children */
}

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

在合作伙伴开发人员的帮助下,我开发了一个CSS解决方案。上述问题已添加解决方案。它只是在开始时隐藏所有页面项display:none 然后显示我需要的项目。页面列表加载所需的缩进,使用wp_list_pages(\'title_li=\');

结束

相关推荐

Thesis -style Navigation

我正在研究一个主题,我希望用户能够像论文一样选择要在主题选项页面中显示的页面。我已经在谷歌上搜索了几个小时的逆向工程论文,但还没有找到一个很好的解决方案。我想知道是否有人做过这件事或看过教程。