it-swarm-vi.tech

Tạo Menu hiển thị Trang con bằng wp_list_pages () với Chức năng Menu mới trong WordPress 3.0?

Trước đây, tôi có thể tải có chọn lọc các trang con cho trang mẹ hiện được chọn bằng logic như:

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 {
}

Dường như không có cách riêng nào để thực hiện việc này bằng cách sử dụng chức năng register_nav_menus ()/wp_nav_menu () mới. Bất cứ ai biết làm thế nào tôi có thể vá điều này với nhau tại thời điểm này?

Đây là một ảnh chụp màn hình về những gì tôi đang cố gắng đạt được:

Drop down Child menu screenshot

10
ZaMoose

Tôi đã tạo một Widget có tên Page Sub Navigation (thông minh mà tôi biết) đang hoạt động cho tôi.

Nếu bạn cài đặt cái này, bạn chỉ có thể kéo widget vào một trong các khu vực widget của bạn vàBAMnó hoạt động.

<?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");
?>

Hoặc nếu bạn chỉ muốn những phần ngon ngọt ...

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" );
  }
}

CẬP NHẬT

Tôi đã tìm thấy một plugin khác về cơ bản giống như vậy (và có thể nó tốt hơn, tôi không biết). http://wordpress.org/extend/plugins/subpages-widget/

9
jessegavin

bạn có thể thực hiện hack css để làm điều này (2 cách mà tôi sẽ thử)

1 đây là cách dễ nhất mà tôi có thể nghĩ ra để làm cho css hiển thị các mục trong mạng con.

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

2 giả sử rằng chủ đề của bạn hỗ trợ các lớp cơ thể, bạn có thể tạo menu điều hướng cho mỗi "điều hướng phụ" và đặt chúng để hiển thị bên dưới điều hướng chính - sau đó chỉnh sửa biểu định kiểu của bạn để chỉ hiển thị div subnav bằng cách sử dụng như thế này:

.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;}
3
rfair404
<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;
}
0
maulik

 enter image description here  1 đây là màn hình php.

 enter image description here  2 đây là màn hình css.

0
maulik