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の隣やワイヤーフレームにメモ書きした状態になっている、はずです。
どんどんいきましょう。
次回はカスタムフィールドの話です。