私はStackOverFlowコミュニティに新規です。これが正しい方法だと願っています!私はすでに同じ話題の答えを見ましたが、私は遭遇する問題を理解できませんでした。Bootstrap Static Top Navbarが正しく動作しません。
私はスクリプトを読み込むためにfunctions.phpを使用してWordpressページで作業します。私は'static top navbar' Bootstrap menuをインストールしようとしていますが、それは正しく表示さdoesntの:ナビゲーションバーはそのままに、ウィッヒドロップダウン「MENU1のclicクリックボタンでのみ「ホーム」ボタンを示し
<!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>
"、" menu2 "、および" menu3 "を選択します。これは、提示されている通りに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');
は、私は本当にあなたの助けをいただければ幸いです!
ブートストラップライブラリリファレンスがありません –
あなたの答えはVindhyachal Kumarありがとうございます。 Boostrapライブラリがどこにあるのか知っていますか、どこにコードを追加すればいいですか? – Lolo
内部のヘッドタグ。例:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h –