WordPressサイトでJavaScriptファイルを読み込む方法

wordpress, php WordPress

JavaScriptで書いたプログラムも短いものであれば、表示するHTMLに<script>タグを挿入してプログラムを書き込めば実行できるので、これでJavaScriptを動かしている人も多いかと思います。でもプログラムの量が多くなると、別のファイルを作成して整理したいですよね。その場合はページが表示されるときにファイルを読み込むように<script>タグを記述する必要があります。WordPressではそんなJavaScriptファイルの読み込みを指定することができます。

もちろん、WordPressの機能を使わずにheader.phpやfooter.phpなどのテンプレートを直接修正して、<head>内や</body>直前にJavaScriptファイルの読み込みを指定する<script>タグを記述しても読み込んで機能しますが、ここではWordPressの機能を使った方法を説明します。

テーマもしくはプラグインを修正

どんなときもWordPressで作成しているサイトをカスタマイズする時はテーマかプラグインを使います。JavaScriptでプログラミングしたファイルの読み込みも例外ではなくテーマかプラグインから読み込みます。

そして、いずれの場合も以下のアクションフックを使って、JavaScriptファイルを読み込みます。JavaScriptファイルは修正するテーマかプラグインのフォルダにアップロードします。

・テーマの場合

例）wordpress/wp-content/themes/sample-theme（ここにJavaScriptファイルをコピー）

サブフォルダを作成してもよいです。

・プラグインの場合

例）wordpress/wp-content/plugins/sample-plugin（ここにJavaScriptファイルをコピー）

サブフォルダを作成してもよいです。

テーマのfunction.phpに記述する場合

テーマの場合は以下のコードをfunction.phpに記述します。

function hogehoge_scripts() {

  wp_enqueue_script( 'hogehoge-script', get_template_directory_uri().'/js/sample.js' , array(), date('U'));

}

add_action( 'wp_enqueue_scripts', 'hogehoge_scripts' );

wp_enqueue_script関数説明

第１引数：

スクリプトのハンドル名。どんな名前でもOK。

第２引数：

JavaScriptファイルの場所。「get_template_directory_uri()」は親テーマのときに使用します。子テーマに書く場合はこれを「get_stylesheet_directory_uri()」にします。続いてパスとファイル名を記述します。

例）修正するテーマフォルダの下にjsサブフォルダを作成してsample.jsファイルをコピーした場合

wp_enqueue_script( 'hogehoge-script', get_template_directory_uri().'/js/sample.js' , array(), date('U'));

となります。

第３引数：

デフォルトのarray()でOK。もしjQueryを使うJSの場合はarray( ‘jquery’ )を記述。

第４引数：

JavaScriptファイルのバージョン番号。上記の例は常に確実に読み込んでもらうために日時を入れています。

＊もしこのスクリプトの読み込みを</body>の手前に配置したい場合は、第５引数に「true」を追加してください。第５引数を省略するとfalseとなって<head>タグ内に配置されます。

＊第３、第４、第５引数は省略可能

プラグインで記述する場合

プラグインの場合はソースファイルに以下のコードを記述します。

function plugin_hogehoge_scrips() {

  wp_enqueue_style( 'plugin-hogehoge-script', plugins_url( '/js/sample.js', __FILE__ ), array(), date('U') );

}

add_action( 'wp_enqueue_scripts', 'plugin_hogehoge_scripts' );

アクションフックとwp_enqueue_style()関数もテーマの場合と同じですが、.jsファイルの場所指定はプラグインの場合plugins_url()関数を使います。

wp_enqueue_script関数の説明（WordPress Codex日本語版URL）

まとめ

これでテーマとプラグインのどちらでもJavaScriptファイルは読み込めますが、メンテナンス性を考えると、利用している子テーマで修正するほうがいいかもしれません。（独自にテーマを作ってるのであれば親テーマでもいいです）

というのは、テーマは子テーマを使ってカスタマイズできるので、元の親テーマが変更されても影響を受けません。プラグインの場合は、この処理を実装するためにプラグインのソースファイルを直接修正する必要があります。もしくは、この機能のためのプラグインを作成する必要があります。プラグインの作成は.phpファイルにプラグインを宣言するコメント行を入れるだけなので簡単なのですが、作成したあとの運用と管理がちょっとめんどくさいような気がします。

ただ、プラグインだと有効や無効の切り替えがすぐできるので、もしそういったことをしたいのであれば、こういった処理を集めただけのプラグインを作るのも良いのかもしれません。

タイトルとURLをコピーしました