CSS、JSをWPで読み込ませる場合ヘッダーなどに
|
1 2 3 |
<header> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css”> </header> |
などと入力しても動作するのですがWPではFunctionないで一括で管理することが推奨されています。
しかし、テーマの中でjQueryやCSSのモジュールを読み込んでいる場合は、二重に読み込んでしまう可能性があります。
これを解決するために
wp_enqueue_styleとwp_enqueue_scriptが用意されています。
Header.phpにあるjsやcssをごっそり削除します。
そしてfunction.phpに移動します。
Cssの場合は
|
1 |
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/scss/bootstrap.min.css' ); |
Jsの場合は
|
1 |
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/jquery-3.2.1.min.js’); |
この通り。
jQueryも読み込ませることになると思います。
その場合はWordPress同梱のjQueryを読み込ませないようにします。
|
1 2 |
wp_deregister_script( 'jquery' );//同梱のjQueryを向こうにする。 wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', array(), ‘3.2.1', false );//CDNで読み込ませる |
とすればいいでしょう。
メインとなるCSSは以下のように簡略化して読み込ませます。
|
1 |
wp_enqueue_style( 'main-style', get_stylesheet_uri() );//メインのスタイルを読み込ませる。 |