本記事では、WordPressでCSSやJavaScriptなどの別ファイルを読み込む方法について解説しています。
- サイト運営に必須のことが学べる
- 基本的な使い方～オリジナルテーマ開発まで学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
手順①：wp_headとwp_footerの追加
こちらの手順①は、一からテーマ作成をしている人に向けた設定になります。既にテーマを使用している人は以降の関数がファイル内に既に記述されていると思いますので、次のfunctions.phpの編集をご覧ください。
headタグ内にwp_head()関数を、
<head>
<?php wp_head(); ?>
</head></body>タグの直前にwp_footer()関数を記述します。
<?php wp_footer(); ?>
</body>手順②：functions.phpの編集
functions.phpに追加したいCSSとJavaScriptファイルを記述します。
function themeslug_enqueue_style_script()
{
wp_enqueue_style('my-style', get_theme_file_uri('/assets/scss/style.css'), [], '1.0.0', 'all');
wp_enqueue_script('my-script', get_theme_file_uri('/assets/js/index.js'), [], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'themeslug_enqueue_style_script');add_actionフックの第一引数には、ファイルを読み込む時に使用される「wp_enqueue_scripts」のアクションを指定します。第二引数には実行させる関数を指定します。
第二引数で指定した関数内の処理は、CSSを読み込ませたい時に「wp_enqueue_style」を、JavaScriptを読み込ませたい時に「wp_enqueue_script」を使用します。
wp_enqueue_styleの使い方
<?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?>wp_enqueue_style関数は5つの引数を指定することが出来ます。各引数に設定する値の詳細は以下のとおりです。
- $handle：ハンドル名を指定します。ハンドル名はHTMLのid属性として出力されるため重複しないよう設定します。
- $src：読み込みたいスタイルシートまでのパスを指定します。開発環境と本番環境までのパスは異なるので、直接絶対パスで指定するのはあまり好ましくありません。「get_theme_file_uri」や「get_template_directory_uri」などの関数をしましょう。
- $deps：スタイルシートが依存する他のスタイルシートのハンドル名を指定します。読み込みたいスタイルシートが他のファイルに依存していない場合は初期値の空配列を指定します。
- $ver：スタイルシートのバージョン番号を文字列で指定します。バージョン番号を持たせない場合は初期値のfalseを指定します。
- $media：スタイルシートが定義されているメディアを文字列で指定します。初期値は’all’です。メディアタイプの詳細はこちらをご覧ください。
wp_enqueue_scriptの使い方
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>wp_enqueue_script関数は5つの引数を指定することが出来ます。第1引数～第4引数に関してはwp_enqueue_styleと変わらないので説明は省きます。
第5引数($in_footer)：JavaScriptファイルを読み込ませる場所を真偽値で指定します。falseを指定した場合は<head>タグ内で読み込み、trueを指定した場合は</body>の直前に読み込みます。初期値はfalseです。DOM操作をする処理を記述している場合は、初期値のfalseだと要素を正しく取得できない場合があるのでtrueに指定することをオススメします。
