2017-07-18 313 views
0

我是新來的StackOverFlow社區,並希望這是正確的方式問!我已經看到同一主題的答案,但我無法弄清楚我遇到的問題。引導靜態頂部導航欄無法正常工作

我在一個Wordpress頁面上工作,使用functions.php來加載我的腳本。我試圖安裝'static top navbar' Bootstrap menu,但它不正確顯示:

<!DOCTYPE html> 
 
<html <?php language_attributes(); ?>> 
 

 
<head> 
 
\t <meta charset="<?php bloginfo('charset'); ?>"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 

 
<?php wp_head(); ?> 
 

 
</head> 
 

 
<body> 
 

 

 
\t <header> 
 
\t \t 
 

 
\t \t <!-- Static navbar --> 
 
\t \t <nav class="navbar navbar-default navbar-static-top"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
\t \t \t \t \t \t <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <a class="navbar-brand" href="/">Home</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="navbar" class="navbar-collapse collapse"> 
 
\t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t <li class="active"><a href="#">menu 1</a></li> 
 
\t \t \t \t \t \t <li><a href="#">menu 2</a></li> 
 
\t \t \t \t \t \t <li><a href="#">menu 3</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div><!--/.nav-collapse --> 
 
\t \t \t </div> 
 
\t \t </nav> \t \t 
 

 

 
\t </header> 
 

 

 

 

 
\t <div class="container"> 
 
\t \t <div class="jumbotron"> 
 
\t \t \t <h1>Coucou c'est nous</h1> 
 
\t \t </div> \t 
 
\t </div> <!-- /container --> \t 
 

 
\t <section> 
 
\t \t <div class="container"> 
 

 
\t \t \t <div class="m-dw-30"> 
 
\t \t \t \t <div class="col-xs 2"> 
 
\t \t \t \t \t <img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg" 
 
\t \t \t \t \t alt="" class="img-fluid"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-xs-10"> 
 
\t \t \t \t \t <h1>Titre de l'article</h1> 
 
\t \t \t \t \t <p>description de l'article description de l'article description de l'article description de l'article</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> <!-- /m-dw-30 --> \t \t 
 

 
\t \t \t <div class="m-dw-30"> 
 
\t \t \t \t <div class="col-xs 2"> 
 
\t \t \t \t \t <img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg" 
 
\t \t \t \t \t alt="" class="img-fluid"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-xs-10"> 
 
\t \t \t \t \t <h1>Titre de l'article</h1> 
 
\t \t \t \t \t <p>description de l'article description de l'article description de l'article description de l'article</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> <!-- /m-dw-30 --> \t \t 
 

 
\t \t \t <div class="m-dw-30"> 
 
\t \t \t \t <div class="col-xs 2"> 
 
\t \t \t \t \t <img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg" 
 
\t \t \t \t \t alt="" class="img-fluid"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-xs-10"> 
 
\t \t \t \t \t <h1>Titre de l'article</h1> 
 
\t \t \t \t \t <p>description de l'article description de l'article description de l'article description de l'article</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> <!-- /m-dw-30 --> \t \t \t \t 
 

 
\t \t </div><!-- /container --> \t 
 
\t </section> 
 

 

 

 
</body> 
 

 

 

 

 

 

 
<?php wp_footer(); ?> 
 

 
</html>

導航欄只顯示「主頁」按鈕,在其左側,至極下拉列表中選擇「MENU1一個CLIC按鈕「,」菜單2「和」菜單3「。這不是static top navbar應該如所提出的那樣。

這裏是我的功能:

<?php 
 

 
//========================================= 
 
//============ loading scripts ============ 
 
//========================================= 
 

 
define('LGMAC_VERSION', '1.0.2'); 
 

 
// front-end loading 
 
function lgmac_scripts() { 
 

 
\t // styles loading 
 
\t wp_enqueue_style('lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all'); 
 
\t wp_enqueue_style('lgmac_custom', get_template_directory_uri() . '/style.css', array('lgmac_bootstrap-core'), LGMAC_VERSION , 'all'); 
 

 

 
\t // scripts loading 
 
\t wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), LGMAC_VERSION , true); 
 

 
\t wp_enqueue_script('lgmac_admin_script', get_template_directory_uri() . '/js/temporary_gallery.js', array('jquery', 'bootstrap-js'), LGMAC_VERSION , true); 
 

 
} //end function lgmac_scripts 
 

 
add_action('wp_enqueue_scripts', 'lgmac_scripts'); 
 

 

 

 

 

 

 
//========================================= 
 
//============ Utilitaires ============ 
 
//========================================= 
 

 
function lgmac_setup() { 
 

 
\t // thumbnail support 
 
\t add_theme_support('post-thumbnails'); 
 

 
\t // delete version generator 
 
\t remove_action('wp_head', 'wp_generator'); 
 

 
\t // delete french quotation marks 
 
\t remove_filter('the_content', 'wptexturize'); 
 

 
\t // title support 
 
\t add_theme_support('title-tag'); 
 

 
} // end lgmac_setup function 
 

 
add_action('after_setup_theme', 'lgmac_setup');

我將非常感謝您的幫助!

+0

Bootstrap庫引用缺失 –

+0

謝謝Vindhyachal庫馬爾爲您的答案。你知道我在哪裏可以找到Boostrap Library,以及我應該在代碼中添加它的位置嗎? – Lolo

+0

內頭標籤。例如https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h –

回答

1

@Vindhyachal Kumar,謝謝!我認爲這是因爲我在我的functions.php文件中加載了引導程序樣式。它阻止了良好的引導CSS版本。所以,我已經刪除了這條線:

\t wp_enqueue_style('lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all');

我希望它不會對式裝載的影響?