如何使用WordPress菜单编辑Bootstrap导航栏的品牌

时间:2014-08-24 18:21:51

标签: php wordpress twitter-bootstrap

我使用WordPress-Bootstrap nav walker创建了一个带有WordPress自定义主题的Bootstrap导航栏。

这是WordPress菜单代码:

<?php
    wp_nav_menu( array(
            'menu'              => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
             'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

我想要做的是编辑品牌&#39;引导导航栏的一部分,因此源代码输出将包含导航栏上品牌链接的以下内容:

<a href="index.php"><img class="navbar-brand" src="logo.png"></a>

目前它有默认的Bootstrap&#39;品牌&#39;文本。如何使用上面的WordPress代码编辑它?

1 个答案:

答案 0 :(得分:0)

非常简单:

<a class="navbar-brand" href="<?php bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>

navbar-brand类用于A元素,而不是链接。此外,这个元素在navbar-walker之外。例如,要在上下文中查看它:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="<?php bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
            </div>


            <?php
            wp_nav_menu( array(
                    'menu'              => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'navbar-collapse collapse',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
          </div><!-- /.container-fluid -->
        </nav>

(请注意,此代码是我所做网站的一个快速示例,您可以根据自己的需要进行修改,因为我不知道您的整个代码)