WordPressでJavaScriptやStyleSheetファイルを読み込む方法

WordPressで正しく確実にまとめてJavaScriptやStyleSheetファイルを読み込む方法です

JavaScriptやStyleSheetも短いものであれば、表示するHTMLに<script>や<style>タグを挿入して直接内容を書き込んだり、<head>内や</body>直前に.cssや.jsファイルを指定すれば実行できるのでこういった記述をしている人も多いかと思います。

ですがWordPressではそんなスクリプトやスタイルをHTMLに直接記述をしなくても正しく確実に読み込む方法が提供されています。

読み込むファイルが増えたり、ばらばらになりがちな記述をまとめて整理するのに有効かもしれません。

テーマまたはプラグインを修正

WordPressで作成しているサイトをカスタマイズする時の多くは子テーマを使用しているかと思います。

もしくは、自身でテーマやプラグインを作成されている方もいるかと思います。

いずれの場合でも同じ記述方法でスクリプトやスタイルを読み込みます。

読み込みの記述にアクションフックを使います。

基本的には関数の記述は同じですが、テーマを修正するのとプラグインを修正するのとでは若干引数の記述方法が異なるので、それぞれの記述方法を掲載します。

テーマを修正する場合

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

function theme_name_scripts() {
  wp_enqueue_style( 'style-name', get_stylesheet_uri() );
  wp_enqueue_style( 'style-example-name', get_theme_file_uri('css/example.css'), array('style-name') );
  wp_enqueue_script( 'script-name', get_theme_file_uri('js/example.js'), array(), date('U'), true);
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

・wp_enqueue_script関数説明

第１引数：

スクリプトのハンドル名。

第２引数：

スクリプトのURL(.jsファイルの場所)。以前は親テーマの場合に「get_template_directory_uri()」、子テーマの場合は「get_stylesheet_directory_uri()」を使ってURLを指定してましたが、4.7以降は「get_theme_file_uri()」を両テーマで使用できます。

第３引数：

デフォルトのarray()でOK。このスクリプトより前に読み込まれる必要があるスクリプト。

例えばjQueryを使うJSの場合はarray( ‘jquery’ )を記述。

第４引数：

スクリプトのバージョン番号。上記の例は常に確実に読み込んでもらうために日時を入れています。

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

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

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

・wp_enqueue_style関数説明

第１引数：

スタイルのハンドル名。

第２引数：

スタイルのURL(.cssファイルの場所)。以前は親テーマの場合に「get_template_directory_uri()」、子テーマの場合は「get_stylesheet_directory_uri()」を使ってURLを指定してましたが、4.7以降は「get_theme_file_uri()」を両テーマで使用できます。

第３引数：

このスタイルシートより前に読み込まれる必要があるスタイルシート。デフォルトはarray()。上記の例の場合だと前に’style-name’スクリプトを読み込みたい場合はarray( ‘style-name’ )を記述。

第４引数：

スクリプトのバージョン番号。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。スクリプトと同じく日時を入れれば常に確実に読み込む。

第５引数：

スタイルシートが定義されているメディアを指定する文字列。

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

参考：wp_enqueue_style関数の説明（WordPress Codex日本語版URL）

プラグインを修正する場合

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

function plugin_name_scripts() {
  wp_enqueue_style( 'plugin-script', plugins_url( '/css/example.css', __FILE__ ) );
  wp_enqueue_script( 'plugin-script', plugins_url( '/js/example.js', __FILE__ ), array(), date('U'), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_name_scripts' );

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

リンク