オリジナルサイトをWordPressで制作した時、更新を効率よく行うにはheaderやsidebarなどの各パーツを別ファイルとしてわけて、それを読み込ませる方法がオススメです！
何故かというと、例えば5ページあるサイトの
「headerに表記されている文言を変更したい」
となった時に1つのPHPファイルに全て記述していた場合は5つのPHPファイルのheaderを変更しなければいけません。それでも悪い訳ではないのですが、そのぶんの作業時間を考えるとなかなか大変です…。
そこで各パーツを別々のPHPファイルとしてわけて保存し、それをWordPressのテンプレートタグを使って読み込ませることで、header部分を更新したい時はheader.phpを更新するだけでそれを読み込んでいるページのheader部分も自動的に更新される…という仕組みになっています！
そこで今回はindex.phpにある各パーツをわけて、それを読み込ませるテンプレートタグを紹介しつつ解説したいと思います！ちなみに今回はサンプルページを元に紹介します！
見本のソースコードは以下になります。
<!DOCTIPE html> <html lang="ja"> <head> <title>サンプルページ</title> <meta charset="UTF-8"> <wp_head(); ?> </head> <body> <div id="header"> <header> ヘッダー </header> <nav> <ul> <li>ナビ</li> <li>ナビ</li> <li>ナビ</li> <li>ナビ</li> </ul> </nav> </div> <div id="content"> コンテンツ </div> <sidebar> サイドバー </sidebar> <footer> フッター </footer> <wp_footer(); ?> </body> </html>
1. header.phpを作成
まず、header部分を読み込ませるためにheader.phpを作成したいと思います！
該当部分は見本ソースでいう
<!DOCTIPE html> <html lang="ja"> <head> <title>サンプルページ</title> <meta charset="UTF-8"> <wp_head(); ?> </head> <body> <div id="header"> <header> ヘッダー </header> <nav> <ul> <li>ナビ</li> <li>ナビ</li> <li>ナビ</li> <li>ナビ</li> </ul> </nav> </div>
この部分になります。
この部分をindex.phpから切り取り、切り取ったものを貼り付けた新規ファイルをheader.phpとして保存します。これでheader.phpが完成です！
続いてsidebar.phpを作りたいと思います！見本のソースコードの
<sidebar> サイドバー </sidebar>
上記部分を切り取り、新規ファイルにペーストしてsidebar.phpとして保存してあげます。
続いてfooter.phpを作成したいと思います！見本のソースコードでいう
<footer> フッター </footer> <wp_footer(); ?> </body> </html>
この部分を切り取り、新規ファイルに貼り付けたあとにfooter.phpとして保存してあげて完成となります！
4. 各パーツを読み込ませる
以上で各パーツを分割できたので、これを読み込ませる作業に入っていきます！ここまでの作業を行うと、index.phpは
<div id="content"> コンテンツ </div>
という風になっていると思います。
ここから、各パーツを読み込ませる作業に移っていきます。
header.phpを読み込ませるには
<php get_header(); ?>
このテンプレートタグを読み込ませたい部分に記述してあげます。
続いてsidebar.phpを読み込ませるには
<php get_sidebar(); ?>
を記述してあげます。
そして最後にfooter.phpを読み込ませるには
<php get_footer(); ?>
を記述してあげます。
以上のテンプレートタグをindex.phpに記述してあげると
<?php get_header(); ?> <div id="content"> コンテンツ </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
このようになると思います！
そしてこのように記述してあげることで各パーツを読み込み、表示してくれるようになります。
※ここまでの作業を行い、編集する前のindex.phpの時と同じデザインでサイトが表示されるようになればOKです！
WordPressでサイトを制作する上で、今回紹介したような各パーツを読み込ませるにはテンプレートタグを使えば実現可能なので、実際に使ってみてはいかがでしょうか(^-^)
