COLUMN コラム
2022.10.31
【WordPress】functions.phpでCSSとJavaScriptを読み込む方法
WordPressのオリジナルテーマを作成する際、CSSやJavaScriptファイルをどこで読み込んでいますか？WordPressを勉強したての方は、HTMLの時と同じように ヘッダー用テンプレートファイル（header.php）の<head>要素内に直接リンクを記述しているという方が多いのではないでしょうか。
しかし、WordPressの公式マニュアルには「ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください」と記載されており、functions.php の中で wp_enqueue_style( ) や wp_enqueue_script( ) を使用して読み込むことが推奨されています。
WordPressを勉強したての方がつまづきやすいポイントでもあるかと思うので（私もそうでした）、今回は functions.php でのCSS、JavaScriptの読み込み方について紹介したいと思います。
1. header.phpでの読み込みの問題
そもそもheader.phpでの読み込みは何が問題なのでしょうか？HTMLの時と同じように<head>要素からリンクしても、サイトの見た目は問題なく表示されますよね。
例）<head>での読み込み
<head>
〜
<link rel="stylesheet" href="css/style.css">
<script src="js/style.js"></script>
</head>しかし、表面上では問題なくても裏側では問題が発生している可能性があります。
例えば、WordPressプラグインの中にはインストールして有効化した際に、外部のJavaScriptライブラリを使用している場合があります。header.phpで同じライブラリを読み込んでいた場合、ファイルが重複や競合をしてしまい、プラグインが正しく動作しなくなる恐れが出てきます。
また、JavaScriptを</body>直前で読み込みたい場合は、header.phpではなくfooter.phpに記述する必要が出てきます。このようにテンプレートファイルに直接記述する形だと、読み込ませたい位置にリンクを追加していくことになり、あとでファイルの追加や削除が発生した際にすべてのファイルを修正する必要があるなど、メンテナンス性の低下が問題となってきます。
2. functions.phpでの読み込み
公式が推奨するfunctions.phpでの読み込みでは、同じファイルの重複や競合を回避したり、JavaScriptの読み込み位置も変更することが可能です。また、CSSやJavaScriptを一元管理できるのでメンテナンス性も大きく向上します。
以下はfunctions.phpでCSSやJavaScriptを読み込む場合の記述例になります。
function add_link_files() {
// CSSの読み込み
wp_enqueue_style( 'common', get_stylesheet_directory_uri().'/css/common.css' );
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri().'/css/style.css', array('common'));
// JavaScriptの読み込み
wp_enqueue_script( 'my-script', get_template_directory_uri().'/js/script.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );「wp_enqueue_style( )」 と「wp_enqueue_script( )」は単体では使うことができないため、まず「add_link_files（名前は任意）」という関数にまとめます。そして10行目の「add_action( ’wp_enqueue_scripts’, ‘関数名’ ); 」というアクションフックに関数名を記述することで読み込ませることが可能になります。
ここからはCSS、JavaScriptを読み込むための関数について紹介します。
2-1. CSSの読み込み（wp_enqueue_style）
CSSの読み込みには「wp_enqueue_style( )」という関数で記述します。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );| 引数 | 説明 | 初期値 |
|---|---|---|
| $handle | ハンドル名（任意の名前）。他のCSSファイルの名前と重複しないように設定します。 | なし |
| $src | CSSファイルの参照パス。 | 空文字列 |
| $deps （省略可） |
依存関係のあるファイル。このファイルより事前に読む込む必要があるファイルをハンドル名（$handle）で設定します。 配列で記述するので複数設定することが可能です。 |
array( ) |
| $ver （省略可） |
バージョン番号。CSSファイルの末尾に付きます。 | false |
| $media （省略可） |
メディア属性。 | all |
2-2. JavaScriptの読み込み（wp_enqueue_script）
JavaScriptの読み込みは「wp_enqueue_script( )」という関数で記述します。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );| 引数 | 説明 | 初期値 |
|---|---|---|
| $handle | ハンドル名（任意の名前）。他のJSファイルの名前と重複しないように設定します。 | なし |
| $src | JSファイルの参照パス。 | false |
| $deps （省略可） |
依存関係のあるファイル。このファイルより事前に読む込む必要があるファイルをハンドル名（$handle）で設定します。 配列で記述するので複数設定することが可能です。 |
array( ) |
| $ver （省略可） |
バージョン番号。JSファイルの末尾に付きます。 | false |
| $in_footer （省略可） |
読み込み位置の設定。<head>に配置する場合はfalse、</body>直前に配置する場合はtrueを指定します。 | false |
スクリプトを実行するタイミングは基本的にHTMLの読み込みが完了してからの方が望ましいので、$in_footerの値をtrueにして</body>直前で読み込むようにしましょう。
2-3. 特定のページに読み込み
CSSやJavaScriptを特定のページにのみ読み込ませたい場合もありますよね。その場合は下記のようにページの条件分岐タグで対応することができます。
条件分岐の記述例
function add_link_files() {
// コンタクトページでのみ読み込み
if ( is_page('contact') ) {
wp_enqueue_style('flow', get_stylesheet_directory_uri().'/css/flow.css');
}
// エラーページでのみ読み込み
if ( is_404() ) {
wp_enqueue_script('reload', get_template_directory_uri().'/js/reload.js', false, true);
}
}
add_action( 'wp_enqueue_scripts', 'add_link_files' );おわりに
今回はfunctions.phpでCSSとJavaScriptを読み込む方法について紹介しました。
WordPressを勉強したての方にとっては、いきなりfunctions.phpに触れるのは少し抵抗があるかもしれませんが、WordPressを使用する上で必須の知識となりますので、しっかり身に付けておきましょう。
また、functions.phpは不要なコードを削除してサイトを軽量化したり（過去記事を参照）、プラグインをカスタマイズするなど、今後も利用する機会が多くあります。あまり触れてこなかった…という方は、今回の記事をきっかけに試していただけたら幸いです。