WordPressによるWEBサイト開発4 - 固定ページと投稿記事の派生テンプレート

2012/05/25

WordPress

商品ページは投稿記事の入力画面に、共通情報用の入力フィールドをカスタムフィールドで追加し、「投稿」というタイトルを「商品登録」に変えて作成することもできますが、WordPressはコンテンツ作成を「投稿(post)」「固定ページ(page)」とは違う第三の投稿タイプ「商品(post_type)」として定義できます。

ジャカルタ

インドネシアのITサービス

インターネット技術の急速な発展と普及により、優秀なIT人材を輩出することで知られるジャカルタのビヌス大学(BINUS)やバンドゥンのバンドゥン工科大学、インドネシアコンピューター大学(UNIKOM)の学生の多くがインターネット・WEB業界やソフトウェア業界を志望するようです。

続きを見る

商品カタログが投稿や固定ページで対応しにくい理由

固定ページはタクソノミ(カテゴリやタグなど)が効かないのではじめから対象外ですが、投稿記事の場合は過去のストック記事をカテゴリで切って表示することができるので、商品カタログとしても使えそうです。

投稿記事のメインクエリ内の日付や著者を削除して、本文欄に商品情報を配置していってもいいわけですが、商品名・サイズ・価格など、どのページにも必ず必要になる情報を、膨大な数の全商品ページにHTMLでコーディングするのは非効率このうえない。

だったら個別記事が持つカテゴリやタグといったタクソノミ機能を利用しながら、全商品ページで必要になる共通の情報は、管理画面の投稿画面からタイトルやコンテンツと同じように公開・更新できるようにして、作業負荷を軽減し入力ミスを防止したい。

投稿記事の入力画面に、共通情報用の入力フィールドをカスタムフィールドで追加し、「投稿」というタイトルを「商品登録」に変えるイメージになりますが、WordPressはこの管理画面からのコンテンツ作成を「投稿(post)」「固定ページ(page)」とは違う第三の投稿タイプ(post_type)として定義できます。

また標準ではカテゴリとタグという2つのタクソノミが利用できますが、商品分類の切り口は、価格・サイズ・在庫数量・色・材質・・・というように普通に3つ以上ありますので、第三の分類「商品カタログ」をタクソノミとして定義できます。

  • コンテンツタイプごとのタクソノミ
    1. 固定ページ : タクソノミ使用不可
    2. 投稿 : カテゴリー・タグ
    3. 商品カタログ : 価格・サイズ・在庫数量・色・材質・・・

固定ページの作成方法3種類

WEBサイト開発では、テーマのページのレイアウトは標準2カラムでも、固定ページで作るカタログのレイアウトは1カラムでスペースを広くとりたいというケースが出てきますが、固定ページの作成方法は3つに分類されます。

  • 固定ページのURL
    "https://bahtera.jp/contact/"

    1. 標準の固定ページ(page.php)
    2. 独自HTML(page-任意のページスラッグ.php)を固定ページ化
    3. カスタムテンプレート(カスタムテンプレートスラッグ.php)

固定ページの作成方法

 

標準の固定ページ

WordPressのデフォルト固定ページテンプレートpage.phpを使用します。

カスタムテンプレートを使用

カスタムテンプレートとは、page.php以外の任意の名前で作成した固定ページ用のレイアウトテンプレートであり、テーマフォルダに配置し、冒頭のコメントの「Template Name:」に続く形でテンプレート名を記述することにより、固定ページ作成画面の「テンプレート」のドロップダウンから選択することができます。

固定ページの作成方法

 

レイアウトパターンを使わず独自HTMLファイルを固定ページ化する

既存のHTMLファイルのファイル名を「page-スラッグ名.php」として、固定ページ作成画面の「スラッグ」のスラッグ名とマッチさせることで固定ページ化することもできます。

この場合のコンテンツ部分は空のままで、「テンプレート」にはデフォルトテンプレートを選択しておけばいいのですが、既存HTMLファイルの名前を変えただけなので、コンテンツもPHPファイルの中に記述されたままであり、検索に引っ掛かりません。

よって検索に引っ掛かるためには、固定ページのコンテンツ部分に、PHPファイルの中に記述されている内容をコピーして、WordPressのデータベースに保存することで、検索に引っ掛かるようにします。

カスタムテンプレートを使っても、独自HTMLファイルを固定ページ化しても、アクセスするURLはともにドメインの後ろに同じスラッグが付きますが、同一スラッグ名の場合は固定ページのテンプレート階層の優先順位はカスタムテンプレートが上です。

  • カスタムテンプレートスラッグ.php(カスタム)>page-任意のページスラッグ.php(独自HTML)>page.php(標準)>index.php

投稿(posts)とカスタム投稿タイプ

まずアーカイブとは一覧表の意味であり、WordPressのデフォルトの投稿(posts)の場合は、トップページ(front-page.php)が投稿記事(posts)の一覧表であることが多いと思います。

投稿(posts)のテンプレート階層

  1. single.php>index.php
    (https://bahtera.jp/スラッグ)
  2. front-page.php>home.php>index.php
    (https://bahtera.jp/)
  3. category-スラッグ.php>category.php>archive.php>index.php
    (https://bahtera.jp/category/スラッグ/)
  4. tag-スラッグ.php>tag.php>archive.php>index.php
    (https://bahtera.jp/tag/スラッグ/)

カスタム投稿タイプとカスタムタクソノミーのテンプレート階層

タクソノミとは分類方法であり、標準で利用できる分類方法は、カテゴリとタグの2つですが、カスタムタクソノミによって、分類方法を追加することができます。

また標準で利用できるコンテンツタイプは、投稿・固定ページ・メディアの3つですが、カスタム投稿タイプによって、コンテンツタイプを追加することができます。

  • single-投稿タイプスラッグ.php>single.php>index.php
    (https://bahtera.jp/投稿タイプスラッグ/スラッグ)

タクソノミは投稿・固定ページ・メディア・カスタム投稿タイプのいずれかに追加できます。

カスタム投稿タイプとカスタムタクソノミーのテンプレート階層

カスタム投稿タイプのアーカイブ(一覧)は標準ではないので、カスタムタクソノミを利用して、タクソノミごとに表示させます。

  • taxonomy-タクソノミスラッグ-スラッグ>taxonomy-タクソノミスラッグ.php>taxonomy.php>archive.php
    (https://bahtera.jp/タクソノミスラッグ/スラッグ/)

例えば「カテゴリ(スラッグは標準でcategory)」に「WEB開発(スラッグはweb)」を追加するのと同じように、「ブランド(スラッグはbrand)」というタクソノミを作り、「Rolex(スラッグはrolex)」というブランドを追加する場合は、カテゴリのアーカイブが「https://bahtera.jp/category/web/」となるのと同じように、アーカイブのURLは「https://bahtera.jp/brand/rolex/」になります。

WordPressループがtaxonomy-タクソノミ-スラッグ.phpというファイル名を認識すると、the_post()でグローバル変数$postに取得する投稿は、自動的にpost_typeが該当スラッグのタクソノミの投稿のみになり、Rolexの商品一覧が表示されます。

  1. https://bahtera.jp/category/ NG
  2. https://bahtera.jp/category/html-css/ OK カテゴリ
  3. https://bahtera.jp/post/ NG
  4. https://bahtera.jp/ OK 個別投稿(post)一覧画面
  5. https://bahtera.jp/custom/ NG?カスタム投稿タイプ 一覧画面