菜单行为与预期不符

时间:2017-04-11 作者:Daniel

我正在尝试开发一个导航菜单,其中一个菜单位于另一个菜单之上,如下所示:

enter image description here

我不确定问题是否与我的标题编码方式有关。php:

<!-- HEADER ========================================================================================== -->
    <header class="site-header" role="banner">
        <!-- NAVBAR ====================================================================================== -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-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><!-- navbar-header -->

                    <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                    <?php
                        wp_nav_menu(array(

                            \'menu\'      => \'topnav\'
                        ));
                    ?>

                </div><!-- container -->
            </div><!-- navbar -->
        <div class="navbar-wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                            <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="/"><img src="<?php bloginfo(\'stylesheet_directory\'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
                    </div><!-- navbar-header -->

                    <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                    <?php
                        wp_nav_menu(array(

                            \'theme_location\'    => \'primary\',
                            \'container\'         => \'nav\',
                            \'container_class\'   => \'navbar-collapse collapse\',
                            \'menu_class\'        => \'nav navbar-nav navbar-right\'
                        ));
                    ?>

                </div><!-- container -->
            </div><!-- navbar -->
或者如果问题出在我的职能上。php:

<?php
/**
 * UpAbility functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package UpAbility
 */

if ( ! function_exists( \'upability_setup\' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function upability_setup() {
    /*
     * Make theme available for translation.
     * Translations can be filed in the /languages/ directory.
     * If you\'re building a theme based on UpAbility, use a find and replace
     * to change \'upability\' to the name of your theme in all the template files.
     */
    load_theme_textdomain( \'upability\', get_template_directory() . \'/languages\' );

    // Add default posts and comments RSS feed links to head.
    add_theme_support( \'automatic-feed-links\' );

    /*
     * Let WordPress manage the document title.
     * By adding theme support, we declare that this theme does not use a
     * hard-coded <title> tag in the document head, and expect WordPress to
     * provide it for us.
     */
    add_theme_support( \'title-tag\' );

    /*
     * Enable support for Post Thumbnails on posts and pages.
     *
     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
     */
    add_theme_support( \'post-thumbnails\' );

    // This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        \'menu-1\' => esc_html__( \'Primary\', \'upability\' ),
    ) );

    /*
     * Switch default core markup for search form, comment form, and comments
     * to output valid HTML5.
     */
    add_theme_support( \'html5\', array(
        \'search-form\',
        \'comment-form\',
        \'comment-list\',
        \'gallery\',
        \'caption\',
    ) );

    // Set up the WordPress core custom background feature.
    add_theme_support( \'custom-background\', apply_filters( \'upability_custom_background_args\', array(
        \'default-color\' => \'ffffff\',
        \'default-image\' => \'\',
    ) ) );

    // Add theme support for selective refresh for widgets.
    add_theme_support( \'customize-selective-refresh-widgets\' );
}
endif;
add_action( \'after_setup_theme\', \'upability_setup\' );

function upability_register_custom_menu() {
    register_nav_menu(\'topnav\', __(\'Top Nav\'));
}
add_action(\'init\', \'upability_register_custom_menu\');
但看起来不太对劲:

enter image description here

当我的问题似乎没有名字的时候,很难问这个问题。例如,如果我对粘性菜单有问题,那么我只会这么说。但是,尽管导航菜单的类型看起来是一个接一个的,但关于如何在WordPress中开发它的文档却很少。

所以这里有两个问题:1。我希望底部的菜单是默认的,不移动,顶部的带有博客和登录的菜单是反向的,当用户开始滚动时会消失。

当我转到wp admin并为一个导航栏创建菜单时,它会为两个导航栏创建菜单

enter image description here

enter image description here

1 个回复
最合适的回答,由SO网友:frenchy black 整理而成

我要做的第一件事是注册2个菜单,

<?php function register_my_menus() {register_nav_menus(array(\'primary\' => __( \'Primary Menu\' ),\'topnav\' => __( \'Top Nav Menu\' ) ) ); } add_action( \'init\', \'register_my_menus\' ); ?>
第二,在wordpress菜单面板中,我将创建两个菜单,并将每个菜单分配到一个显示位置。第三,我将使用

<!-- HEADER ========================================================================================== -->
<header class="site-header" role="banner">
    <!-- NAVBAR ====================================================================================== -->
    <div 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-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><!-- navbar-header -->

                <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                <?php wp_nav_menu( array( \'theme_location\' => \'topnav\' ) ); ?>

            </div><!-- container -->
        </div><!-- navbar -->
    <div class="navbar-wrapper">
        <div class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
                        <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="/"><img src="<?php bloginfo(\'stylesheet_directory\'); ?>/assets/img/Logo.png" alt="UpAbility"></a>
                </div><!-- navbar-header -->

                <!-- If the menu (WP Admin area) is not set, then the "menu_class" is applied to "container". In other words, it overwrites the "container-class". -->
                <?php
                    wp_nav_menu(array(

                        \'theme_location\'    => \'primary\',
                        \'container\'         => \'nav\',
                        \'container_class\'   => \'navbar-collapse collapse\',
                        \'menu_class\'        => \'nav navbar-nav navbar-right\'
                    ));
                ?>

            </div><!-- container -->
        </div><!-- navbar -->
        </div><!-- navbar-wrapper --></header>