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

Question

I am pretty new to Wordpress theme development and I can't find how to style properly my navigation menu.

Here is my raw html code:

  <!-- 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> 

What should I do in order to get all the classes and structure from the above code? I tried with wp_nav_menu( array('container_class' => 'navbar navbar-default navbar-custom navbar-fixed-top') ); , but it is not working that way.

Answer 1

What you are looking to do is to create a custom walker class:

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

or to cycle through the navigation elements using wp_get_nav_menu_items:

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

I don't know how much PHP programming experience you have, but both methods will be involved. Your easiest bet, I think, would be to use wp_get_nav_menu_items and go from there.

Try it out and let me know if you run into problems. If you do, show the code you've tried and I'll be happy to help revisit the problem!