WordPressでCSSやJavaScriptファイルを読み込む時には、「functions.php」で読み込ませるのがGood
WordPressでオリジナルテーマでサイトを作成するときに、CSSやJavaScriptファイルはどこから読み込ませているでしょうか？
私は、WordPressの勉強をし始めた頃は、CSSやJavaScriptは「header.php」の<headタグ>から読みこませていました。
「header.php」の<headタグ>から込むことも出来ますが、一般的にはこの「functions.php」の中で、「wp_enqueue_style関数」 や「 wp_enqueue_script関数」を使用して読み込ませます。
また、Wordpressが「functions.php」を使用して読み込ませることを推奨しています。
「header.php」の<headタグ>からファイルを読み込ませている方は、この機会にぜひ、「functions.php」を使用したCSSやJavaScriptファイルの読み込ませ方法を知り、活用してみてください。
functions.phpに記述するコード
早速ですが、functions.phpに記述するコードが下記になります。
jQueryやSwiperなどのCDNの読み込ませ方も記述していますのでよかったら最後までお読みください。
<?php
/* CSSとJavaScriptの読み込み */
function add_my_script_init()
{
// 自作jsファイルの読み込み
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/script.js', array(), '1.0.0', true );
// 自作cssファイルの読み込み
wp_enqueue_style( 'style-rest', get_template_directory_uri() . '/assets/css/reset.css', array(), '1.0.0' );
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0.0' );
}
add_action('wp_enqueue_scripts', 'add_my_script_init');今回の階層構造ですが、functions.phpと同階層に「asssetsファイル」を作成し、その中のJavaScriptファイルやCSSファイルを参照しています。
コード解説
上記のコードで、
wp_enqueue_script()：JavaScriptを読み込む関数
wp_enqueue_style()：CSSを読み込む関数
になります。
wp_enqueue_script関数について
<?php
function add_my_script_init()
{
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/script.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'add_my_script_init');wp_enqueue_script( ‘script-name’, get_template_directory_uri() . ‘/assets/js/script.js’, array(), ‘1.0.0’, true );
JavaScriptファイルを読み込んでいる上記のコードの各パラメーターはこちらになります。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
| 引数 | 説明 |
|---|---|
| $handle | JavaScriptファイルのハンドル名。任意の名前でOK ※同じハンドル名の使用は不可 （「wp_enqueue_script」と「wp_enqueue_style」のハンドル名は同じでもOK） |
| $src | JavaScriptファイルのURL。 (「https:〜」から始まる場合、「https:」、「http:」から書かず「//〜」から記述。) |
| $deps | 依存するJavaScriptファイルのハンドル名（配列）。 このファイルが読み込まれる前に、読み込ませたいファイルのハンドル名を指定。 (読み込ませる順番を制御できる。) |
| $ver | JavaScriptファイルのバージョン。 ブラウザのキャッシュ対策に有効。 |
| $in_footer | フッターで読み込むかどうか。 true→「</body>の前」に出力 false→「</head>の前」に出力 デフォルト値はfalse。 |
jQueryの読み込み
<?php
function add_my_script_init()
{
// WordPress提供のjquery.jsを読み込まない
wp_deregister_script( 'jquery' );
// jQueryの読み込み
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', array(), '3.6.0' );
// 自作jsファイルの読み込み
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'add_my_script_init');wp_enqueue_style関数について
<?php
function add_my_script_init()
{
// 自作cssファイルの読み込み
wp_enqueue_style( 'style-rest', get_template_directory_uri() . '/assets/css/reset.css', array(), '1.0.0');
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0.0' );
}
add_action('wp_enqueue_scripts', 'add_my_script_init');wp_enqueue_style( ‘style-name’, get_template_directory_uri() . ‘/assets/css/style.css’, array(), ‘1.0.0’, false );
CSSファイルを読み込んでいる上記のコードの各パラメーターはこちらになります。
wp_enqueue_script関数とほとんど同じですが、最後の第５引数が異なります。
wp_enqueue_script( $handle, $src, $deps, $ver ,$media);
| 引数 | 説明 |
|---|---|
| $handle | CSSファイルのハンドル名。任意の名前でOK ※同じハンドル名の使用は不可 （「wp_enqueue_script」と「wp_enqueue_style」のハンドル名は同じでもOK） |
| $src | CSSファイルのURL。 (「https:〜」から始まる場合、「https:」、「http:」から書かず「//〜」から記述。) |
| $deps | 依存するCSSファイルのハンドル名（配列）。 このファイルが読み込まれる前に、読み込ませたいファイルのハンドル名を指定。 (読み込ませる順番を制御できる。) |
| $ver | CSSファイルのバージョン。 ブラウザのキャッシュ対策に使えます。 |
| $media | CSSファイルのメディアを指定。 初期値：all(基本的にcssファイルの方でメディアクエリを指定して記述しているので空欄でも問題ない) |
SwiperをCDNで読み込ませる方法
今回SwiperをCDNで読み込ませるコードを記述しておりますが、他の外部ファイルを読み込ませる際も同じように記述することで読みこませることができます。
// SwiperのJSファイルとCSSファイルをCDNで読み込み
wp_enqueue_script( 'swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', array(), '8.0.0', false );
wp_enqueue_style( 'swiper', '//unpkg.com/swiper@8/swiper-bundle.min.css', array(), '8.0.0');今までの記述したコードが下記になります。
<?php
function add_my_script_init()
{
// WordPress提供のjquery.jsを読み込まない
wp_deregister_script( 'jquery' );
// jQueryの読み込み
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.1.min.js', array(), '3.6.1' );
// SwiperのJSファイルとCSSファイルをCDNで読み込み
wp_enqueue_script( 'swiper', '//unpkg.com/swiper@8/swiper-bundle.min.js', array(), '8.0.0', false );
wp_enqueue_style( 'swiper', '//unpkg.com/swiper@8/swiper-bundle.min.css', array(), '8.0.0');
// 自作jsファイルの読み込み
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0.0', true );
// 自作cssファイルの読み込み
wp_enqueue_style( 'style-rest', get_template_directory_uri() . '/assets/css/reset.css', array(), '1.0.0');
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0.0' );
}
add_action('wp_enqueue_scripts', 'add_my_script_init');WordPressでWebサイトを作成する際には、functions.phpでJavaScriptやCSSを読み込ませることになると思うので、スニペットとして保存しておくのが良いと思います。
まとめ
WordPressでサイトを構築する際に、「functions.php」でCSSやJavaScriptを読み込ませる方法を解説しました。
functions.phpでCSSやJavaScriptを読み込ませる際にはwp_enqueue_style()関数やwp_enqueue_script()関数を使用します。
これを機に「functions.php」でCSSやJavaScriptを読み込ませて、WordPressサイトを構築してみてください。
