質問: wordpressにブートストラップを含めるための最良の方法 私はlaravel背景から来ていて、laravelでbootstrapを使うのは比較的簡単です。しかし、私はwordpressで作業してきたプロジェクトがあり、ナビゲーションバーにbootstrapを使用しています。問題は、彼らがページの私のヘッダをめちゃくちゃにしているということです。私が使っているテーマはbe themeです。これは私のコードです:<!doctype html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="tabbable"> <div class="panel panel-default"> <div class="panel-body"> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;"> <form action="" method="get" name="" style="color: black;" class="form-inline"> <br> <br> <input type="submit" name="submit" class="btn btn-default" style="background-color: red;"> </form> <table> </table> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> <div class="tab-pane " id="id" role="tabpanel" style=";"> </div> </div> </div> </div> </div> </div> </body> </html> 前の質問 で得た助けのおかげで、私はこのコードを使ってテンプレートページを作成しました。wpテーマとそのヘッダを混乱させずにブートストラップを使用するにはどうすればよいですか?編集:これは私のfunctions.phpがどのように見えるかです。add_action( 'wp_enqueue_scripts', 'mfnch_enqueue_styles', 101 ); function mfnch_enqueue_styles() { // enqueue the parent stylesheet // wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' ); //we don't need this if it's empty // enqueue the parent rtl stylesheet if ( is_rtl() ) { wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' ); } // enqueue the child stylesheet wp_dequeue_style( 'style' ); wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' ); } この関数を編集してbootstrap ^を含めるにはどうすればよいですか?私は自分で試しましたが、レンダリングできません。前もって感謝します!
回答: functions.phpの次の機能によってワードプレスのブートストラップを加えることができますcdnを持っていれば、必要に応じてurlを変更できます。<?php /** * enqueue scripts and styles */ function your_theme_enqueue_scripts() { // all styles wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 ); wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.css', array(), 20141119 ); // all scripts wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true ); wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true ); } add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );