【SnowMonkey】My-Snow-Monkey使用例、子テーマによるカスタマイズ

table of contents

CSS、JSファイルの読み込み

my-snow-monkey.phpで下記コード記載

// ------------------------------------------------
// CSS、JSファイルの読み込み
// ------------------------------------------------
add_action(
	'wp_enqueue_scripts',function() {

		// scrollHint
		wp_enqueue_style('scroll-hint-css', 'https://unpkg.com/scroll-hint@latest/css/scroll-hint.css', [ Framework\Helper::get_main_style_handle() ]);

		// slick
		wp_enqueue_style('slick-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css', [ Framework\Helper::get_main_style_handle() ]);
		wp_enqueue_style('slick-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css', [ Framework\Helper::get_main_style_handle() ]);

		// style.css
		wp_enqueue_style( 'msm-css', MY_SNOW_MONKEY_URL . '/assets/css/style.css', [ Framework\Helper::get_main_style_handle() ],  filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/style.css' ));

		// scrollHint
	 	wp_enqueue_script( 'scroll-hint-js', 'https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js', array( 'jquery' ), false);

		// slick
		wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array( 'jquery' ), false);

		// script.js
		wp_enqueue_script( 'msm_scripts', MY_SNOW_MONKEY_URL . '/assets/js/script.js', ['jquery'], filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/script.js' ));
	
	}
);

my-snow-monkey
- assets
  - css
    - style.css
  - js
    - script.js
  - img

wp_enqueue_scripts

ユーザーが見るWebページにのみ出力されます。編集画面や管理画面には出力されません。

enqueue … 列に加えるというような意味

MY_SNOW_MONKEY_URL

My Snow Monkeyで用意している定数。

my-snow-monkeyのURL

`wp_enqueue_style()`

WordPressではwp_enqueue_style()関数でファイルを読み込むことが推奨されています。
基本的にフック（wp_enqueue_scripts等）を利用して読み込みます。

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

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

`wp_enqueue_script()`

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

$handle … スタイルのユニークな名前
$src … スタイルシートまでのURL
$deps … 事前に読み込むべきスタイルの名前（$handle）（配列形式）特に必要なければ、array()を記入（初期値はarray()）
$ver … バージョン。falseにしておけばWordPressが自動的にバージョン情報を入れてくれます。初期値はfalse 　　　　
※原因はわかりませんが、falseでなくてfilemtime( MY_SNOW_MONKEY_PATH . ‘/xx/xx.js’ )を記載しないと動かない場合あり
$in_footer … スクリプトの読み込み位置（trueで/body前、falseで/head前）

【注意点】jQuery $を参照する方法

WordPressのjQueryを使う際、エラーを防ぐため下記のように変更する必要があります。

// 方法1
(function($) {
　// $()を使用可能
})(jQuery);

// 方法2
jQuery(function( $ ) {
  〜
} );