WordPressテーマ制作の作法　正しくCSSとJavaScriptファイルを読み込ませる方法

WordPress

前田大地

2017年01月27日

こんにちは、WordPress歴10年を超えたセブンシックスのダイチです。今回は、WordPressのテーマファイルを制作する上で、正しくCSSやJSファイルを読み込ませる方法について説明します。

先日、別の方が制作したWordPressサイトの不具合を修正する機会がありました。定番メールフォームプラグインであるContact Form 7で、送信後に別のページにリダイレクトするように設定しているが飛ばない。という相談でした。調査したところ、Ajaxが効いておらず、Contact Form 7のJSファイルが正しく読み込まれていないことが分かりました。そして根本的な原因は、テーマファイル内で「jQueryを読み込ませる記述が正しくない」ことにあったのです。

WordPressでは、多くのケースでサードパーティ製のプラグインを導入することになります。プラグインに必要なCSSやJSファイルは、WordPressの作法に従ってwp_headやwp_footerで出力されます。ですから、こちらで作るテーマファイルも、きちんとWordPressの作法を守らなければなりません。

CSSファイルの読み込み

CSSファイルの読み込みには以下のテンプレートタグを使用します。テンプレートタグを記述した位置ではなく、wp_headの位置に読み込み用のHTMLタグが出力されるので注意してくださいね。

テンプレートタグ

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle

読み込むCSSファイルに任意の名前（ハンドル）を付けます。この名前が、このファイルの登録名となり、後述する$depsにて依存関係を指定する際などに用いられます。

$src

読み込むファイルのURL。テーマディレクトリ内のファイルを読み込む際は、URLをべた書きせずに、get_template_directory_uriなどと組み合わせてファイルまでのパスを書きます。

$deps

他のファイルとの依存関係。このファイルよりも「前」に読み込ませたいファイルのハンドルを配列で記述します。

$ver

このファイルのバージョン番号を文字列で指定します。これを指定すると、URLクエリパラメータがファイル名の後に付与されます。バージョン番号が変われば、別ファイルとして認識されるため、キャッシュではなくちゃんとファイルを読み込んでくれるなどの利点があります。

$media

スタイルシートのCSS-media-typesを指定します。screenとか、printとか。省略すればallになります。

記述例

<?php
    wp_enqueue_style('print-style', get_template_directory_uri().'/style-print.css', array('common-style'), '1.0', 'print' );
    wp_enqueue_style('common-style', get_template_directory_uri().'/style.css', , '1.0', 'all' );
?>

出力例

<link rel='stylesheet' id='common-style-css' href='http://www.xxxxxxx.com/wp-content/themes/mytheme/style.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='print-style-css' href='http://www.xxxxxxx.com/wp-content/themes/mytheme/style-print.css?ver=1.0' type='text/css' media='print' />

上記の例では、wp_headの位置にまず共通のCSSが読み込まれます。その後、依存関係にあるプリント用のCSSが読み込まれます。

JavaScriptファイルの読み込み

JSファイルの読み込みもCSSとだいたい同じです。以下のテンプレートタグを使用します。CSSと異なる点ですが、出力する位置をwp_headかwp_footerか選ぶことができます。

テンプレートタグ

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle

読み込むJSファイルに任意の名前（ハンドル）を付けます。この名前が、このファイルの登録名となり、後述する$depsにて依存関係を指定する際などに用いられます。

$src

$deps

他のファイルとの依存関係。このファイルよりも「前」に読み込ませたいファイルのハンドルを配列で記述します。

$ver

$in_footer

trueを指定すると、wp_footerの位置でファイルが読み込まれます。

記述例

<?php
    wp_deregister_script('jquery');
    wp_enqueue_script('common-script', get_template_directory_uri().'/js/common-script.js', array('jquery'), '1.0', true );
    wp_enqueue_script('jquery', get_template_directory_uri().'/js/jquery.min.js', , '3.1.1' );
?>

出力例

<!-- wp_headの位置に -->
<script type='text/javascript' src='http://www.xxxxxxx.com/wp-content/themes/mytheme/js/jquery.min.js?ver=3.1.1'></script>
<!-- wp_footerの位置に -->
<script type='text/javascript' src='http://www.xxxxxxx.com/wp-content/themes/mytheme/js/common-script.js?ver=1.0'></script>

この例では、wp_deregister_scriptでWordPressにあらかじめ登録されてあるjQueryを削除して、新たにテーマディレクトリ内にあるjQueryを読み込ませています。
ちなみに、「jquery」というハンドルは、多くのプラグインがJSファイルを読み込む際に依存関係で指定しているため、削除したままだとプラグインのJSファイルが読み込まれず、正常に動かない恐れがあります。デフォルトのjQueryを削除する際には必ず、「jquery」のハンドルで代替となるjQueryファイルを登録しましょう。

WordPressには、あらかじめ登録されているハンドルがあり、それぞれファイルが存在します。jQueryもその１つです。これらは、以下のページから確認できます。
WordPress に含まれ登録されているデフォルトスクリプト

おまけ

今回、テーマディレクトリへのURLを取得するために使用した「get_template_directory_uri」というWordPressタグですが、子テーマ内で使用すると、その子テーマではなく親テーマのディレクトリURLが返されます。子テーマ内で、子テーマディレクトリへのURLを取得するには「get_stylesheet_directory_uri」を使用します。