＊Web Design 覚え書き＊

WordPress

index.phpをパーツテンプレートに分割する　[WordPressテーマ作成の手順3]

WordPressのテンプレートファイルには、表示用テンプレートとパーツテンプレートがある。

全ページ共通の部分（ヘッダー・サイドバー・フッターなど）は、それぞれパーツテンプレートにしておき、表示用テンプレートにそれを呼び出すテンプレートタグを貼る。
そうすれば、例えばヘッダーを修正したいとき、header.phpファイルを修正するだけで、全ページが自動で変更できる。これがWordPressの醍醐味。

前々回の
最初に使うテンプレートタグ bloginfo()　[WordPressテーマ作成の手順-1]
で作った index.phpを、今回はパーツテンプレートに分割する。

本日のINDEX

スポンサーリンク

パーツテンプレートの種類と分割計画

共通部分のHTMLソースをパーツテンプレートに分割していくので、コーディング時にどのような分割になるか、ある程度想定しているはず。

具体例としてはこんなかんじ。

<!doctype html>
<head></head>
<body>
<div id="contents-wrap">
<header></header>
<div id="container"> <!-- ← #containerの開始タグを含めている -->
<!--------------ここまでheader.php--------------->

<article id="main-content"></article>

<!--------------ここからsidebar.php--------------->
<aside id="sidebar"></aside>
<!--------------ここまでsidebar.php--------------->

<!--------------ここからfooter.php--------------->
</div><!--container END--> <!-- ← #containerの終了タグを含めている -->
<footer></footer>
</div><!--contents-wrap END-->
</body>
</html>

header.php、sidebar.php、footer.phpは、WordPressであらかじめ決められているパーツテンプレート。まずはこれで分割。そのほか任意でパーツテンプレートを自分で作ることもできる。

ファイル名が決まっているパーツテンプレート

パーツテンプレートには、WordPress側であらかじめファイル名を決めているものがある。
これらは表示用テンプレートで呼び出すためのテンプレートタグも決められているので便利。

  • header.php ヘッダー用。呼び出しは <?php get_header(); ?>
  • sidebar.php サイドバー用。呼び出しは <?php get_sidebar(); ?>
  • footer.php フッター用。呼び出しは <?php get_footer(); ?>
  • searchform.php 検索フォーム用。呼び出しは <?php get_search_form(); ?>
  • comments.php コメントエリア用。呼び出しは <?php get_comments_template(); ?>

任意で作るパーツテンプレート

自分の好きなファイル名でパーツテンプレートを作ることもできる。

例えば content.php なら、呼び出しは <?php get_template_part(‘content’); ?>

任意で作るパーツテンプレートは、後々よく使う。
例えば、投稿ページ用のテンプレートを作るとき、記事本文の部分を書き出す部分は content.php としてパーツテンプレートにしておき、呼び出したい部分に上記のテンプレートタグを使う。
共通部分はパーツテンプレートにしていくのが WordPressを使うコツかも。

本ブログでは、最初の時点ではこのようにパーツテンプレートを分割した。
広告表示用部分を自作のパーツテンプレにしている。

index.phpをパーツテンプレートに分割する

ここからは、index.phpをパーツテンプレートに分割する手順。

sidebar.phpを切り出す

サイドバー部分は、HTMLソース的にもまとまっていて切り出しやすいので最初に。
index.phpの長いソースを整理して行く上で、自分がやりやすい部分から切り出したほうが良い。

  1. index.phpをコピーして、ファイル名をsidebar.phpにする
  2. sidebar.phpの、サイドバー部分以外をすべて削除（例：<aside id="sidebar">から</aside>までだけを残し、他を削除する）
  3. index.phpのサイドバー部分を削除し、
    替わりにテンプレートタグ <?php get_sidebar(); ?> を記述
  4. ブラウザでプレビューし、表示が前と変わっていないことを確認

header.phpを切り出す

ヘッダー部分は、プレビュー上のヘッダー部分だけでなく、HTMLソースのhead要素など冒頭部分を全部含めて。
コンテンツとサイドバーを一緒に囲む要素があるなら、その要素の開始タグまではheader.phpに含める。（終了タグはfooter.phpに担ってもらう）

  1. さきほどのindex.phpを再びコピーして、ファイル名をheader.phpにする
  2. header.phpの、コンテンツが始まる箇所以降を全部削除（ヘッダーとして共有したいソース部分を残す）
  3. index.phpのheader.phpにした部分を削除して、
    替わりにテンプレートタグ <?php get_header(); ?> を記述。
  4. ブラウザでプレビューし、表示が前と変わっていないことを確認

footer.phpを切り出す

同様の手順でフッター部分を切り出す。
コンテンツとサイドバーを一緒に囲む要素があるなら、その要素の終了タグはfooter.phpに含める。

  1. さきほどのindex.phpをまたコピーして、ファイル名をfooter.phpにする
  2. footer.phpの、header.php、sidebar.php、コンテンツ部分を削除
  3. index.phpのfooter.phpにした部分を削除して、
    替わりにテンプレートタグ <?php get_footer(); ?> を記述
  4. ブラウザでプレビューし、表示が前と変わっていないことを確認

ここまでで、index.phpはこのように、
コンテンツ部分のソース以外はテンプレートタグになっている。

<?php get_header();?>

<article id="main-content"><!-- コンテンツ部分 --></article>

<?php 
get_sidebar();
get_footer();?>

残ったコンテンツ部分も、今後、記事の内容を出力するように作り替えていく。

次回からは、分割したパーツテンプレートに WordPressのテンプレートタグを追加して、データベースの内容を表示できるように改造していく。次回はsidebar.phpを編集。

関連記事

WordPressの Embedカードのリンクを別ウィンドウで開く（PCのみ。スマホ・タブレットはそのまま）

WordPressの Embedカード（ブログカード）のリンクは、デフォルトでは同ウィンドウで開くようになっていますが、これを別ウィンドウ（別タブ）で開くように [記事を読む]

WordPressの Embedカードのスタイルを編集する方法2つ

前回の記事で、WordPress 4.5 の Embedカード（ブログカード）の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、 [記事を読む]

WordPress4.5で Embedカードの PHPファイルの構造がだいぶ変わったみたい

前回から WordPressの Embedカード（ブログカード）について調べたことをメモっています。 今回は Embedカードの PHPファイルの構造について [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^