WPサイトの設計について(テンプレート編)

WPサイトを作る時にどう設計するか?何を考えているか?についての連載4回目です。はじめにサイトマップをよく見て投稿タイプについて考えURLについて考えてきて、今度は各ページを出力するテンプレートについてのお話です。長い連載になってきました。でもこれを含め残り2、3回ぐらいだと思います。どうぞよろしければお付き合いください。

テンプレートってなんのこと?

WPでは、投稿タイプごとに、管理画面で記事内容を入力できます。入力した内容をデザインに合わせて「出力」することでサイトが見られる、ということになります。見えるサイトのことを「フロントエンド」と呼んだりします。WP管理画面を「入力装置」とし、実際にサイトとしてユーザーが見る「フロントエンド」の間にあるのが「テーマ(テンプレート)」です。テンプレートが入力された内容を「出力」しない限り、管理画面で何を入力してもサイトは真っ白なままです。

テーマテンプレートを作る方法自体は、ここでは紹介しません。ググりましょう。個人的には、WP標準の「twentyなんとか」というテーマをもとにして、不要な部分はざくざく消すなどして、カスタマイズしています。この記事では、これまで考えてきた設計をもとにした場合、どんな「テンプレート」があればサイトを組んでいけそうか?ということを考えていこうという趣旨で書いてます。

なんじゃそれ、と思った方は是非続きをどうぞ。

このサイトを例にどんなテンプレートが必要か考える

このサイトは、ほぼほぼブログサイトのようなものなのであまり参考にならないかもしれませんが、実際に見えるものがある方がよかろかと思うので、例にしたいと思います。

簡単に、このサイトの要件をまとめます。
①ブログがある
②トップページを最新の投稿を示すページではなく、固定ページ表示
③ブログの記事一覧のページに固定ページを利用
④勉強会の紹介をするページがある(タクソノミー2種)
⑤固定ページを利用している
⑥お問い合わせフォームがある(確認、サンクスページなし)
⑦サイト内検索を利用している

サイトで利用している投稿タイプとタクソノミーは以下の通り。
・固定ページ(トップページと投稿一覧の他は共通のテンプレート)
・投稿(カテゴリ、月別アーカイブを利用)
・勉強会用カスタム投稿(スラッグ:lesson)
・カスタムタクソノミー2種(スラッグ:lesson_cat、lesson_status)

では、各ページを表示しているテンプレートを列挙していきます。

固定ページ

page.php  固定ページで入力した記事で、フロントページ(トップページ)と投稿一覧ページ以外のページを出力するためのテンプレート
http://learning.ccc-labo.net/about/
front-page.php  フロントページ(トップページ)のテンプレート

ようこそ


トップページに固定ページを表示する方法について

home.php  投稿一覧のページ(ブログ記事の一覧ページ)を表示するためのテンプレート
http://learning.ccc-labo.net/blog/

固定ページは、それぞれのページのテンプレートを別々のものにすることも可能です。その場合、各ページのスラッグ名を利用して、以下のようなテンプレートになります。
page-about.php
などです。
別のテンプレートを充てたいものだけ作成しておけば、該当するテンプレートがないページはすべて、page.phpテンプレートに応じて出力されます。

投稿のシングルページとアーカイブページ

single.php  投稿で入力した記事の個別のページを出力
このページのこと
date.php  月別アーカイブのページを出力
http://learning.ccc-labo.net/2017/10/
category.php  カテゴリー別アーカイブのページを出力
http://learning.ccc-labo.net/category/thinking/

カテゴリー別のアーカイブはさらに細かくカテゴリー別にテンプレートを分けることもできます。上記のカテゴリーアーカイブのページの、個別のテンプレートを作る場合は、
category-thinking.php
と、なります。

勉強会のシングルページとアーカイブ

single-lesson.php  勉強会のシングルページ
http://learning.ccc-labo.net/lesson/design1/
archive-lesson.php  勉強会記事の一覧
http://learning.ccc-labo.net/lesson/

カスタムタクソノミーのアーカイブ

taxsonomy-lesson_cat.php  勉強会の種類別アーカイブ(スラッグ:lesson_cat)
http://learning.ccc-labo.net/lesson_cat/wordpress/
(しまった、記事がないw)
taxsonomy-lesson_status.php  終了した勉強会のアーカイブ(スラッグ:lesson_status)
http://learning.ccc-labo.net/lesson_status/done/

これらはさらに細かくタクソノミーのタームごとにテンプレートを分けることもできます。終了した勉強会のアーカイブのページの場合であればそのテンプレートは、
taxsonomy-lesson_status-done.php
と、なります。

その他のテンプレート

header.php  ヘッダー用テンプレート
footer.php  フッター用テンプレート
sidebar.php  サイトバー用テンプレート
404.php  404ページ用のテンプレート
search.php  検索結果用のテンプレート
http://learning.ccc-labo.net/?s=WPサイトの設計
index.php  形だけでも必要なテンプレート

このサイトでは大体このくらいのテンプレートを利用しています。

共通部分をまとめたり、WPのテンプレート階層を利用して、最低限の条件分岐だけで済む場合などは、テンプレートの数自体を減らすことはできます。それらはワイヤーフレームやデザインが完成しないと判断できないので、確定してから減らし、最初は全て作るつもりで検討します。

まとめ

ようやくテンプレートまでやってきました。この辺りは、資料としては要件定義、サイトマップ、ワイヤーフレームを元に考えてきています。サイトマップにURLを書き込んで、さらにそれを出力するためのテンプレートをURLの隣やワイヤーフレームにメモ書きした状態になっている、はずです。
どんどんいきましょう。
次回はカスタムフィールドの話です。

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です