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

【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）
/**
 * 子テーマでのファイルの読み込み
 */
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>終了タグの前に配置される。
/**
 * 子テーマでのファイルの読み込み
 */
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);