在Zurb Foundation標頭中顯示WordPress主菜單[_s theme]

Question

我正在基於_s ＆ Zurb的基金會創建一個主題。 我已經完成了幾乎所有的設置，並准備開始使用CSS，但是在將“主菜單”顯示在頂部欄中時遇到了問題。 我想保留“左導航按鈕”的位置，以保留突出顯示的鏈接（可能與我們聯系或類似），但是我想替換WordPress主菜單的ul class =“ right”中的當前內容。 這是當前標題id =“ masthead”中的內容

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

Answer 1

您需要使用wp_nav_menu() 。

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

您還需要使用助行器，該助行器可定制wp_nav_menu()的輸出以匹配Foundation頂部欄的輸出。

您可以將其添加到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' ) );

此處提供更多信息： http : //codex.wordpress.org/Function_Reference/register_nav_menus