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

web-thumbnail-604x270
Update Web制作メモ >

前回作成した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という名前で同じフォルダに保存します。

cut-header

残った部分はそのままindex.phpとして上書き保存します。

この時点でWebサイトを表示させてみると、こうなります。

index-php

最初のほうのコードをカットしてしまいましたので、サイトの上のほうも（ヘッダー）そっくり消えています。また、<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

書き加えたら上書き保存して、Webサイトを開いてみます。

index-php-2

ちゃんとヘッダー部分が表示されました。スタイルシートも効いています。元通りです。

こんなかんじで、サイドバーやフッターも分割していきます。

index.phpからサイドバー部分を分割する

<?php get_header(); ?>（ヘッダーを読み込むインクルードタグ）を書き加えたindex.phpから、こんどはサイドバーにあたる部分を分割します。

57行目の<!?sidebar?>から、74行目（<><!?footer?>の直前）までをカットします。

カットした部分（57行目～74行目）をテキストエディタにコピーして、sidebar.phpという名前で保存します。

cut-sidebar-1

  • index.phpからカットして作成したsidebar.php：
    •

残った部分はそのままindex.phpとして上書き保存します。

サイトを表示させてみます。もちろんサイドバーは消えていますね。ですが先ほどとは違ってheader.phpが読み込まれていますので、スタイルシートはちゃんと効いています。

cut-sidebar

sidebar.phpを読み込むための「インクルードタグ」を書き込む

サイドバーをカットした部分に、先ほど作成したsidebar.phpを表示させるため、インクルードタグを書き加えます。

sidebar.phpを読み込むためのインクルードタグ

index.phpからフッター部分を分割する

さいごに、<?php get_header(); ?>と<?php get_sidebar(); ?>を書き加えたindex.phpから、フッターにあたる部分を分割します。59行目の<!?footer?>から最後までをカットします。

カットした部分（59行目～最後）をテキストエディタにコピーして、footer.phpという名前で保存します。

cut-footer-1

残った部分はそのままindex.phpとして上書き保存します。

footer.phpを読み込むための「インクルードタグ」を書き込む

カットした部分に先ほど作成したfooter.phpを表示させるため、インクルードタグを書き加えます。

footer.phpを読み込むためのインクルードタグ

ここまでのまとめ

  • index.phpからカットして作成したfooter.php：
    •