スタイルシートやスクリプトファイルを読み込むときは、functions.phpに書くとheader.phpのコードがすっきりするのでおすすめです。
方法としては、 CSSは「wp_enqueue_style」、JavaScriptは「wp_enqueue_script」でそれぞれ読み込みます。CDNなどの外部サイトとディレクトリに保存しているものとで書き方が異なるため注意が必要です。
今回はCSSとJavaScriptの場合、また、外部ファイルの読み込み方と分けて解説していきます。
目次
CSSをfunctionsで読み込む
wp_enqueue_style(‘任意の名前’, 関数 . ’/ディレクトリ/ファイル名.css’); の内容で順に記載しています。
get_template_directory_uri()は、保存場所であるテーマディレクトリまでのURLを出力する関数です。任意の名前はシングルクォーテーションで囲まれており、文字列として認識されるため日本語もOKです。分かりやすい名前をつけてください。
wp_enqueue_style('reset_style', get_template_directory_uri() . '/css/style.css');
JavaScriptをfunctionsで読み込む
wp_enqueue_style(‘任意の名前’, 関数 . ‘/ディレクトリ/ファイル名.js’, このファイル以前に読み込むスクリプトファイル, ’ バージョン’, footerで読み込むか); の内容で順に記載しています。
wp_enqueue_styleとの違いは、ディレクトリより後の記述です。特にarray()に関しては、各々につけた任意の名前を使って該当のファイルより前に読み込みたいものを設定できます。
wp_enqueue_script('accordion_script', get_template_directory_uri() . '/js/headersize.js', array(), '', true);
例えば、Wordpressにデフォルトで組み込まれているjQueryを利用するときなどが挙げられます。こちらはよく使われる記述で、(‘jquery’)と書いて先に読み込む必要があります。
外部ファイルをfunctionsで読み込む
CDNなどでフォントやファイルを読み込むときは記述が少し変わります。ディレクトリのURLを考える必要はないので、関数以降を消して絶対パスで書いていきます。
wp_enqueue_script('fontawesome_script', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css');
外部ファイルでもバージョンがある場合は、以下のような内容で記述します。
wp_enqueue_script('jquery_script', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array(), '3.4.1', true);
ファイルをヘッダーに出力する
出力するときは先ほど読み込んだものをcustom_enqueueという任意の関数（変更可）で囲み、さらにphpで挟まれるように配置します。最後にadd_actionで関数を実行します。
<?php
function custom_enqueue(){
wp_enqueue_style('main_style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts','custom_enqueue');
?>
複数のファイルを読み込むときは
複数のファイルを読み込むときは、このような順で書いていきましょう。
<?php
function custom_enqueue(){
wp_enqueue_style('main_style', get_template_directory_uri() . '/style.css');
wp_enqueue_script('fontawesome_script', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css');
wp_enqueue_script('accordion_script', get_template_directory_uri() . '/js/accordion.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts','custom_enqueue');
?>
CSSとJavaScriptをfunctions.phpで読み込み、ヘッダーで出力する方法をご紹介しました。
header.phpはすっきりしましたか？ソースコード上ではheadに記述されたときとほぼ同じ形で出力されるため、外から見ただけでは分かりません。
カスタマイズする段階になると、基本的な機能はfunctions.phpにまとめられていた方が分かりやすいように思います。複数のファイル間を移動することもないので、作業の効率化にも役立ててみてくださいね。
