SIMCSSとJavaScriptをfunctions.phpで読み込ませる方法を紹介します。
また、CSSやJSを変更した場合にキャッシュをクリアするためにブラウザをスーパーリロードしなくても、変更が反映されるキャッシュ対策も含めて紹介します。
目次
コードの記述例
functions.phpでCSSやJavaScriptを読み込ませるコードの記述例は下記のとおりです。
/*----------------------------------------------------------*/
/* CSSとJavaScriptの読み込み */
/*----------------------------------------------------------*/
function my_script_init()
{
// swiper CSS（CDN）
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css', array(), 'false', 'all');
// font-awesome CSS（CDN）
wp_enqueue_style('font-awesome-css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css', array(), 'false', 'all');
// google fonts CSS（CDN）
wp_enqueue_style('noto-sans-jp-css', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap', array(), 'false', 'all');
// このサイトのCSS
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/style01.min.css', array(), date('YmdGis', filemtime(get_theme_file_path().'/css/style01.min.css')), 'all');
wp_deregister_script('jquery'); /* footerでjQueryを読み込むようにデフォルトのjQueryを削除修正 */
// jqueryのスクリプト（CDN）
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', array(), 'false', true);
// swiperのスクリプト（CDN）
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js', array('jquery'), 'false', true);
// このサイトのスクリプト
wp_enqueue_script('home-js', get_template_directory_uri() . '/js/home-script.min.js', array('jquery'), date('YmdGis',filemtime(get_theme_file_path().'/js/home-script.min.js')), true);
}
add_action('wp_enqueue_scripts', 'my_script_init');WordPress関数の「wp_enqueue_style();」について解説
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_style()は、上記5つまで引数を指定できる。
- $handle：読み込むスタイルシートのハンドル名を記入。この名前は、CSSファイルを判別して重複読み込みを防ぐために使われるので、必ず固有の名称（自分で勝手に命名して良い）にすること！
- $src：読み込むスタイルシートのパス（Googleフォントのhref属性など）
- $deps：先に読み込んでほしいスタイルシートがあれば、そのハンドル名を記入することで依存関係を示せる。依存関係が特に必要なければ、array()を記入。
- $ver：ファイル名の末尾にクエリパラメータとして追加する文字列を記入します。初期値は’false‘。
- $media：linkタグの属性を指定。初期値の’all‘で問題なく使える。
コード解説の補足
- 各行の意味はコメントアウトをご参照下さい。
- 基本的には13行目のCSSへのパスと23行目とJavaScriptへのパスをご自分の環境に合わせて変更すればコピペで実装できます。
- リセットCSS（destyle.css）はFLOCSSで管理している中の一つのCSSファイルとして読み込ませています。
- font-awesomeのCSS（9行目）は必要がなければ削除して下さい。
- google fontsのCSS（11行目）はNoto sans JP用ですので、必要に応じて削除するか変更して下さい。
- swiperのCSS（7行目）とswiperのスクリプト（21行目）は必要なければ削除して下さい。
13行目と16行目のjQueryに関するコードは、WordPressにデフォルトで読み込まれるjQueryの読み込みを禁止し、自分で指定したjQueryをbody閉じタグ直上で読み込ませるためのものです。この設定を変えると高確率でコンソールエラーが発生するのでご注意下さい。
SIMこれらの注意事項に留意すれば、基本function.phpにコピペするだけで実装できます。
キャッシュ対策について
キャッシュ対策をCSSとJavaScriptのパスに施していますので、少し補足説明をしておきます。
関係箇所を抜粋しておきます。上から順にCCSとJavaScriptのコード抜粋です。
date('YmdGis', filemtime(get_theme_file_path().'/css/style01.min.css'))date('YmdGis',filemtime(get_theme_file_path().'/js/home-script.min.js'))コードの捕捉説明
- filemtime(パス)：対象ファイルにタイムスタンプを与える関数です。
- date(‘YmdGis’, filemtime(パス))：対象のファイルが変更された時間を年月日時分秒形式で返す関数です。
SIMこれらの設定を入れておくと、CSSやJSを変更した後にキャッシュをクリアする必要がなくなります。
JavaScriptの読み込みにdefer属性を付与
Javascriptの読み込みにdefer属性を付けると、サイト自体の読み込み速度が少し速くなります。
Javascriptにdefer属性を付与する方法は下記コードfunctions.phpに追記して下さい。
/*----------------------------------------------------------*/
/* JS読み込みにdefer属性を付与 */
/*----------------------------------------------------------*/
add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
if ($handle !== 'スクリプトの識別名') {
return $tag;
}
return str_replace(' src=', ' defer src=', $tag);
}コード解説
- スクリプトの識別名（7行目）：ここに入れるのは上のwp_enqueue_scriptのJavascript読み込みで定義した名称です。
たとえば、下記の場合には「home-js」が識別名です。
wp_enqueue_script('home-js', get_template_directory_uri() . '/js/home-script.min.js', array('jquery'), date('YmdGis',filemtime(get_theme_file_path().'/js/home-script.min.js')), true);つまり、スクリプトの識別名が「home-js」の場合には下記のようになります。
/*----------------------------------------------------------*/
/* JS読み込みにdefer属性を付与 */
/*----------------------------------------------------------*/
add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
if ($handle !== 'home-js') {
return $tag;
}
return str_replace(' src=', ' defer src=', $tag);
}まとめ
以上をすべてまとめると、コードは下記のようになります。
/*----------------------------------------------------------*/
/* CSSとJavaScriptの読み込み */
/*----------------------------------------------------------*/
function my_script_init()
{
// swiper CSS
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css', array(), 'false', 'all');
// font-awesome CSS
wp_enqueue_style('font-awesome-css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css', array(), 'false', 'all');
// google fonts CSS
wp_enqueue_style('noto-sans-jp-css', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap', array(), 'false', 'all');
// このサイトのCSS
wp_enqueue_style('style-name', get_template_directory_uri() . '/css/style01.min.css', array(), date('YmdGis', filemtime(get_theme_file_path() . '/css/style01.min.css')), 'all');
wp_deregister_script('jquery'); /* footerでjQueryを読み込むようにデフォルトのjQueryを削除修正 */
// jqueryのスクリプト
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', array(), 'false', true);
// swiperのスクリプト
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js', array('jquery'), 'false', true);
// このサイトのスクリプト
wp_enqueue_script('home-js', get_template_directory_uri() . '/js/home-script.min.js', array('jquery'), date('YmdGis', filemtime(get_theme_file_path() . '/js/home-script.min.js')), true);
}
add_action('wp_enqueue_scripts', 'my_script_init');
/*----------------------------------------------------------*/
/* JS読み込みにdefer属性を付与 */
/*----------------------------------------------------------*/
add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
if ($handle !== 'home-js') {
return $tag;
}
return str_replace(' src=', ' defer src=', $tag);
}
