如何为这段导航菜单整理wordpress?

时间:2016-11-16 09:10:40

标签: wordpress wordpress-theming

这是导航菜单的Html标题代码。我想为我的wordpress主题整理这个Html格式。我有一个intregated徽标,但现在我被困在Nav菜单中。我希望将导航菜单与下拉子菜单集成,并使用与导航菜单中的标签相同的类

<header class="header" data-spy="affix" data-offset-top="1">
      <nav class="navbar">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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="index.php"><img src="assets/img/logo.png" alt="Cardiff + PAGE Group"></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="index.php">Home</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About You <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Create Profile <span class="linkedin-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> </a></li>
                  <li><a href="#">Portal</a></li>
                </ul>
              </li>
              <li><a href="our-clients.php">Our Clients  </a></li>
              <li><a href="opportunity.php">Opportunities </a></li>

              <li class="dropdown">
                <a href="aboutc+pg.php" class="dropdown-toggle"  data-hover="dropdown" >About C+PG <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="contact.php">Contact Us</a></li>
                  <li><a href="blog.php">Blog</a></li>
                  <li><a href="career.php">Career Advice</a></li>
                  <li><a href="interview-tips.php">Interviewing Tips</a></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle"  data-hover="dropdown" >Strategic Partner <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="http://www.teamstub.com/" target="_blank">TeamStub</a></li>
                  <li><a href="http://www.brokeragenation.com/" target="_blank">Brokerage Nation</a></li>
                  <li><a href="#" target="_blank">Widget Credit</a></li>
                  <li><a href="http://www.ptsconsulting.com/" target="_blank">PTS Consulting</a></li>
                  <li><a href="https://www.upwardlyglobal.org" target="_blank">Upwardly Global</a></li>
                </ul>
              </li>

            </ul>
          </div><!--/.navbar-collapse -->
        </div>
      </nav>
    </header> <!-- end / header -->

1 个答案:

答案 0 :(得分:0)

步骤:1 - 要添加自定义导航菜单,您需要做的第一件事就是通过将此代码添加到主题的functions.php文件来注册新的导航菜单。

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

步骤:2 - 我们需要在您的WordPress主题中显示新的导航菜单。

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

主题位置是我们在上一步中选择的名称。

步骤:3 - 创建自定义样式并使用wp_enqueue_style或创建子主题进行附加以覆盖功能。

需要参考检查: http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/