BLOG

ブログ

BRANDING / TRENDKILL

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

前田 大地

前田 大地

wordpress

こんにちは、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
読み込むファイルのURL。テーマディレクトリ内のファイルを読み込む際は、URLをべた書きせずに、get_template_directory_uriなどと組み合わせてファイルまでのパスを書きます。
$deps
他のファイルとの依存関係。このファイルよりも「前」に読み込ませたいファイルのハンドルを配列で記述します。
$ver
このファイルのバージョン番号を文字列で指定します。これを指定すると、URLクエリパラメータがファイル名の後に付与されます。バージョン番号が変われば、別ファイルとして認識されるため、キャッシュではなくちゃんとファイルを読み込んでくれるなどの利点があります。
$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もその1つです。これらは、以下のページから確認できます。
WordPress に含まれ登録されているデフォルトスクリプト

おまけ

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

それぞれの特徴

get_template_directory_uri
常に親テーマのディレクトリURLを返す
get_stylesheet_directory_uri
自身が親テーマであれば親テーマの、子テーマであれば子テーマのディレクトリURLを返す

ややこしいですね。親テーマの作成時にはどちらも同じ結果が返ってきますが、子テーマを作成する場合は注意してください。こういうつまらない箇所を見過ごしてしまうと、後からオカシイと気付いたとき、その原因を探すのに時間がかかってしまいますから。

以上、おまけのお話でした。

AUTHOR

この記事を書いた人

前田 大地

Developer / Designer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

FOLLOW US

いいね!して新着情報をチェック

RELATED POST

関連記事

SEVENSIX NOTESEVENSIX NOTE