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?


10

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 để 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:

Ảnh chụp màn hình menu con thả xuống


Điều này thật khó khăn, vì wp_nav_menu không liên quan đến phân cấp trang (hoặc tất cả các trang, cho vấn đề đó). Tôi không biết đủ về thực đơn để trả lời điều này ngay bây giờ, nhưng đây là một câu hỏi rất thú vị.
John P Bloch

Tôi không hiểu hết câu hỏi. Bạn đang cố gắng để thực hiện? Tôi thấy mã nhưng tôi không nhận được bối cảnh. Có một trang web nào muốn? Ảnh chụp màn hình?
MikeSchinkel

Anh ta muốn thêm các mục con của các mục trình đơn cấp cao nhất một cách có điều kiện (nghĩa là chỉ khi cấu trúc cây đó được kích hoạt) trong api menu điều hướng mới.
John P Bloch

@ John P. Bloch - "chỉ khi cấu trúc cây hoạt động" nghĩa là gì? Có phải chúng ta chỉ nói chuyện với Trang? Điều gì về bài viết, danh mục, thẻ, bài viết tùy chỉnh, vv? Anh ta muốn làm điều đó trên máy khách thông qua jQuery hoặc trong máy chủ? Tôi đoán tôi không muốn giả sử và tôi muốn nghe thêm về trường hợp sử dụng thực tế.
MikeSchinkel

@MikeSchinkel Trong trường hợp cụ thể này, tôi nghĩ rằng chúng ta có thể chỉ nói về các trang, nhưng dù sao thì điều đó cũng không quan trọng; giải pháp vẫn sẽ như vậy. Tôi nghĩ ZaMoose muốn nó được thực hiện phía máy chủ.
John P Bloch

Câu trả lời:


9

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 có thể chỉ cần kéo widget vào một trong các khu vực widget của bạn và BAM nó 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/


Đây là SO, rất gần với những gì tôi cần. Vấn đề duy nhất là nó hoạt động sai khi BuddyPress hoạt động.
ZaMoose

2

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ị biểu tượng con sử dụng thứ gì đó như sau:

.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

nhập mô tả hình ảnh ở đây 1 đây là màn hình php.

nhập mô tả hình ảnh ở đây 2 đây là màn hình css.


Đăng câu trả lời dưới dạng ảnh chụp màn hình mã là cách tồi tệ nhất có thể - vui lòng xem lại câu trả lời của bạn. Một vài lời giải thích cũng sẽ không đau.
Picard

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;
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.