为什么我的bootstrap导航菜单没有正确显示

时间:2018-03-28 20:12:20

标签: wordpress wordpress-theming bootstrap-grid

我正在尝试创建一个wordpress主题,但我从导航带导航栏中遇到这个问题“目前我只想显示导航栏而不将其转换为wordpress我的意思是我希望它现在静态不动态”< / p>

这是它在浏览器中的显示方式 appear in the browser

这是我的header.php代码

<!DOCTYPE html>
<html <?php language_attributes(); ?> >
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" >
    <title><?php bloginfo( 'name' ); ?></title>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"
    <?php wp_head(); ?>
</head>
<body>

        <nav class="navbar navbar-inverse">
        <div class="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="#">Brand</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">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
                </li>
            </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
        </nav>

这是我的functions.php文件

<?php 

/**
 * Add My Custom Styles
 */
function elzero_add_styles(){
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri()."/css/bootstrap.min.css");
    wp_enqueue_style( 'fontawesome-css', get_template_directory_uri()."/css/fontawesome.min.css");
    wp_enqueue_style( 'main-css', get_template_directory_uri()."/css/main.css");

}

/**
 * Add My Custom Scripts
 */
function elzero_add_scripts(){
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url().'/js/jquery/jquery.js', array(),false,true);
    wp_enqueue_script( 'jquery');
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'),false, true );
    wp_enqueue_script( 'main-js', get_template_directory_uri().'/js/main.js', array(),false, true );
    wp_enqueue_script( 'htmlshiv', get_template_directory_uri().'/js/htmlshiv.js');
    wp_script_add_data( 'htmlshiv','conditional', 'lt IE 9' );
    wp_enqueue_script( 'respond', get_template_directory_uri().'/js/respond.js');
    wp_script_add_data( 'respond','conditional', 'lt IE 9' );

}
/**
 * Add Actions
 */

add_action('wp_enqueue_scripts','elzero_add_styles');
add_action('wp_enqueue_scripts','elzero_add_scripts');
add_action( 'init','elzero_add_menu' );


/**
 * Add MENUS
 */
function elzero_add_menu(){

}



?>

这是页面源代码

<!DOCTYPE html>
<html lang="en-US" >
<head>
    <meta charset="UTF-8" >
    <title>Elzero</title>
    <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php"
    <meta name='robots' content='noindex,follow' />
<link rel='dns-prefetch' href='//s.w.org' />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.4"}};
            !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel='stylesheet' id='bootstrap-css-css'  href='http://localhost/wordpress/wp-content/themes/elzero/css/bootstrap.min.css?ver=4.9.4' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css-css'  href='http://localhost/wordpress/wp-content/themes/elzero/css/fontawesome.min.css?ver=4.9.4' type='text/css' media='all' />
<link rel='stylesheet' id='main-css-css'  href='http://localhost/wordpress/wp-content/themes/elzero/css/main.css?ver=4.9.4' type='text/css' media='all' />
<!--[if lt IE 9]>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/htmlshiv.js?ver=4.9.4'></script>
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/respond.js?ver=4.9.4'></script>
<![endif]-->
<link rel='https://api.w.org/' href='http://localhost/wordpress/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.9.4" />
</head>
<body>

        <nav class="navbar navbar-inverse">
        <div class="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="#">Brand</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">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
                </li>
            </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
        </nav>




    <div class="footer text-center">
        Copy Rights &copy; Reserved 2018
    </div>
    <script type='text/javascript' src='http://localhost/wordpress/wp-includes//js/jquery/jquery.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/bootstrap.min.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/elzero/js/main.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/wp-embed.min.js?ver=4.9.4'></script>
    </body>
</html>

0 个答案:

没有答案