Question

我最初有一个自助css风格的WordPress主页，我已经转换为Foundation css。我原本想开发一些看起来完全像这样的东西：

但我可能不一定需要BLOG |登录白色导航菜单上方青色条上的部分。我以为我可以摆脱top-nav菜单，但我明白了：

我只想要青色的彩色条，里面没有菜单。

这就是我在header.php中所拥有的：

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package UpAbility
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'upability' ); ?></a>

    <!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
    <!-- NAVBAR ====================================================================================== -->
    <div class="top-nav">
      <div class="row">
        <div class="columns large-6 medium-6">
            <ul id="menu-topmenu" class="top-list-right">
              <?php wp_nav_menu( array(

                         'theme_location'       => 'topnav',
                         'container'            => 'nav',
                         'menu_class'           => 'nav navbar-nav navbar-right'

                      ) ); 
               ?>
            </ul>
        </div>
      </div>
    </div>



    <div class="top-bar">
      <div class="top-bar-left">
        <a class="navbar-brand" href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <?php
                wp_nav_menu(array(

                    'theme_location'    => 'primary',
                    'container'         => 'nav',
                    'container_class'   => 'navbar-collapse collapse',
                    'menu_class'        => 'nav navbar-nav navbar-right'
                ));
            ?>
        </ul>
      </div>
    </div>

</header>

    <div id="content" class="site-content">

这是style.css文件的一部分：

/* Top Nav */

.top-nav {
    width: 100%;
    background: #219CD7;
    padding: 0;
    margin: 0;
}

.top-list-right {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    float: right;

    li {
        list-style: none;
        float: left;
        padding: 10px 15px;
        font-size: 13px;
    }

    a {
        color: #ffffff;
    }
}

/* Top Bar */

.top-bar {

}

我没有发布整个内容，因为它是通过underscores.me生成的，所以style.css有300多个loc

Answer 1

使用以下功能列出菜单。通过这种方式，您可以为导航菜单创建自定义的html。

<?php 
     function showMyMenu($menu)
     {
         $navData = wp_get_nav_menu_items($menu); 
?>
    <ul class="nav navbar-nav navbar-right is-hidden">
<?php
         foreach($navData as $k => $v)
         {   
             echo '<li><a class="page-link" href="' . $v->url . '"> ' . $v->title . ' </a></li>';
         }
?>
    </ul>
<?php } ?>

如何在没有导航栏的情况下在基础中创建此功能？

1 个答案: