[WordPress]ページテンプレートなどに適切な方法でCSSやJSを読み込む

functions.phpで一元管理する方法もありますが、今回はテンプレートに直接記載する方法です。
全体で利用しない、そのテンプレートだけで読み込む場合、function.phpに追記しない場合などに使い分けます。

コードの利用は自己責任でお願いします。
利用しているテーマやテンプレートによっては正常に動作しない場合があります。

使い方

以下の関数をget_header()より前に記載します。
functions.phpに記載のファイルより前に読み込まれるので、$depsをしっかり設定する必要があります。

CSSを読み込む

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

一例

<?php wp_enqueue_style('sample', get_theme_file_uri('css/sample.css'), array('main-css'), gmdate('YmdHi', filemtime(get_theme_file_path('css/sample.css')))) ?>

JavaScriptを読み込む

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

一例

<?php wp_enqueue_script('sample', get_theme_file_uri('js/sample.js'), array('main-js'), gmdate('YmdHi', filemtime(get_theme_file_path('js/sample.js'))), true); ?>

関数の詳細説明と一元管理の記事はこちら

タイトルとURLをコピーしました