WordPress

【WordPress/PHP】CSSやJavaScriptなどの別ファイルを読み込む方法

本記事では、WordPressでCSSやJavaScriptなどの別ファイルを読み込む方法について解説しています。

こちらの解説では、PHPファイルを編集します。編集する際はファイルのバックアップを取ることをオススメします。

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報
著者Mana
発売日2022/3/22
ページ数344ページ
Kindle版
レビュー
(Amazon)
(217件)

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報
著者清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日2022/1/13
ページ数416ページ
Kindle版
レビュー
(Amazon)
(53件)
先輩くん
先輩くん
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つの引数を指定することが出来ます。各引数に設定する値の詳細は以下のとおりです。

  1. $handle:ハンドル名を指定します。ハンドル名はHTMLのid属性として出力されるため重複しないよう設定します。
  2. $src:読み込みたいスタイルシートまでのパスを指定します。開発環境と本番環境までのパスは異なるので、直接絶対パスで指定するのはあまり好ましくありません。「get_theme_file_uri」や「get_template_directory_uri」などの関数をしましょう。
  3. $deps:スタイルシートが依存する他のスタイルシートのハンドル名を指定します。読み込みたいスタイルシートが他のファイルに依存していない場合は初期値の空配列を指定します。
  4. $ver:スタイルシートのバージョン番号を文字列で指定します。バージョン番号を持たせない場合は初期値のfalseを指定します。
  5. $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に指定することをオススメします。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村