WordPress主题菜单上的引导导航栏响应不起作用

时间:2017-11-12 作者:Feyt

我正在创建的主题无法正常工作。当我减小屏幕尺寸时,菜单没有塌陷到带有汉堡图标的移动视图中。在Chrome上使用inspect工具时,我可以看到所有的类。

我的尝试:

将代码与我做的练习主题进行比较,结果看起来完全一样https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 和https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 利用样式和功能

Header.php

<!DOCTYPE html>
<head>
    <title></title>


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


<body <?php body_class(); ?>>

   <nav class="navbar navbar-default navbar-fixed-top <?php admin_bar_menu(); ?>">
        <div class="container-fluid menu-container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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 echo esc_url( home_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">

              <?php

                wp_nav_menu(array(

                    \'theme_location\' => \'primary\',
                    \'menu_class\' => \'nav navbar-nav navbar-right\',
                    \'fallback_cb\' => false

                ));

                ?>

            </div>

        </div>
   </nav>

Functions.php

<?php

function winetours_scripts() {

    wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") );
    wp_enqueue_style( "bootstrap", get_template_directory_uri() . "/bootstrap/css/bootstrap.min.css");
    wp_enqueue_style( "winetour-style" , get_stylesheet_uri() );

}

add_action("wp_enqueue_scripts", "winetours_scripts");



    function winetours_setup() {

        register_nav_menus( array(

            "primary" => "Primary Menu", "winetour"

        ));

        //Add theme support for document title tag
        add_theme_support( "title-tag" );
    }





add_action( "after_setup_theme", "winetours_setup");

//Adds the padding to the top of menu for logged in with toolbar
function admin_bar_menu() {

    if ( is_user_logged_in() ){

        $current_user = wp_get_current_user();
        if (user_can( $current_user, \'administrator\' )) {
          echo "admin-nav";
        }


    }
}

2 个回复
最合适的回答,由SO网友:Feyt 整理而成

我发现了错误。谷歌Chrome的检测工具坏了。当查看设备工具栏并检查不同的屏幕大小时,它不起作用。只有在未激活设备工具栏的情况下手动调整窗口大小时,此选项才起作用。

SO网友:Kanon Chowdhury

我也面对过这样的问题。我通过使用解决了这个问题wp-bootstrap-navwalker 或者你可以创造自己click for details

通过将最后一个参数设置为true,将js文件排入页脚。

wp_enqueue_script( "bootstrap-js", get_template_directory_uri() . "/bootstrap/js/bootstrap.min.js", array("jquery") \'here your theme version\', TRUE );
现在检查一下你是否打过电话wp_footer(); 功能位于主题的页脚部分。如果您使用的是wp bootstrap navwalker,则使用流动代码更新您的wp\\u nav\\u菜单功能

<?php
            wp_nav_menu( array(
                \'menu\'              => \'primary\',
                \'theme_location\'    => \'primary\',
                \'depth\'             => 2,
                \'container\'         => \'div\',
                \'container_class\'   => \'collapse navbar-collapse\',
                \'container_id\'      => \'bs-example-navbar-collapse-1\',
                \'menu_class\'        => \'nav navbar-nav\',
                \'fallback_cb\'       => \'WP_Bootstrap_Navwalker::fallback\',
                \'walker\'            => new WP_Bootstrap_Navwalker())
            );
        ?>

结束

相关推荐

Wp_List_Table not responsive

im使用wp_list_table 在我的后端主题上初始化,以显示我保存在数据库中的一些信息,但有很多信息,我想让它响应,根据屏幕大小显示/隐藏一些元素。我以为它会自动发生,就像在显示帖子的表中一样,但事实并非如此。以下是小屏幕中所有帖子的示例这是我在小屏幕上的wp\\u list\\u表我如何在没有黑客的情况下修复这个bug,wordpress core有什么解决方案吗?类似帖子谢谢