生成具有wp_list_pages()和WordPress 3.0中新菜单功能的显示子页面的菜单?


10

以前,我能够使用以下逻辑来为当前选择的父页面选择性地加载子页面:

if(  $post->post_parent ) {
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
} else {
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}

if ($children) { ?>
   <ul id="subnav">
     <?php echo $children; ?>
   </ul>
<?php 
} else {
}

使用新的register_nav_menus()/ wp_nav_menu()功能似乎没有本机的方法。有人知道我现在该如何修补吗?

这是我要实现的屏幕截图:

下拉子菜单屏幕截图


这很困难,因为wp_nav_menu与页面层次结构(或与此相关的页面)无关。我对菜单的了解不多,现在无法回答这个问题,但这是一个非常有趣的问题。
约翰·布洛赫

我不完全理解这个问题。你想达到什么目的?我看到了代码,但是没有上下文。有想要的网站吗?屏幕截图?
MikeSchinkel 2010年

他想在新的导航菜单api中有条件地(即,仅当该树结构处于活动状态)添加顶级菜单项的子项。
约翰·布洛赫

@John P. Bloch- “仅当树结构处于活动状态时”是什么意思?我们是否仅在谈论Pages?帖子,类别,标签,自定义帖子等如何?他是否想通过jQuery在客户端或在服务器上执行此操作?我想我不想假设,我想听听更多有关实际用例的信息。
MikeSchinkel 2010年

@MikeSchinkel在这种特殊情况下,我认为我们可能只在谈论页面,但这没关系;解决方案仍然是相同的。我认为ZaMoose希望它在服务器端完成。
约翰·布洛赫

Answers:


9

我创建了一个名为Page Sub Navigation(我知道的聪明)的小部件,该小部件正在为我工​​作。

如果安装了此组件,则只需将窗口小部件拖动到窗口小部件区域之一即可,并且BAM可以运行。

<?php
/*
Plugin Name: Page Sub Navigation
Plugin URI: http://codegavin.com/wordpress/sub-nav
Description: Displays a list of child pages for the current page
Author: Jesse Gavin
Version: 1
Author URI: http://codegavin.com
*/

function createPageSubMenu()
{
  if (is_page()) {
    global $wp_query;

    if( empty($wp_query->post->post_parent) ) {
      $parent = $wp_query->post->ID;
    } else {
      $parent = $wp_query->post->post_parent;
    }

    $title = get_the_title($parent);

    if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
      echo "<div id='submenu'>";
      echo "<h3><span>$title</span></h3>";
      echo "<ul>";
      wp_list_pages("title_li=&child_of=$parent&echo=1" );
      echo "</ul>";
      echo "</div>";
    }
  }
}


function widget_pageSubNav($args) {
  extract($args);
  echo $before_widget;
  createPageSubMenu();
  echo $after_widget;
}

function pageSubMenu_init()
{
  wp_register_sidebar_widget("cg-sidebar-widget", __('Page Sub Navigation'), 'widget_pageSubNav');
}
add_action("plugins_loaded", "pageSubMenu_init");
?>

或者,如果您只想要多汁的部分...

if (is_page()) {
  global $wp_query;

  if( empty($wp_query->post->post_parent) ) {
    $parent = $wp_query->post->ID;
  } else {
    $parent = $wp_query->post->post_parent;
  }

  if(wp_list_pages("title_li=&child_of=$parent&echo=0" )) {
    wp_list_pages("title_li=&child_of=$parent&echo=1" );
  }
}

更新

我发现了另一个插件,其功能基本相同(也许我做得更好,我不知道)。 http://wordpress.org/extend/plugins/subpages-widget/


就是这样,非常接近我的需求。唯一的问题是,当BuddyPress处于活动状态时,它的行为不正确。
ZaMoose

2

你可以做一个CSS黑客做到这一点(我会尝试的两种方式)

1这是我想到的最简单的方法,可以使CSS在子导航中显示项目。

.current-menu-ancestor ul {display:inline;}
.current-menu-parent ul (display:inline;}

2假设您的主题支持正文类,则可以为每个“子导航”创建一个导航菜单,并将其设置为显示在主导航下方-然后编辑样式表以仅使用以下方式显示子导航div:

.child-menu-about, .child-menu-leadership {display:none;}
body.page-id-YOUR_ABOUT_PAGE_ID .child-menu-about {display:inline;}
body.category-YOUR-CATEGORY-SLUG  .child-menu-leadership {display:inline;}

0

在此处输入图片说明 1这是php显示。

在此处输入图片说明 2这是CSS显示。


将答案发布为代码屏幕截图是最糟糕的方法-请重新编辑答案。几句话的解释也不会受到伤害。
Picard'7

0
<nav class="site-nav children-link">
                <?php       

                    if(  $post->post_parent ) 
                    {
                      $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
                    } 
                    else 
                    {
                      $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
                    }

                    if ($children) { ?>
                       <ul>

                            <?php echo $children; ?>

                       </ul>

                    <?php 
                        } else {
                        }
                ?>
        </nav>

的CSS

/*children-links links*/

.children-link 
{       

        background-color: #1a5957;
        color:#FFF;
        font-size: 100%;

}

.children-link li
{
    margin: 10px;   


}

.children-link ul li a:link,
.children-link ul li a:visited 
{
        padding: 15px 17px;
        text-decoration: none;
        border: 1px solid #1a5957;

}
.children-link ul li a:hover 
{
        background-color: #1a5957;
        color:#FFF;
        font-weight: bold;

}
.children-link .current_page_item a:link,
.children-link .current_page_item a:visited
{

    background-color: #1a5957;
    color: #FFF;
    cursor: default;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.