Question

我正在根据 _s ＆amp;创建一个主题 Zurb 的 基金会 。我已经完成了所有设置并准备开始进入CSS，但是我在顶部栏上显示“主菜单”时遇到了问题。我希望将“左侧导航按钮”留在原处，以获得突出显示的链接（可能与我们联系或类似），但我想替换 ul class =“right”中的当前内容 用于WordPress主菜单。以下是我当前 标题id =“标头”

的内容

<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

您还需要使用walker来自定义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

在Zurb Foundation标题中显示WordPress主菜单[_s主题]

1 个答案: