functions.phpにてcssやjsファイルを読み込む

2021年2月14日 14:16

CSSファイルやjsファイルを読み込む際に通常(WordPressを使用しないサイト)であればHTMLの<head>タグ内で読み込むと思います。
ですが、WordPressを用いたサイトであれば<head>タグ内で読み込むことも可能ですがそれはあまり好ましくないようです。
以下公式引用

『ヘッダーテンプレートにテーマのスタイルシートをリンクしないでください。代わりにテーマ関数のアクションフック wp_enqueue_scripts を使う。』

ではなぜこのようにfunctions.phpで読み込むことが推奨されているのかとゆうとWordPressを使ったサイト構造上複数のテンプレートファイルを作るかと思います、その際特定のjsファイルは</body>の直前で読み込むようにさせたい、特定のページだけにcssを適用させたい場合に複数のファイルに記述をしなければなりません。
これは保守性があまり良くなく効率も悪いです。
なのでfunctions.phpで一元管理することでメンテナンス性も上がり手入れしやすいサイト構造になる為です。

ではどうゆう風に読み込みをすればいいのかですがWordPressにて用意されているアクションフック「wp_enqueue_scripts」を使用します。
このアクションフックはファイル読み込み用のフックとなっておりこのフックにCSSやjsを読み込みます。

テーマディレクトリ/
　├ js/
　│　└ script.js  //これを読み込む
　├ style.css     //これを読み込む
　├ header.php
　├ footer.php
　└ その他ファイルたち

例として上記ディレクトリ構造のcssとjsを読み込みます

css:wp_enqueue_style
wp_enqueue_style(登録名, パス,　$deps , $var, media属性)
JS:wp_enqueue_script
(登録名, パス,　$deps , $var, $in_footer)

第一引数(登録名)、第二引数(ファイルパス)は必須となり他引数は省略しても読み込みは可能になります。第３引数$depsはスタイルシートの読み込み順をコントロールする際に使用。他のスタイルシートで指定した$handleの文字列を入れておくと、その後に読み込まれる（「array()」と配列で指定)
第四引数はスタイルシートにバージョンを記述出来ます。

<link rel='stylesheet' id='xxxx-css'  href="/path/to/file.css?20190418">

wp_enqueue_styleでは基本的にこの第四引数までを記述することになります。
wp_enqueue_scriptの第5引数$in_footerでは真偽値を指定でき初期値(false)では<head>内で読み込まれるがtrueにすると</body>直前で読み込むことができる。

//テーマディレクトリまでのパスを定数にしておくと便利です
define("DIRE", get_template_directory_uri());

function add_files(){
   wp_enqueue_style('my_style',DIRE.'/style.css');
   wp_enqueue_script('my_script',DIRE.'/js/script.js',array(jquery), false,true true);
}
add_action('wp_enqueue_scripts', 'add_files',);
//アクションフックwp_enqueue_scriptsへの登録

array(jquery)はscript.jsでjQueryを使ったコードを書きたい場合に記述します。こうしないとjQuery本体より先にjsファイルが読み込まれてしまうのでjQueryのコードが機能しなくなる可能性があリマス。

ちなみにWordPressではデフォルトでjQueryが読み込まれています。
このjQueryを使う場合少し特殊な書き方をしなければなりません

jQuery(function($){//引数に$をいれる

})(jQuery);

上記のように記述すれば普段の書き方で機能します。

この記事が気に入ったらサポートをしてみませんか？