如何将 wordpress 标题导航按版本 Php 文件并排分开？

Posted 2023-03-06

【中文标题】如何将 wordpress 标题导航按版本 Php 文件并排分开？

【英文标题】：How to seperate wordpress header navigation into side to side by edition Php files?

【发布时间】：2015-09-02 03:14:44

【问题描述】：

我想将我的 WordPress 菜单导航分为左右两个，我已将菜单功能放入从后端添加菜单的“functions.php”中，前端将由“header.php”编辑，但我无法检索结果，有人可以帮我吗？

我的函数.php：

register_nav_menus( array(
'primary' => __( 'Primary Menu', 'unite' ),
'footer-links' => __( 'Footer Links', 'unite' ), 
'secondary' => __( 'Secondary Menu','unite' )// secondary nav in footer
    ) );

我的 header.php：

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</div>
<?php
wp_nav_menu( array(
'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())
                    );

wp_nav_menu( array(
'theme_location'    => 'secondary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'collapse navbar-collapse navbar-ex2-collapse',
'menu_class'        => 'nav navbar-nav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
                    );
?>
</div>
</nav><!-- .site-navigation -->

我的后台设置：-

我的布局现在的样子：-

我希望二级菜单就在主菜单旁边：-

【问题讨论】：

float: right 退出按钮

阅读引导导航栏文档，它告诉您如何在导航栏中设置左右对齐的导航：getbootstrap.com/components/#navbar

【参考方案1】：

试试这个并把css

.fullWidth
    width : 100%;
    margin : 0 auto;


.leftClass
    width : 75%;
    float : left;


.rightClass
    width : 25%;
    float : right;

在div标签中添加类

 <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <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>
                </div>

             <div class="fullWidth">

               <div class="leftClass">
                <?php
                    wp_nav_menu( array(
                        '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> <!-- end leftClass -->

                <div class="rightClass">
                   <?php wp_nav_menu( array(
                        'theme_location'    => 'secondary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse navbar-ex2-collapse',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
              </div><!-- end rightClass -->
              <div style="clear:both;"></div><!-- clear both left and right -->
             </div><!-- end fullWidth -->
            </div>



        </nav><!-- .site-navigation -->

【讨论】：

很棒的兄弟，谢谢！无论如何，我认为您的工作正常，如果我希望右侧菜单向右移动更多，我只需更改类的宽度，对吗？还有一个问题，如果我想把分隔符放在左边，你知道怎么做吗？

谢谢兄弟，你把分隔符放在左边，见步骤 1) .fullWidthwidth : 100%;边距：0自动；背景颜色：#ccc; 步骤 2）.leftClass 宽度：60%;向左飘浮;背景颜色：#fff; 步骤 3 ) .rightClass 宽度：35%;浮动：对； background-color:#fff; 左侧 60% 宽度和右侧 35% 宽度总共 95% 宽度，因此 5% 宽度是左侧的分隔符。

【参考方案2】：

很简单

将以下代码放在您放置这些菜单的标题中

<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</div>

<div class="topmenu"> 
<div class="top-menu-left"> 

<?php
wp_nav_menu( array(
'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><!--left menu end-->
<div class="top-menu-right"> 

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

</div><!--right menu end-->
</div><!--menu wrap-->

</div>
</nav><!-- .site-navigation -->

然后把下面的代码放到你的themes/themename/style.css

.topmenuwidth: 1000px;margin: 0 auto;padding-bottom: 28px;
.top-menu-leftfloat:left;margin-left: 20px;width:70%;
.top-menu-rightfloat:right;margin-right: 20px;width:28%;

【讨论】：

你忘了给两个菜单一个宽度... .top-menu-leftfloat:left;margin-left: 20px;width:70%; .top-menu-rightfloat :right;margin-right: 20px;width:28%;