いつも煩雑になりがちなheader.phpに記載している情報を、メンテナンス性を向上させる目的でfunctions.phpに書くことを覚えたので、共有します。
他のテーマファイルについては、以下の記事で書いてますのでお時間ありましたら合わせてご覧ください。
ファイルの構造や解説等、Wordpress（以下、WP）のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。
- 【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれない事
-
index.phpのコードを知りたいよって方はこちら
【初心者向け】Wordpressテーマを自作する[index.php] -
header.phpのコードを知りたいよって方はこちら
【初心者向け】Wordpressテーマを自作する[header.php] -
footer.phpのコードを知りたいよって方はこちら
【初心者向け】Wordpressテーマを自作する［footer.php］
functions.phpはWPの基本動作をカスタマイズするファイルのため、少しでも書き方を間違えると、サイト自体が表示されなくなったり、エラーが出たりします。
下記コードをコピペする時もそうですが、既存のコードが記載されている個所に追記する場合は画面が真っ白になったり、エラーが出ても慌てず、まず追記した箇所を削除して、何が悪かったのか、検証してください。
良くあるのだと、コードの先頭に<?php、末尾に?>の書き忘れ・ダブり、コピペしたコードが、WPから削除された関数（非推奨）を使用している、関数が競合している等です。
当然ですが、functions.phpをカスタマイズする時は、いきなり本番環境に適用するのはやめましょう。
毎度の、とりあえず解説はいいからコードだけ、の方は以下をどうぞ。
コード
functions.phpの<?phpから?>の間に入れてください。
下記コードは、CSS5種類（reset.css含む）、Webフォントを3種類読み込んでいます。
//header読み込みファイル////////////////////////////////////////////////
function base_structure_style() {
//Baseなので別読み込み
wp_enqueue_style(
'styleBase',
get_template_directory_uri(). '/style.css',
array(),
'1.0.0'
);
wp_enqueue_style(
'styleReset',
get_template_directory_uri(). '/css/reset.css',
array(),
'1.0.0'
);
}
add_action('wp_enqueue_scripts', 'base_structure_style');
function add_link_files() {
//StyleSheet
wp_enqueue_style(
'styleL',
get_template_directory_uri(). '/css/style-large.css',
array(),
'1.0.0',
'screen and (min-width: 1025px)'
);
wp_enqueue_style(
'styleM',
get_template_directory_uri(). '/css/style-medium.css',
array(),
'1.0.0',
'screen and (min-width: 600px) and (max-width: 1024px)'
);
wp_enqueue_style(
'styleS',
get_template_directory_uri(). '/css/style-small.css',
array(),
'1.0.0',
'screen and (max-width: 599px)'
);
//webFont
//FontAwesome
wp_enqueue_style(
'fontawesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css',
array(),
'6.1.1'
);
//GoogleFont NotoSans
wp_enqueue_style(
'noto-sans',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap',
array(),
null
);
//GoogleFont Poiret One
wp_enqueue_style(
'poiret-one',
'https://fonts.googleapis.com/css2?family=Poiret+One&display=swap',
array(),
null
);
}
add_action('wp_enqueue_scripts', 'add_link_files');
解説
functions.phpとは
Codexでも書かれていますが、WordPress（以下、WP）の基本機能をカスタマイズするためのファイルです。
デフォルトで利用される方は必要ないように見えますが、使い方等覚えていて損はないかなと思います。
自作テーマを作るなら、functions.phpはバリバリ使いますので、覚えましょう！
（細かい解説はCodexをご覧ください）
コード解説（CSS読み込み）
コード自体にもコメント入れていますが、
function base_structure_style() {
は、基本的に増えたり減ったりするものではなく、一度配置すると削除することのないCSSなので（reset.cssは違いますが）私は別に読み込ませています。
うっかり消してしまった！を避ける意味もあります（時間がたつとヤラカスので）
functionから(){の間はお好みのキーワード等入れることができますので、自分で後で確認しても分かる様にしていると良いですね。
functionの中で読み込ませるファイル名等を指定します。
wp_enqueue_style(
'styleBase',
get_template_directory_uri(). '/style.css',
array(),
'1.0.0'
);
wp_enqueue_styleでここに書いてるCSSファイルを読み込むよーと言う指示になります。
複数ファイルを読み込む場合は、);で区切って、functionの中に入れていきますが、'styleBase',の部分は、ハンドルとして利用されるので、同じ文言にならないように注視してください。
get_template_directory_uri().はテーマファイルのフォルダの中を参照してくれるコードです。
いちいちフルパス書かなくても良いので、テスト環境から本番環境に移動しても安心。
'/style.css',は読み込ませたいファイル名。
別フォルダに置いている場合は/css/style.cssになります。
そもそもWPのテーマファイルでstyle.cssは、テーマフォルダ直下に置いておかなければならないので、style.cssだけは移動しちゃだめです。
上記はあくまでも例えとして記載しています。
array(),の箇所は、Codexではこのスタイルシートが依存する他のスタイルシートのハンドル配列とあります。
要するに、ここで指定したファイルよりも先に読み込ませたいファイルのハンドルを指定する個所です。
依存関係がない場合は、array(),を指定し、ある場合は、'styleBase',と言った感じでハンドルを指定します。
読み込ませる順番がおかしくならない様に注意して指定してください。
'1.0.0'は読み込ませるスタイルシートのバージョン。バージョン管理をしていないのであればfalseでOK。
あとは、}で閉じてadd_action
}
add_action('wp_enqueue_scripts', 'base_structure_style');
wp_enqueue_scriptがheaderの所定の場所で上で書いたファイルを読み込ませる指定、base_structure_styleは、この中で指定しているファイル読んで指定した動作させてねーって感じです。（ざっくり）
このコードの最初に書いたfunction base_structure_styleのfunctionを抜いた文言です。
他とダブらない様に注意。
コード解説（Webフォント読み込み）
FontAwesome
GoogleFontsのおかげで、だいぶwebフォントの導入の敷居も低くなりました。
でもフォントごとにCDNを読み込ませる必要があり、header.phpにわんさか追記してしまうと見難く、メンテナンス性が損なわれるので、これもfunctions.phpに書いてしまいます。
//FontAwesome
wp_enqueue_style(
'fontawesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css',
array(),
'6.1.1'
);
みんな大好きFontAwesome！
アイコンの素材を画像で用意せずに簡単にいい感じのアイコンが実装できる優れもの！
以前は、すぐに実装できたのですが、最近は無料の会員登録をしないとCDNコードが取得できないようなので、会員登録をしてから行ってください。
検索すれば実装方法等はたくさん出てきますので、ここは割愛します。
functions.phpに書いているコード自体も、読み込ませるCDNが違うだけでスタイルシートの時とほぼ変わりません。
Google Fonts
GoogleFontは少し癖があって、ここまで来るまでにごたごたしました。
実装の仕方などは割愛します。
実装の基本がわからない人は検索して調べてください。
まず<link rel="で始まる個所は必須で、functions.phpに書くことは出来ませんでした。（なんで？）
なので、これだけはheader.phpに書きます。
複数のフォントを読み込んでも、この2行さえあれば大丈夫です。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
header.phpに書き込んだら、GoogleFontで取得した<link href="の部分のURLをファイルを読み込む箇所に書きます。
//GoogleFont NotoSans
wp_enqueue_style(
'noto-sans',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap',
array(),
null
);
取り合えず、読み込む書体のウエイト（太さ）はありったけ全部にしてます。
コードは源ノ角ゴシック（NotoSans）です。
バージョンの箇所は、Googleフォントの場合はnullにします。
バージョンを入れると読み込んでくれません（なんで？）
使いたいWebフォントの読み込みが完了したら
add_action('wp_enqueue_scripts', 'add_link_files');
で実行します。
どこで読み込ませるの？？？
functions.phpにスタイルシートとWebフォントを読み込ませたら、header.phpに読み込ませる！と私思ってました。
add_action('wp_enqueue_scripts', '***');
で読み込んだファイルは、WPでは自動的にheader.phpに読み込んでくれます。
まとめ
規則性さえわかってしまえば案外簡単にfunctions.phpにスタイルシートとWebフォントを読み込ませることができます。
私としてはheaderに書き込むよりもこちらの方がバージョン管理やファイルの構造がわかりやすいので、最近のテーマはfunctions.phpにほとんど書き込んでいます。
ただ、functions.phpは他のカスタマイズコードも書き込むので、機能ごとに別ファイルにして、メインのfunctions.phpで読み込ませる形がベストかと思います。
10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。