Simple Journal – ヘッダー部分とフッター部分をテンプレートファイルに切り出す

前回編集した index.php のヘッダー部分とフッター部分のコードを別のテンプレートファイルに切り出し、共通化しておくことにします。

01. ヘッダー部分を header.php に切り出す

テーマのヘッダー部分をテンプレートファイル header.php に切り出します。

まずはテーマフォルダに header.php ファイルを作成し、

Add Header Template

index.php のヘッダー部分をコピーまたはカットして・・・

Cut Header HTML

header.php に貼り付け、保存します。

Paste Header HTML

その後、index.php のヘッダーがあった箇所には以下のテンプレートタグを挿入。

Add Header Template Tag

この状態でWordPressサイトを確認すると・・・

Check Header

見た目は変わらずです。

※ なお、index.phpのテンプレートタグの記述を削除した場合、サイトは以下のような表示になります(ヘッダー部分がごっそりなくなった状態)。

Without Header

 

02. フッター部分を footer.php に切り出す

フッター部分についても同様におこないます。

まずはテーマフォルダに footer.php ファイルを作成し、

Add Footer Template

index.php のフッター部分をコピーまたはカットして・・・

Cut Footer HTML

footer.php に貼り付け、保存します。

Paste Footer HTML

その後、index.php のフッターがあった箇所には以下のテンプレートタグを挿入。

Add Footer Template Tag

この状態でWordPressサイトを確認すると・・・

Check Footer

ちゃんと footer.php の内容が index.php から読み込まれているのがわかります。

 

今後 index.php 以外のテンプレートファイルを追加したとき、今回使ったテンプレートタグの記述だけで、index.php と同じヘッダーやフッターを読み込めるので大変便利です。