2021年9月28日

WordPressでcssを読み込む方法【大事なお作法です】

WordPress

こんにちは！ケンジです。

WordPressでheadタグにlinkタグを書いていませんでしょうか？もし書いているのでしたらWordPressで推奨されている作法に直しましょう！今回はその方法について記事にします。

本記事の目次

1.WordPressでcssを読み込む方法【大事なお作法です】

1-1cssファイルをTOPページのみに反映するには？
1-2cssファイルを外部から読み込むための実装方法
1-3JavaScriptファイルを外部から読み込むための実装方法
1-4まとめ

WordPressでcssファイルを読み込む方法【大事なお作法です】

WordPressで特定のページに読み込ませたいcssがあるのですがどのようにやったら良いか分かりません。ページ毎に読み込ませる方法はあるのでしょうか。やり方を教えてください。このような疑問にお応えします。

cssファイルをTOPページのみに反映するには？

WordPressにはお作法がありまして。headタグやbodyの閉じタグ直前にlinkタグやscriptタグを書くのは非推奨とされています。では、どうするのか？

functions.php より関数で読み込ませるのが推奨されています。

functions.phpより読み込ませることで、一元管理ができる様になり出力の制御(どのページに読ませるか等)もできる様になります。これはWordPressのお作法的な部分なので必須で習得しましょう！

例えば、テーマをカスタマイズする際にTOPページのみオリジナルデザインを適用させたい場合がそうですね。functions.phpに「frontpageのみこのcssを読ませます」と記述すると、対象のテンプレート階層に対してのみcssが適用される様になります。※上記の場合はテンプレート階層の「front-page.php」が対象となります。

cssファイルを外部から読み込むための実装方法

結論から言うと関数「wp_enqueue_style」を使います。

WordPressのリファレンスはこちら↓
>>wp_enqueue_style　リファレンス

実際のfunctions.phpへのコーディング例はこちらになります↓
※スタイルシート名が「top-style.css」の場合です。

function my_styles()
{
  if (is_front_page()) {
    // トップページにのみに反映するCSS
    wp_enqueue_style('top-style', get_stylesheet_directory_uri() . '/css/top-style.css');
}
add_action(‘my’_styles, 'my_styles');

解説
子テーマに格納されているファイルを読み込む場合は「get_stylesheet_directory_uri()」でディレクトリを取得しています。「top-style」はID名になるので任意ですが、他にも読み込ませるファイルがある場合は重複しない様にしましょう。

このコードをfunctions.phpへ書くことでheadタグからcssを読み込む必要がなくなるのと、 functions.phpで出力先を一括管理しやすくなりますね。

「wp_enqueue_style」の各パラメーターは下記の通りですので、ご参考までに。

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

$handle	区別するためのハンドル名を記載
$src	ファイルのURL
$deps	依存するファイルがある場合は指定。例えば、このcssファイルの前に読み込むべきcssファイルがある場合等。
$ver	cssファイルの ver番号を指定することにより、キャッシュの影響を受けずに確実に読み込むことが可能。「キャッシュクリア」の手間が省けるので設定推奨！
$media	読み込ませるmedia属性を指定できます。初期値はall

JavaScriptファイルを外部から読み込むための実装方法

JSのファイルについても外部から読み込む方法はcssと同様ですね。先ほどのcssのコードに追記する形で記載します。

function my_styles()
{
  if (is_front_page()) {
    // トップページにのみに反映するCSS
    wp_enqueue_style('top-style', get_stylesheet_directory_uri() . '/css/top-style.css');
　   // jsファイル
    wp_enqueue_script('top-js.js', get_stylesheet_directory_uri() . '/js/top-js.js', array('jquery'), true);
}
add_action(‘my’_styles, 'my_styles');

上記コードの「jsファイル」部分が該当するコードになります。 arrayの「jquery」はwordPressに同梱されているjqueryを指していて、「true」はbodyの閉じタグ前に出力するので trueとしています。

「wp_enqueue_script」の各パラメーターは下記の通りですので、ご参考までに。

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

$handle	区別するためのハンドル名を記載
$src	ファイルのURL
$deps	このスクリプトが依存するスクリプトを指定します。※指定したスクリプトよりも前に読み込ませるスクリプトが入ります。
$ver	cssと同様にjavascriptのファイルのver番号を指定しています。ファイルを更新した場合は変更しておきましょう。
$in_footer	スクリプトを設置する箇所を指定します。trueであればbody終了タグ前。falseであればheadタグ内になります。※初期値false