【WordPress】一覧や詳細ページに別々のテンプレートを割り当てる

どうも松井です。

WordPressでは、固定ページで別々のテンプレートが適用できたように、一覧ページでも別々のテンプレートをカンタンに適応することができます。

例えば、お知らせや実績で全体的なレイアウトを変更したいと思う時に有効です。今回は、一覧だけではなく、詳細のフォーマットとの割り当て方法も纏めています。

大まかな流れ

流れは、3ステップでカンタンです。

  • カテゴリーのテンプレートを作成する
  • ループ処理を行うテンプレートの作成
  • シングルページのテンプレートを作成する

カテゴリーのテンプレートを用意する

まず一覧のテンプレートは、category.phpで書いていくため、フォーマットを作りたい分だけ作成します。名前は、category-{slug}.phpの{slug}部分をわかりやすい名前に変更して作成します。

ちなみに{slug}部分が、urlのhttps://xxxxxx.jp/works/の/works/とイコールとなるため、slug名にはカテゴリ名をつけましょう。

これで、お知らせや実績でのレイアウトを変更できますが、繰り返し処理する部分も変更する必要があるので、loop.phpをみていきます。

ループ処理を行うテンプレートの作成

loop.phpは、一覧ページで繰り返し表示させたいもの記述するため、こちらもカテゴリー同様、フォーマットが必要な分だけ作成します。名前は、loop-{slug}.phpの{slug}部分を変更します。カテゴリーの複製と同じですね。名前もカテゴリーと同じ名前にするとわかりやすいかと思います。

これで一覧部分の表示フォーマットは、別々のテンプレートを適応できます。一覧が変更できれば、詳細ページも変更してきましょう。

シングルページのテンプレートを作成する

シングルページもカンタンで、single-{slug}.phpを作成して{slug}部分を変更するだけ。こちらもループ,カテゴリーの名前と統一したもので作成します。

これで、カテゴリー→ループ→シングルまでの流れを作成でき、カテゴリーごとに表示を切り替えることができます。

松井 貴史

松井 貴史

ルビーデザイン代表。プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。

類似記事

webdesign

WEBデザイナーとしてご飯を食べれるようになるためにやった事

MONOCREWのトップページを変更。探し物を一覧化してマッチするように改善!

GridGuidを使用してグリッド設計プロセスを自動化する

失敗しないWEBサイト引越しの注意点まとめ