LoginSignup
0
0

Wordpressのテンプレート階層まとめ

Posted at

Wordpressテンプレート階層

業務でWordpressを使用することになり、最近本格的に学習を始めました。テンプレート設計時に階層をわかりやすくまとめておくと便利そうなので、忘れないうちにまとめてみます。

初めに

初学者のため、誤りや拙い点があるかと思います。明らかな間違いがあるときにはコメントをいただけると嬉しいです。

テンプレート階層とは?

モジュール式の再利用可能なファイルで、WordPress サイトの Web ページを生成するために使用されます。テンプレートファイルには、ヘッダーやフッターのテンプレートなど、サイトのすべてのページで使用されるものと、特定の条件下でのみ使用されるものがあります。

簡単にまとめると、どの画面で何を表示するかを指定しているテンプレートのことのようです。公式の図解を見ると、ファイル名によって優先順位があり、階層が組まれています。対応するファイルがない場合はindex.phpが表示されます。

階層の種類一覧

以下に例として、一般的なHPの例を考えてページを当てはめています。

  • 例)ページ名
    • 優先度1
    • 優先度2
    • 優先度3
    • index.php

  • トップ
    • front-page.php
    • home.php
    • index.php

役割:サイトのメインページとして機能し、訪問者が最初に目にするページ。最新の投稿一覧や固定のトップページを表示する。

使用例:トップページ、最新の投稿一覧(ブログサイトでよくある)


  • お知らせ
    • single-{post-type}.php * post-type:カスタム投稿タイプ
    • single.php
    • index.php

役割:個々のブログ投稿などを表示するために使用する。

使用例:ブログ記事や商品情報の詳細表示


  • カテゴリー
    • category-{slug}.php * slug:カテゴリー名(小文字)
    • category-{id}.php * id:カテゴリーの固有のID
    • category.php
    • archive.php
    • index.php

役割:特定のカテゴリーに属する投稿を一覧表示するページ。
例)ブログ記事に付加されているカテゴリーを参照し、共通の記事だけを集めたページ

使用例:ニュース記事のカテゴリー別アーカイブ、商品カテゴリーごとの表示

slugとidの違い

  • スラッグテンプレートはURLに表示されるテキストをそのまま使用するので、人が読んで理解しやすく、サイトの構造を簡単に把握できる
  • IDテンプレートはスラッグ名が変更されても一貫して同じカテゴリーに適用される

基本はslugを使用し、スラッグが頻繁に変更される可能性場合のみidを使用する。


  • タグ
    • tag-{slug}.php * slug:カテゴリー名(小文字)
    • tag-{id}.php * id:カテゴリーの固有のID
    • tag.php
    • archive.php
    • index.php

役割:特定のタグが付けられた投稿を一覧表示するページ。

使用例:関連するトピックの記事、商品をグルーピングして表示


  • 変更がないページ(概要、採用情報など)
    • page-{slug}.php * slug:ページ名(小文字)
    • page-{id}.php * id:ページの固有のID
    • page.php
    • index.php

役割:固定ページを表示する。複数ページあることがほとんどのため、page-{slug}.phppage-{id}.php といったより具体的なテンプレートを使うことが多い。

使用例:会社情報、サービス詳細、お問い合わせフォームなど。

スラッグを使用した例が以下になります。結構わかりやすいですね。

  • About: page-about-us.php
  • Contact: page-contact.php
  • Service: page-service.php

お問い合わせ画面について
フォームを使用するページについてはプラグインを使用すると思うので、そもそもファイルとして保持しないことも多いです。プラグインの設定を行い、固定ページ画面でフォームのショートコードを埋め込みます。


  • 404エラー(対応していないURLのリンクへ遷移した時)
    • 404.php
    • index.php

役割:ユーザーが存在しないURLにアクセスした際に表示されるエラーページ。

使用例:エラーメッセージの表示、サイト内の有用なリンクへの誘導。


このほかにもカスタムタクソノミーページやオーサーページ、日付ページ、検索結果ページなどの分類がされていますが今回は省略します。
詳しくは公式HPを参照してください。

処理の仕組み

WordPress は、クエリ文字列 を使用して、どのテンプレートまたはテンプレートのセットを使用してページを表示するかを決定します。

簡単に言うと、WordPress はテンプレートの階層を検索して、一致するテンプレートファイルを見つけて、画面に表示します。

  1. すべてのクエリ文字列をクエリタイプにマッチさせ、どのページがリクエストされているかを判断
  2. テンプレート階層で決められた順序によりテンプレートを選択
  3. 現在のテーマのディレクトリ内で特定の名前のテンプレートファイルを探し、階層で指定された最初にマッチするテンプレートファイルを使用

つまり、最上位の階層から順に一致する名前のテンプレートファイルを探し、見つからない場合は次の階層に移動する、といったことを繰り返しているのですね。

以下の例を挙げます。

  • カテゴリースラッグ:cat
  • カテゴリID:6
  1. WordPressはcategory-cat.phpという名前のテンプレートファイルを探索
  2. category-cat.phpが見つからない場合、category-6.phpを探索する
  3. category-6.phpが見つからない場合、category.phpを探索する
  4. category.phpが見つからない場合、archive.phpを探索する
  5. archive.phpが見つからない場合、index.phpで処理

最後に

長くなってきたので今回はここまで。次回はincludeやテンプレートパーツファイルについてまとめていきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0