head内に読み込むCSSや</body>手前に読み込むJavaScriptなどは、index.phpなどのファイルに直接記述することもできますが、読み込むファイルの取り回しやコードの可読性やメンテナンス性を考慮するとあまり良いとは言えません。
WordPressのテーマにはどのページでも読み込まれるファイルとしてfunctions.phpが準備されています。今回の記事ではそちらを使って必要な参照ファイルを読み込む手順を解説していきます。
オリジナルテーマのインストールやfunctions.phpが準備できていない方は過去記事をご確認ください。
オリジナルテーマのインストール | WordPress自作テーマ作成講座
WordPressのテンプレート階層
WordPressには投稿や固定ページなど管理画面で提供されている入稿機能があり、登録された情報がテンプレートを通して出力されるようになっています。前回作ったテーマディレクトリの内容だとまだindex.phpしかテンプレートが存在しないため、登録した情報は全てindex.phpをもとに出力されるようになっています。
index.phpだけで全て出力を管理するのは不可能ではありませんが、WordPressのにはあらかじめ用意された命名のテンプレートをテーマディレクトリに設置するだけで、投稿や固定ページや一覧ページに紐づけることができるようになっています。下記に基本的なファイルを紹介しておきます。
| ファイル名 | 該当ページ |
|---|---|
| index.php | ページがどのテンプレートにも紐づかない場合に適用されるファイル |
| front-page.php | 固定ページをトップに設定している場合のトップページ |
| home.php | 最新の投稿をトップに設定してる場合のトップページ |
| single.php | 投稿の詳細ページ |
| page.php | 固定ページ |
| singular.php | 投稿の詳細と固定ページが紐づくテンプレート（優先順位低め） |
| archive.php | 一覧ページ |
| category.php | 投稿のカテゴリ一覧 |
| tag.php | 投稿のタグ一覧 |
| date.php | 投稿の日付アーカイブ一覧 |
| 404.php | 404 not foundの際に表示されるページ |
WordPressはURL伝いにどのテンプレートが紐づけられるかを決定しています。その際にテーマファイルが紐づく優先順位があります。上記の表にもありますが、singular.phpは投稿の詳細にも固定ページにも紐づきますが、優先順位が低いためsingle.phpやpage.phpがある場合は紐づけが行われません。
固定ページで優先順位をまとめると下記のようになります。
| 優先順位 | ファイル名 | 内容 |
|---|---|---|
| 1 | [カスタムテンプレート名].php | 固定ページ編集画面で選択できるテンプレート |
| 2 | page-[slug].php | 固定ページのスラッグ固有のテンプレート |
| 3 | page-[id].php | 固定ページのID固有のテンプレート |
| 4 | page.php | 固定ページ用のテンプレート |
| 5 | singular.php | 投稿の詳細と固定ページが紐づくテンプレート（優先順位低め） |
| 6 | index.php | ページがどのテンプレートにも紐づかない場合に適用されるファイル |
１〜３の固有のテンプレートについての詳細はまた別の記事で紹介させていただきますが、ここで注目していただきたいのはpage.php→singular.php→index.phpと優先順位がついているところです。
page.phpとsingular.phpのどちらを設置するかについてですが、サイトの使用で固定ページが必要ない場合（例：トップページとお知らせページだけのサイト）では、後で固定ページが必要になった時にpage.phpがないとindex.phpに紐づいてしまうため、singular.phpで予め書いておくと良いのではないかと考えています。
index.phpはよくトップページとしても使われるのですが、アクセスしたURLがどのテンプレートにも紐づかない場合に行き着くため、あまり良いとされていません。トップページにはfront-page.phpかhome.phpを使うようにしましょう。
テンプレート階層をもっと深く理解したい方は下記の記事を参考にしてください。
テンプレート階層 – Japanese Team – WordPress.org 日本語
https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
ヘッダーとフッターの準備
WordPressのテーマにはあらかじめ定義されているテンプレートがあり、ヘッダーやフッターはルールに倣って記述しておくことで、さまざまな機能の恩恵を受けることができます。テーマディレクトリに下記２つのファイルを作ってトップページ用のテンプレートに読み込んでいきます。
- header.php
- footer.php
各ファイルにとりあえず最低限の記述をしておきます。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head();?>
</head>
<body>ほぼHTMLのみの見慣れ画コードですが、１行だけWordPressのコード <?php wp_head(); ?> が挿入されています。これは wp_head() というWordPressの関数で、これからfunctions.phpでCSSの参照をhead内に記述する際に必要となります。wp_head() はその他にも様々なことに使われるので、headタグ内に必ず記載しておきましょう。
footer.php
<?php wp_footer(); ?>
</body>
</head>こちらには wp_footer() を記述しました。これも wp_head() 同様に必要なので記載しておきしょう。
wp_head() や wp_footer() が記載していないと場合はインストールしたプラグインが動作しないなどの不具合が起こる可能性がありますので、必ず記載しておくようにしましょう。
次にトップページ用のテンプレートを準備します。
今回は固定ページをトップに設定するためfront-page.phpを作成し、先ほど作ったheader.phpとfooter.phpをこのページに使うようにインクルードしておきます。
front-page.php
<?php get_header(); ?>
<?php the_content ?>
<?php get_footer(); ?>ここでは３つのWordPress関数を記述しました。
get_header()
header.phpファイルをを読み込む関数です。引数で読み込むヘッダーファイルを変更できますが、ここでは割愛していきます。
the_content()
投稿のや固定ページの本文に登録された内容を出力します。
get_footer()
footer.phpファイルをを読み込む関数です。引数で読み込むフッターファイルを変更できますが、ここでは割愛していきます。
<?php … ?> について
記載したコードの中に <?php で始まり、?> で終わるコードができましたが、.phpファイルではPHPのコードを記述する際にこの間に入れる必要があります。WordPressの関数を読み込む時にも使うため、頻繁に出現しますのでここで覚えておきましょう。
functions.phpからheadタグ内にCSSの読み込みを追加
functions.phpからhead内へCSSを表示する流れは、
- スタイルシートを登録する（関数に含める）
- スタイルシートを読み込む（関数に含める）
- アクションフックで関数を実行する
となります。それではコードを見ていきます。
wp_register_style() でスタイルシートを登録する
WordPressには既に多くのスタイルシートが登録されていますが、自分で作ったものを登録すためには wp_register_style() を使って登録を行います。
詳しい使い方の説明は公式の関数リファレンスを見てもらった方が良いと思いますので、ここではサンプルのコードで説明していきます。
// 使い方
// wp_register_style( $handle, $src, $deps, $ver, $media );
function web_dukuri_styles() {
wp_register_style(
'style_web_dukuri',
get_theme_file_uri('/assets/css/style.css'),
array(),
filemtime( get_theme_file_path('/assets/css/style.css')),
''
);
}$handle
登録するスタイルシートの名前を任意で入力します。こちらは呼び出す時に使用するため重複は不可となります。
$src
スタイルシートのURLを入力します。サンプルコードでは get_theme_file_uri() を使ってテーマディレクトリのURLを取得して、引数に設定した相対パスを渡しています。
$deps
読み込み時にここで登録するスタイルシートより先に読み込むべき（依存関係のある）ものを配列で記載します。今回はないので空を渡しています。
$ver
スタイルシートのバージョンを記載します。バージョン情報を渡すことで更新があった際にブラウザのキャッシュでスタイルシートが更新されない現象を解消します。ここでは登録したスタイルシートの最終更新日時をバージョン情報に渡すことで、ファイルの更新があった場合にバージョンが変わるようにしています。
$media
linkタグのmedia属性に記載したい値を入れます。画面サイズで読み込むスタイルシートを変える場合や、印刷用のスタイルとしたいような場合に使用します。ここでは特に指定する必要がなかったので空欄としています。
wp_enqueue_style() でスタイルシートを読み込む
上の項で記載したコードにスタイルシートを読み込むプログラムを追記します。
function web_dukuri_styles() {
wp_register_style(
'style_web_dukuri',
get_theme_file_uri('/assets/css/style.css'),
array(),
filemtime( get_theme_file_path('/assets/css/style.css')),
''
);
// ここを追加
wp_enqueue_style(
'style_web_dukuri'
);
}wp_enqueue_style() の第１引数で先ほど wp_register_style() の第１引数$handleで登録した名前を渡して呼び出します。
（wp_register_style() で登録をしないで wp_enqueue_style() で登録と読み込みをすることも可能なのですがその方法は割愛させていただきます）
アクションフックでhead内へ書き出す
ここまではスタイルシートの登録、読み込みをするプログラムを書いてきましたが、まだ関数を定義しただけで実行はされていません。ここではアクションフックを使ってhead内にスタイルシートを読み込む関数を実行します。
アクションフックは特定のタイミングで関数を実行するためのWordPressの仕組みです。下記のコードでは アクションフックの wp_enqueue_scripts を使用し、公開側のWEBサイトに関数を実行しています。
function web_dukuri_styles() {
wp_register_style(
'style_web_dukuri',
get_theme_file_uri('/assets/css/style.css'),
array(),
filemtime( get_theme_file_path('/assets/css/style.css')),
''
);
wp_enqueue_style(
'style_web_dukuri'
);
}
// ここを追加
add_action('wp_enqueue_scripts', 'web_dukuri_styles');これでheadタグ内へスタイルシートの読み込みをするlinkタグが出力されますので、トップページのコードビューから確認しましょう。
functions.phpから</body>直前にscriptの読み込みを追加
scriptの読み込みもスタイルシートと似ていますので、違うところを説明していきます。まずはサンプルのコードから見ていきましょう。
// 使い方
// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
function web_dukuri_scripts() {
wp_register_script(
'script_web_dukuri',
get_theme_file_uri('/assets/js/common.js'),
array(),
filemtime(get_theme_file_path('/assets/js/common.js')),
true
);
wp_enqueue_script(
'script_web_dukuri'
);
}
add_action('wp_enqueue_scripts', 'web_dukuri_scripts');scriptの場合は wp_register_script() を使用します。wp_register_style() では最後の引数にmedia属性に渡す値を記述していましたが、こちらでは下記のようになります。
$in_footer
読み込む場所を wp_head() か wp_footer() するかを記述します。初期値は false で wp_head() に読み込むようになっていますが、今回は</body>の直前で構わないないようなので true として wp_footer() で読み込むようにしました。
次に wp_enqueue_script() を使ってscriptを呼び出し、アクションフック wp_enqueue_scripts を使って実行しています。
これで</body>の直前にscriptを読み込むコードが出力されているはずなので、コードビューから確認しておきましょう。
CDNのライブなども含め、複数のscriptを読み込む
CDN経由でJavaScriptの外部ライブラリを読み込む場合も、wp_register_script() で登録を行います。複数登録した際は wp_enqueue_sript() で読み込む際に配列で渡すことができます。下記のサンプルコードではモーダルウィンドウとスライダーのライブラリを読み込んでいます。
function web_dukuri_scripts() {
wp_register_script(
'script_micromodal',
'//unpkg.com/micromodal/dist/micromodal.min.js',
array(),
'',
true
);
wp_register_script(
'script_swiper',
'//unpkg.com/swiper@7/swiper-bundle.min.js',
array(),
'',
true
);
wp_register_script(
'script_web_dukuri',
get_theme_file_uri('/assets/js/common.js'),
array(),
filemtime(get_theme_file_path('/assets/js/common.js')),
true
);
wp_enqueue_script(
array(
'script_micromodal',
'script_swiper',
'script_web_dukuri'
)
);
}
add_action('wp_enqueue_scripts', 'web_dukuri_scripts');配列に渡す順番で読み込間れる順番も変わるようなので、自分で記述しているJavaScriptのファイルは最後に読み込ませています。こういう依存関係は$depsの引数に渡した方が良いのでしょうが、今回は割愛させていただきます。
scriptの読み込みにdeferをつける
wp_register_script() や wp_enqueue_script() にはdeferやasyncなどを記載するための引数がないので、記載したい場合は下記のようなプログラムでscriptが読みこまる際に文字列の置換を行います。
function script_add_defer($tag, $handle) {
// scriptタグからtypeを削除
$tag = str_replace(" type='text/javascript'", '', $tag);
// deferをつけるscriptを配列に格納
$array_add_defer = array(
'script_micromodal',
'script_swiper',
'script_web_dukuri'
);
// deferをつけないタグはそのままリターン
if(!in_array($handle, $array_add_defer)) {
return $tag;
}
// 文字列の置換でdeferを付与
return str_replace(' src=', ' defer src=', $tag);
}
add_filter('script_loader_tag', 'script_add_defer', 10, 2);関数の冒頭ですが「type=’text/javascript’」は不要なので削除しています。
$array_add_deferの配列にdeferをつけるscriptの登録名を記載し、記載のないscriptはdeferを付与せずにreturnさせています。
関数の最後でstr_replaceを利用し文字列の置換をおこなっています。
参考サイト
WordPress wp_enqueue_scriptで追加するscriptタグにdefer/asyncを付加する方法 | e-JOINT.jp
https://e-joint.jp/505/
PHP: str_replace – Manual
https://www.php.net/manual/ja/function.str-replace.php
更新・訂正
2022.11.16 11:30頃
「scriptの読み込みにdeferをつける」のプログラムでreturnすべきところを、コンソールに出力する独自の関数で記述したままだったのを訂正しました。
コメント