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

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

前回作成したPHPファイルを使ったテーマ作成のメモです。

全ページ共通の部分(ヘッダーやフッター、サイドバー)を別ファイルとして分割する

前回、4つのファイル(index.php,single.php,page.php,archive.php)に書いたstyle.cssへのリンクを絶対パスに修正する、という作業をしました。

(この部分を)


(絶対パスに書き換える)


こんなふうに、そのつど4つのファイルを開いて修正するのは大変です…。なので、ヘッダーやフッター・サイドバーなど、どのページにも共通する部分を分割別のファイルとして保存)し、どのページでも同じヘッダー・フッター・サイドバーを表示させられるようにします。

なお、はじめはよくわかっていなかったのですが…WordPressの場合index.phpstyle.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