ワードプレスで CSS & JS 読み込み

Category
Published
Updated
  • functions.php で読み込み設定する
  • 特定ページの読み込みなど条件分岐も使用できる
  • JS は body 直前での読み込みの指定もできる

ref

参考

●CSS：wp_enqueue_style
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・wp_enqueue_style(登録名, パス,　$deps , バージョン番号（クエリ文字）, media属性);
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
●JavaScript：wp_enqueue_script（紛らわしいのですが、上記で説明しているwp_enqueue_scriptsとは違い『s』がありません。）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・wp_enqueue_script(登録名, パス,　$deps , バージョン番号（クエリ文字）, footer直下で読み込むか);
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
第一引数（登録名）、第二引数（ファイルパス）は必須となり、他は任意の項目なので省略しても問題なく動作します。
第三引数に書かれている$depsは依存するファイル、そのCSS・JavaScripより前に読み込まれる必要があるファイルを指定します。
第四引数はバージョン番号で、未入力の場合はWordpressのバージョン番号が表示されます。
第五引数のみは役割が違い、wp_enqueue_styleの場合はmedia属性、wp_enqueue_scriptはfooter直下（/bodyの前）で読み込むかを記述する場所になります。

CSSの読み込みはどこに書く？WordPress公式マニュアルに書かれている正しい手順。 - BtoBクリエイターズTIPS｜株式会社アドミューズ

// CSS 読み込み ////////////////////////////////////
function loading_css() {
    wp_enqueue_style('style',get_template_directory_uri().'/style.css' );
}
add_action('wp_enqueue_scripts', 'loading_css');

// JS 読み込み ////////////////////////////////////
function loading_js() {
    wp_enqueue_script('modal', get_template_directory_uri().'/js/modal.js');
    wp_enqueue_script('pagetop', get_template_directory_uri().'/js/pagetop.js');
  wp_enqueue_script('main', get_template_directory_uri().'/js/main.js', array( 'jquery' ), '', true);   
}
add_action('wp_enqueue_scripts', 'loading_js');

不要な CSS の読み込みを停止する

// 不要なCSSの読み込み停止 ////////////////////////////////////
function remove_unuse_css() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('classic-theme-styles');
}
add_action( 'wp_enqueue_scripts', 'remove_unuse_css' ,9999);