顯示WordPress的主菜單中Zurb基金會頭[_s主題]

我基於_s & Zurb的基金會創建一個主題。我已經準備好了所有設置並準備好開始進入CSS，但我有問題需要在頂部欄上顯示「主菜單」。我想離開它的左側導航按鈕，爲高亮顯示的鏈接（可能與我們聯繫或類似），但我想替換當前內容ul class =「right」 for the WordPress Primary菜單。以下是我在目前的頭ID = 「刊頭」顯示WordPress的主菜單中Zurb基金會頭[_s主題]

<header id="masthead" class="site-header" role="banner"> 
    <div class="row"> 
     <div class="site-branding"> 
      <h1 class="site-title"> 
     <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
     <h2 class="site-description"><?php bloginfo('description'); ?></h2> 
     </div> 

<div class="contain-to-grid sticky"> 
    <nav id="site-navigation" class="top-bar" data-topbar data-options="sticky_on: large" role="navigation"> 
     <ul class="title-area"> 
     <li class="name"> 
      <h4><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"> 
       <?php bloginfo('name'); ?></a></h4> 
     </li> 
     <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
     </ul> 
    <section class="top-bar-section"> 

    <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="active"><a href="#">Right Button Active</a></li> 
      <li class="has-dropdown">  
       <a href="#">Right Button Dropdown</a> 
      <ul class="dropdown">  
       <li><a href="#">First link in dropdown</a></li> 
      </ul> 
      </li> 
     </ul> 

    <!-- Left Nav Section --> 
     <ul class="left"> 
      <li><a href="#">Left Nav Button</a></li> 
     </ul> 
</section> 
    </nav><!-- #site-navigation -->  
</div> 
</div> <!-- row -->  
</header><!-- #masthead -->

來源

2014-04-14 MarkS

您需要使用wp_nav_menu()。

http://codex.wordpress.org/Function_Reference/wp_nav_menu

您還需要使用助行器，其customises的wp_nav_menu()輸出，以匹配基金會的頂級酒吧。

您可以添加到您的funtions.php

class guts_top_bar_walker extends Walker_Nav_Menu { 

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) { 

     $element->has_children = !empty($children_elements[$element->ID]); 
     $element->classes[] = ($element->current || $element->current_item_ancestor) ? 'active' : ''; 
     $element->classes[] = ($element->has_children) ? 'has-dropdown' : ''; 

     parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
    } 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 

     $item_html = ''; 

     parent::start_el($item_html, $item, $depth, $args, $id); 

     $output .= ($depth == 0) ? '<li class="divider"></li>' : ''; 

     $classes = empty($item->classes) ? array() : (array) $item->classes; 

     if (in_array('section', $classes)) { 
      $output .= '<li class="divider"></li>'; 
      $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '<label>$1</label>', $item_html); 
     } 

     $output .= $item_html; 
    } 

    function start_lvl(&$output, $depth = 0, $args = array()) { 
     $output .= "\n<ul class=\"sub-menu dropdown\">\n"; 
    } 

}

您在wp_nav_menu()指定學步車。將標題中頂欄的截面區域替換爲以下內容;

<section class="top-bar-section"> 
    <?php wp_nav_menu(array('container' => false, 'menu_class' => 'left', 'theme_location' => 'primary-left', 'fallback_cb' => false, 'walker' => new guts_top_bar_walker())); ?> 

    <?php wp_nav_menu(array('container' => false, 'menu_class' => 'right', 'theme_location' => 'primary', 'walker' => new guts_top_bar_walker())); ?> 
</section>

即使你想高亮顯示的鏈接留在左邊部分，我建議設立另一個菜單，這樣就可以直接通過WordPress的儀表板使，而不需要修改自己的主題未來的變化。

您可以在functions.php中這樣註冊一個新的菜單區域：

register_nav_menu('primary-left', __('Left Navigation Menu', 'guts'));

來源

2014-05-02 09:47:50 Rose

顯示WordPress的主菜單中Zurb基金會頭[_s主題]

回答

相關問題