[Sayoko Miura]

このテーマで、jQuery、またはjQueryのプラグインを使う方法を教えてください。
「functions.php で jQuery のプラグインを読み込んで使う」と良いと伺ったのですが、
functions.phpの記述方法が分かりません。
よろしくお願いします。

♥ 0

Who liked: No user

[キタジマ タカシ]

子テーマの準備

Snow Monkey 自体のコードを変更してしまうとアップデート時に変更がリセットされてしまう（最新の Snow Monkey で上書きされてしまう）ため、Snow Monkey の子テーマを用意し、その子テーマの functions.php で jQuery プラグインを追加することになります。

子テーマの準備については、下記のページをご参照ください。

子テーマのつくり方

子テーマとは あなたが Snow Monkey のデザインやレイアウトを変更したいと思ったとき、CSS の追加…

snow-monkey.2inc.org

子テーマはいくつかの作り方がありますが、上記記事内で紹介しているオレインさんが作られた子テーマの雛形を使用するのが簡単かと思います。

Snow Monkey専用のWordPress子テーマテンプレートを公開しました | オレインデザイン

100%GPL WordPressテーマのSnow Monkeyを使っています。 とても優れたテーマなので手を加える必要はほとんどないのですが、ちょっとしたことをしたい場合には以下の２つの…

olein-design.com

jQuery プラグインの読み込み

子テーマの functions.php に次のようなコードを追加してみてください。

add_action( 'wp_enqueue_scripts', function() {
	// 使用する jQuery プラグインを読み込み
	wp_enqueue_script(
		// 半角英数字で任意の名前を設定
		'jquery.smoothscroll',
		// 使用する jQuery プラグインの URL（ローカルでも CDN でも Ok）
		'https://cdn.jsdelivr.net/npm/jquery.smoothscroll@1.0.2/src/jquery.smoothscroll.min.js',
		[ 'jquery' ],
		false,
		true
	);
	
	// jQuery プラグインを実行させるコードを記述するための js ファイル
	wp_enqueue_script(
		get_stylesheet(),
		get_theme_file_uri( '/app.js' ),
		[ get_template() ],
		false,
		true
	);
} );

で、子テーマの直下に app.js というファイルを作成して、jQuery プラグインを実行するコードを追加してください。
wp-content/themes/snow-monkey-child/app.js
※どういうコードを書くかは使用する jQuery プラグインによって異なりますのでここでは省略します。

これで動作すると思いますが、もし動かなかったらブラウザにでている JS のエラーを書き込みください！

♥ 0

Who liked: No user

[Sayoko Miura]

ありがとうございます！
やってみます。

♥ 0

Who liked: No user

[投稿者]

投稿