WordPress自作テーマメモ:PHPファイル分割

前回作成したPHPファイルを使ったテーマ作成のメモです。
全ページ共通の部分(ヘッダーやフッター、サイドバー)を別ファイルとして分割する
前回、4つのファイル(index.php,single.php,page.php,archive.php)に書いたstyle.cssへのリンクを絶対パスに修正する、という作業をしました。
(この部分を)
(絶対パスに書き換える)
こんなふうに、そのつど4つのファイルを開いて修正するのは大変です…。なので、ヘッダーやフッター・サイドバーなど、どのページにも共通する部分を分割(別のファイルとして保存)し、どのページでも同じヘッダー・フッター・サイドバーを表示させられるようにします。
なお、はじめはよくわかっていなかったのですが…WordPressの場合index.phpとstyle.cssさえあればテーマとして機能します。なのでヘッダーなどを分割するこの作業は必須というわけではないのですね。別にそのつど複数のファイルを修正したって良いわけです。
ですが、管理が複雑にならないよう、ヘッダー・フッター・サイドバーあたりは別ファイルとして分割するのがスタンダードみたいですね。
index.phpからヘッダー・サイドバー・フッターを分割する
index.phpからヘッダー部分を分割する
これからの分割の作業がちょっと楽になるよう、前回作成したindex.phpには、ヘッダー・メインコンテンツ(左カラム)・サイドバー(右カラム)・フッターの部分にそれぞれこんなふうにコメントを入れてあります。
- 1行目 … <!–header–>
- 24行目 … <!–index–>
- 78行目 … <!–sidebar–>
- 97行目 … <!–footer–>
このindex.phpからヘッダーにあたる部分を分割します。1行目の<!–header–>から、22行目(<!–index–>の直前)までをカットしてしまいます。
カットした部分(1~22行目の記述)をテキストエディタにコピーして、header.phpという名前で同じフォルダに保存します。
残った部分はそのままindex.phpとして上書き保存します。
この時点でWebサイトを表示させてみると、こうなります。
最初のほうのコードをカットしてしまいましたので、サイトの上のほうも(ヘッダー)そっくり消えています。また、<head>~</head>部分もカットしてしまっていますので、スタイルシートも読み込まれていません。
header.phpを読み込むための「インクルードタグ」を書き込む
そこで、index.phpからヘッダーをカットした部分に、先ほど作成したheader.phpを表示させるため、WordPressのインクルードタグというものを書き加えます。
header.phpを読み込むためのインクルードタグ
テンプレートインクルードタグは、あるテンプレートファイル(例えば index.php)の中で、他のテンプレートファイル(例えば header.php)の HTML や PHP を実行するために使います。PHP にはこの用途の include() 文がありますが、以下の WordPress テンプレートタグを使えば、より簡単に特定のファイルを読み込めます。-WordPress Codex
get_header() タグは、現在のテーマディレクトリから header.php または header-{name}.php ファイルを読み込みます。-WordPress Codex