css - Wordpress 主题 - 如何设置菜单样式？

Question

我是 Wordpress 主题开发的新手，我找不到如何正确设计我的导航菜单的样式。

这是我的原始 html 代码:

    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <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">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="post.html">Sample Post</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

我应该怎么做才能从上面的代码中得到所有的类和结构？我尝试使用 wp_nav_menu( array('container_class' => 'navbar navbar-default navbar-custom navbar-fixed-top') ); ，但它不是那样工作的。

Answer 1

您要做的是创建一个自定义步行器类:

https://codex.wordpress.org/Class_Reference/Walker

或使用 wp_get_nav_menu_items 循环浏览导航元素:

https://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items

不知道你有多少PHP编程经验，但是这两种方法都会涉及到。我认为，您最简单的选择是使用 wp_get_nav_menu_items 并从那里开始。

尝试一下，如果遇到问题请告诉我。如果这样做，请展示您尝试过的代码，我很乐意帮助您重新审视该问题!