1

Bootstrap で Wordpress ドロップダウン メニューを使用しています ( http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/ )。これをWordpressのテーマに追加しました。

wp_nav_menu の div を閉じる前に、ソーシャル共有アイコン div をコードに追加する必要があります。そうしないと、navbar-right div がダウンします。これを wp_nav_menu に追加するにはどうすればよいですか? 他にも何か追加したい場合はどうすればいいですか？たとえば、wp_nav_menu が作成した div が閉じる前に「Hello」を追加したい場合、どうすればよいですか?

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

        <div class="navbar-right">
                <button type="button" class="btn btn-twitter navbar-btn"><i class="icon-twitter"></i></button>
                <button type="button" class="btn btn-facebook navbar-btn"><i class="icon-facebook"></i></button>
                <button               type="button" class="btn btn-foursquare navbar-btn"><i class="icon-foursquare"></i></button>
        </div>
4

1 に答える 1

0

I see the tutorial you listed is using my walker class which should make this pretty easy. The best thing to do is set the wp_nav_menu() container to false and manually wrap the menu. I would probably add the social section as a separate wp_nav_menu() so it's not hardcoded into the theme.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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'); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php
                wp_nav_menu( array(
                    'menu'       => 'primary_menu',
                    'theme_location' => 'primary_menu',
                    'depth'      => 2,
                    'container'  => false,
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );

                wp_nav_menu( array(
                    'menu'       => 'social_menu',
                    'theme_location' => 'social_menu',
                    'depth'      => 2,
                    'container'  => false,
                    'menu_class' => 'nav navbar-nav navbar-right',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
            ?>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
于 2014-02-24T17:27:10.753 に答える