web-dev-qa-db-ja.com

子テーマにブートストラップをインストールする方法

ブートストラップナビゲーションを子テーマで使用しようとしたときに問題が発生していますが、私の人生では理解できません。

親テーマはReveraです。

これはブートストラップのテーマです。それはbootstrap.min.jsとbootstrap.min.cssファイルを含みます。しかし、使用されているバージョンは古く表示され、私が追加したブートストラップNavbarが機能しないようにしているのではないかと思います。ナビゲーションボタン内に[ナビゲーションの切り替え]が表示されます。

私がやりたいことは、子テーマを使ったブートストラップのアップデート版を使うことです。しかし、私がこれを達成しようとしたすべての方法がうまくいかないようです。子テーマのfunctions.phpには、次のものがあります。

function enqueue_child_theme_styles() {

    wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );    
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

上記のコードは何もしないようです。私はこれを試してトラブルシューティングするためにあらゆる種類のことを試みましたが、何もうまくいかないようです。何が足りないの？

child-themetwitter-bootstrap
1
Digitaldervish

わかりました私は問題がマルチパートであることがわかりました、しかし大部分は新人の間違いでした。

私がchild-themeに含めたブートストラップファイルのパーミッションが正しく設定されていませんでした。エンキューしようとしたときに、403禁止エラーが返されました。親のブートストラップファイルがまだキューに入れられていたので、私はそれを認識しませんでした。このエラーに気付いたのは、親ファイルのスタイルシートの登録を抹消したときです。

私の最後のコード：

function enqueue_child_theme_styles() {

//deregister the parent bootstrap style and script  
wp_deregister_style( 'bootstrap' );
wp_deregister_script( 'bootstrap' );

//enqueue my child theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

//enqueue bootstrap in the child theme 
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
1
Digitaldervish

get_template_directory_uri は常に親テーマのURIを返します。

ドキュメントから：

子テーマが使用されている場合は、親テーマディレクトリのURIが返されます。

おそらくあなたは get_stylesheet_directory_uri が欲しいです。

add_action('wp_enqueue_scripts', 'wpse174502_styles', PHP_INT_MAX);
function wpse174502_styles()
{
    wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
    wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');
}

あなたがエンキューをデバッグしているときはいつでも必ず….

  1. レンダリングされたページのソースを確認してください。あなたが含まれる予定の資産は何ですか？
  2. お使いのブラウザの開発者ツールコンソールを確認してください。エラーはありますか？これらのエラーはあなたの資産に関連していますか？
1
chrisguitarguy