将引导菜单集成到 WordPress 导航

Question

这是我的引导导航菜单代码。我想使用带有“Page-Scroll”的 Bootstrap Navwalker 代码将以下内容与 WordPress 菜单集成。你能帮忙吗？

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top"><img src="http://LOGO" width="100" style="position:relative;bottom:20px;"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Portfolio</a>
                </li>
                <li>
                    <a class="page-scroll" href="#blog">Blog</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

我想将此处的 Bootstrap Navwalker 代码与 class="page-scroll" 集成。我怎么做？

这是 Bootstrap NavWalker 代码：

<?php wp_nav_menu(array(
'container_class' => 'menu-header',
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
'walker' => new wp_bootstrap_navwalker,
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
)); ?> 

谢谢。

Answer 1

您必须在 wp_bootstrap_navwalker 中编写一个子类方法 start_el()，它将您的 css 类添加到菜单中的每个链接：

class wp_bootstrap_navwalker extends Walker_Nav_Menu {
    /**
    * Start the element output.
    *
    * The $args parameter holds additional values that may be used with the child
    * class methods. Includes the element output also.
    *
    * @since 2.1.0
    * @abstract
    *
    * @param string $output            Passed by reference. Used to append additional content.
    * @param object $object            The data object.
    * @param int    $depth             Depth of the item.
    * @param array  $args              An array of additional arguments.
    * @param int    $current_object_id ID of the current item.
    */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = 'class="page-scroll"';
        $output .= $indent . '<li' . $id . $class_names . '>';

        //Add attributes to link element.
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="'    . esc_attr( $item->xfn ) .'"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="'   . esc_attr( $item->url ) .'"' : ''; 
        $attributes .= 'class="page-scroll"';

        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

    }
}