如何将引导导航栏样式集成到 wordpress 中

Question

我无法将我的风格整合到 wordpress 中。我知道有一个选项可以在 wordpress 本身内执行此操作，它确实有效，但看起来没有连接到导航栏。我要做的就是为每个导航栏链接添加一个“sliding-middle-out”类。

<div class="collapse navbar-collapse" id="mainNavbar"><!-- NAVBAR COLLAPSE -->        

                    <div class="site-nav"><!-- SITE NAV -->

                        <?php

                            $args = array(

                                'theme_location' => 'primary'

                            );

                        ?>

                        <?php wp_nav_menu( $args ); ?>

                    </div><!-- ./SITE NAV -->

                </div><!-- NAVBAR COLLAPSE -->

我需要单独指定每个链接还是？，因为这在主题中不实用。

Answer 1

您可以在菜单标记中添加大量信息，完整列表请参见此处：https://developer.wordpress.org/reference/functions/wp_nav_menu/

但是，要将类添加到实际的 <a> 标记中，您需要创建一个导航步行器，这非常复杂。

以下是有关 Wordpress 中 Walkers 的一些信息：https://codex.wordpress.org/Class_Reference/Walker

还有一个非常简单的示例，应该添加您想要的类。您需要将其放在主题的 functions.php 文件中：

<?php
class Walker_Menu extends Walker {

    // Tell Walker where to inherit it's parent and id values
    var $db_fields = array(
        'parent' => 'menu_item_parent', 
        'id'     => 'db_id' 
    );

    /**
     * At the start of each element, output a <li> and <a> tag structure.
     * 
     * Note: Menu objects include url and title properties, so we will use those.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
            $item->url,
            ( $item->object_id === get_the_ID() ) ? ' class="sliding-middle-out current"' : ' class="sliding-middle-out"',
            $item->title
        );
    }

}?>

然后将 walker 类添加到您的菜单调用中：

<?php
$args = array(
    'theme_location' => 'primary',
    'walker' => new Walker_Menu
);
wp_nav_menu( $args );
?>