2014-07-24 13 views
1

我使用Wordpress的wp_list_pages來顯示網站上的網頁導航。WordPress的 - 如何更改wp_list_page中的類名nav

一些頁面有孩子,所以我需要在這些鏈接下面的下拉菜單。

在HTML是這樣的

<ul class=""> 
    <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li> 
    <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li> 
    <li class="page_item page-item-8 page_item_has_children dropdown"> 
     <a href="">Products &#038; Services</a> 
     <ul class='children'> 
      <li class="page_item page-item-17"><a href="">Buying</a></li> 
      <li class="page_item page-item-19"><a href="">Selling</a></li> 
      <li class="page_item page-item-23"><a href="">Managing</a></li> 
     </ul> 
    </li> 
</ul> 

我想用引導創建導航和下拉菜單。

喜歡的東西 - http://www.ttmt.org.uk/nav/

這樣做的HTML是這樣的。

<ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Profile</a></li> 
    <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Inbox</a></li> 
      <li><a href="#">Drafts</a></li> 
      <li><a href="#">Sent Items</a></li> 
     </ul> 
    </li> 
</ul> 

需要添加一個「下拉」類包含的子頁面李和UL。我還需要爲「a」標記添加一個類和一個數據切換屬性。

當我使用wp_list_pages並且動態創建nav時,如何添加這些類。

我使用這個功能來「下拉菜單」添加到李containin子頁面

function add_parent_class($css_class, $page, $depth, $args){ 
    if (! empty($args['has_children'])) 
     $css_class[] = 'dropdown'; 
    return $css_class; 
} 
add_filter('page_css_class', 'add_parent_class', 10, 4);    

我怎麼能推廣的這一功能添加其他類我需要

回答

4

來實現這一功能,我們只能使用過濾器。我們將不得不擴展Walker類的WordPress。

我假設你已經調用wp_list_pages這樣的:

$args = array('authors' => '', 
    'child_of' => 0, 
    'date_format' => get_option('date_format'), 
    'depth' => 0, 
    'echo' => 1, 
    'exclude' => '', 
    'include' => '', 
    'link_after' => '', 
    'link_before' => '', 
    'post_type' => 'page', 
    'post_status' => 'publish', 
    'show_date' => '', 
    'sort_column' => 'menu_order, post_title', 
    'sort_order' => '', 
    'title_li' => __(''), 
    'walker' => '', 
); 

echo '<ul class="nav navbar-nav">' . wp_list_pages($args) . '</ul>' ; 

我們將通過價值沃克參數中。這個參數將成爲我們現在創建的一個類的對象。添加這個類在你的主題的functions.php或site specific plugin

class Wdm_Walker_Page extends Walker_Page { 

/** 
* @see Walker::start_lvl() 
* @since 2.1.0 
* 
* @param string $output Passed by reference. Used to append additional content. 
* @param int $depth Depth of page. Used for padding. 
* @param array $args 
*/ 
function start_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "\n$indent<ul class='dropdown-menu children'>\n"; 
} 

/** 
* @see Walker::start_el() 
* @since 2.1.0 
* 
* @param string $output Passed by reference. Used to append additional content. 
* @param object $page Page data object. 
* @param int $depth Depth of page. Used for padding. 
* @param int $current_page Page ID. 
* @param array $args 
*/ 
function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) { 
    if ($depth) 
     $indent = str_repeat("\t", $depth); 
    else 
     $indent = ''; 

    extract($args, EXTR_SKIP); 
    $css_class = array('page_item', 'page-item-'.$page->ID); 

    if(isset($args['pages_with_children'][ $page->ID ])) 
     $css_class[] = 'page_item_has_children dropdown'; 

    if (!empty($current_page)) { 
     $_current_page = get_post($current_page); 
     if (in_array($page->ID, $_current_page->ancestors)) 
      $css_class[] = 'current_page_ancestor'; 
     if ($page->ID == $current_page) 
      $css_class[] = 'current_page_item'; 
     elseif ($_current_page && $page->ID == $_current_page->post_parent) 
      $css_class[] = 'current_page_parent'; 
    } elseif ($page->ID == get_option('page_for_posts')) { 
     $css_class[] = 'current_page_parent'; 
    } 

    /** 
    * Filter the list of CSS classes to include with each page item in the list. 
    * 
    * @since 2.8.0 
    * 
    * @see wp_list_pages() 
    * 
    * @param array $css_class An array of CSS classes to be applied 
    *        to each list item. 
    * @param WP_Post $page   Page data object. 
    * @param int  $depth  Depth of page, used for padding. 
    * @param array $args   An array of arguments. 
    * @param int  $current_page ID of the current page. 
    */ 
    $css_class = implode(' ', apply_filters('page_css_class', $css_class, $page, $depth, $args, $current_page)); 

    if ('' === $page->post_title) 
     $page->post_title = sprintf(__('#%d (no title)'), $page->ID); 

    /** This filter is documented in wp-includes/post-template.php */ 
      if(preg_match('/dropdown/', $css_class) != FALSE){ 
    $output .= $indent . '<li class="' . $css_class . '"><a data-toggle="dropdown" class="dropdown-toggle" href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters('the_title', $page->post_title, $page->ID) . $link_after . '</a>'; 
      } 
      else{ 
       $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters('the_title', $page->post_title, $page->ID) . $link_after . '</a>'; 
      } 

    if (!empty($show_date)) { 
     if ('modified' == $show_date) 
      $time = $page->post_modified; 
     else 
      $time = $page->post_date; 

     $output .= " " . mysql2date($date_format, $time); 
    } 
    } 
} 

上面的類將所有你想要的類。

現在,我們需要將此類的對象傳遞給wp_list_pages。所以它看起來像這樣

$args = array(
        'authors' => '', 
        'child_of' => 0, 
        'date_format' => get_option('date_format'), 
        'depth' => 0, 
        'echo' => 1, 
        'exclude' => '', 
        'include' => '', 
        'link_after' => '', 
        'link_before' => '', 
        'post_type' => 'page', 
        'post_status' => 'publish', 
        'show_date' => '', 
        'sort_column' => 'menu_order, post_title', 
        'sort_order' => '', 
        'title_li' => __(''), 
        'walker' => new Wdm_Walker_Page() 
       ); 

echo '<ul class="nav navbar-nav">' . wp_list_pages($args) . '</ul>' ; 

我希望它有幫助!您不需要在過濾器page_css_class上編寫代碼。 :)

相關問題