web-dev-qa-db-ja.com

BootstrapとJQuery Javascriptを正しく追加する方法

私は、Bootstrap 4とそれ自身のコードを使ったMaterialの変種であるMaterial Bootstrap Design（MDB）を使ってWordPressテーマを開発しています。

以下のスクリプトを使用して を要求します。

<!-- JQuery -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="/wp-content/themes/blankslate/mdb/js/mdb.min.js"></script>

これらを単にfooter.phpの最後に追加しました。しかし今、私はJavascriptをWordPressに正しく追加する必要があることを読みました。つまり、エンキューします。

これまでのところ、私はこれを使用しています...

// Add Javascripts for my Bootstrap theme
function bootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_enqueue_script( 'bootstra-jquery', get_stylesheet_directory_uri() . '/mdb/js/jquery-2.2.3.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-jquery-min', get_stylesheet_directory_uri() . '/mdb/js/jquery.min.js' );
    wp_enqueue_script( 'bootstrap', get_stylesheet_directory_uri() . '/mdb/js/bootstrap.min.js' );
    wp_enqueue_script( 'bootstrap-material', get_stylesheet_directory_uri() . '/mdb/js/mdb.min.js' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_with_jquery' );
// http://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress

これは、ある程度うまくいきます - 私の4行がコードに追加されます（ただし、この方法で変更しても効果があるかどうかはわかりません）。

しかし、私は私が追加しなかった私のヘッダーに2つの残りの/デフォルトのJS行も表示されます...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery-2.2.3.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/jquery.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/bootstrap.min.js?ver=4.6.1'></script>
<script type='text/javascript' src='http://www.example.com/wp-content/themes/blankslate/mdb/js/mdb.min.js?ver=4.6.1'></script>

私はそれを追加しなかったけれども、私はまだフッターの中にこの行を見ています（私はこれを残したいと思います、そうですか？）...

<script type='text/javascript' src='http://www.example.com/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>

それで、主な質問は、私のテーマがそれらを要求しないとき、WordPressがjquery.js?ver=1.12.4とjquery-migrate.min.js?ver=1.4.1を含むという事実にどう対処するべきかということです。ここで矛盾はありますか？ WordPress自身のJQueryがバージョン番号を渡すことによって提供されている場合、私のテーマの要求どおりにv2.2.3を使用するよう強制することは可能ですか？そして、この「移行」バージョンはどうでしょうか。

私はあなたがスクリプトをデキューできることを知っています、そしてあなたができることを読んだことができます フィルタを使用してカスタムバージョンを強制するまたは同様の 。しかし、私はあなたがWordPressのデフォルトバージョンのJQueryを削除することに煩わされるべきではないことも読んだ。

私は混乱しています。

そしてCSSをエンキューする必要がありますか？

jqueryjavascriptwp-enqueue-scripttwitter-bootstrapscripts
2
Robert Andrews

プラグインとテーマが想定しているため、WordPressはjQueryをロードします。テーマに別のバージョンのjQueryが必要な場合、使用するプラグインが機能しないように設計されているため、使用しているプラ​​グインが機能しないリスクがあります デフォルトのjqueryで .

ただし、独自のバージョンのjQueryの使用を主張する場合は、簡単に登録解除できることがわかりました。テーマの公開リリースを計画していない場合は、結果を制御できます。

そして、はい、あなたは enqueue styles もすべきです。これを行う理由は、依存関係を設定できることです。これは、（たとえば）子テーマを作成して親スタイルを登録解除する場合に重要です。

1
cjbj

多分これはWordPressの質問のそれほど多くない。しかし私が見た限りでは、Bootstrap 4はjQuery 1.2.0で動作します。テスト済みのSimon Padburys Bootstrap 4 Starterテーマ WordPressをオンボード（事前登録済み）のjQueryにエンキューするWordPress用。

https://github.com/SimonPadbury/b4st/blob/master/functions/enqueues.php

0
Jesper Nilsson