サイトに配置されているパーツなどの動きをつけたい場合、処理を実装したJavaScriptを読み込むことで実現できます。

今回は、WordPressでJavaScriptを読み込む方法を解説したいと思います。

jsファイルの用意

まずは、テーマフォルダ直下にjsファイルを用意しましょう(子テーマが準備されている場合はそちらに配置します)。

今回は、jQueryを利用した簡単な処理を記述しておきます。

test.js

jQuery(function($) {
	// h1タグの内容をクリックすると非表示になります。
	$('h1').click(function () {
		$(this).hide();
		return false;
	});
})

読み込み処理

WordPressで用意されているwp_enqueue_script関数を利用してスクリプトファイルのリンクを定義します。

この関数を、wp_enqueue_scripts関数にフックして使用します。

このフック用の関数は、CSSファイルやスクリプトファイルを読み込む処理を記述します。

関数をフックする際は、add_action関数を利用します。

functions.php

function my_wp_enqueue_styles() {
	wp_enqueue_script(
		'test-script',
		get_theme_file_uri(test.js),
		array(),
		false,
		true
	);
}
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_styles' );

まとめ

WordPressでJavaScriptを読み込む方法について解説しました。

読み込ませたいJavaScriptを用意して、読み込み処理を追加してあげることで簡単にJavaScriptを利用することができました。

JavaScriptを利用するために言語を習得しないといけなくなりますが、色々と役に立つので覚える価値はあるかと思います。

更新日 : 2019年6月20日

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA