【WordPress】子テーマによるカスタマイズ（CSSとJSの読み込み）

CSSファイルの読み込み

CSSファイルの読み込みは子テーマのfunctions.phpに「wp_enqueue_style()」関数を記述します

wp_enqueue_style( $handle, $src, $deps, $ver, $media )

• $handle … スタイルのユニークな名前。
• $src … スタイルシートまでのURL
• $deps … 事前に読み込むべきスタイルの名前（$handle）（配列形式）特に必要なければ、array()を記入（初期値はarray()）
• $ver … 最新のバージョンを読み込ませる（初期値はfalse）
  ※ブラウザキャッシュ対策で有効です
• $media … media属性 （初期値はall）

funtions.php

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {
	wp_enqueue_style('child_style', get_stylesheet_directory_uri() .'/style.css', [], date("ymdHis", filemtime( get_stylesheet_directory() .'/assets/css/style.css')));
	wp_enqueue_style('my-child_style', get_stylesheet_directory_uri() .'/assets/css/style.css', array('child_style'), date("ymdHis", filemtime( get_stylesheet_directory() .'/assets/css/style.css')));

});

jsファイルの読み込み

jsファイルの読み込みは子テーマのfunctions.phpに「wp_enqueue_script()」関数を記述します

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

• $handle … スタイルのユニークな名前。
• $src … スタイルシートまでのURL
• $deps … 事前に読み込むべきスタイルの名前（$handle）（配列形式）
• $ver … バージョン。falseにしておけばWordPressが自動的にバージョン情報を入れてくれます。初期値はfalse
  ※ブラウザキャッシュ対策で有効です
  ※「Snow Monkey」にて原因はわかりませんが、falseでなくてfilemtime( MY_SNOW_MONKEY_PATH . ‘/js/script.js’ )を記載しないと動かない場合あり
  $in_footer … trueの場合</body>終了タグの前に配置される。

funtions.php

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {
	wp_enqueue_script('my-child-js', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery' ), date("ymdHis", filemtime( get_stylesheet_directory() .'/assets/js/script.js')));
}, 11);