WordPress商品カタログの作り方｜カスタム投稿タイプとタクソノミーで効率管理

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

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

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

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

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

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

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

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

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

標準の固定ページ

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

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

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

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

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

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

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

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

投稿（posts）とカスタム投稿タイプ

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

投稿（posts）のテンプレート階層

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

例えば「カテゴリ（スラッグは標準で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の商品一覧が表示されます。

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

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

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

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

管理画面に投稿・固定ページ以外の入力フォームを追加

タクソノミを追加してしまえば、あとはカテゴリに項目を追加するのと同じように、タクソノミにも項目の追加ができます。

投稿タイプ（Custom Post Type UI）

商品カタログや不動産物件情報など、WEBサイトのコンテンツフォーマットに合わせて、プラグインからpost_typeを追加することで、管理画面に専用入力フォームを作成します。

フィールド（Advanced Custom Fields）

デフォルトの投稿記事や固定ページ、カスタム投稿フォームに入力フィールドを追加し、WordPressのクエリで出力する関数を提供してくれます。

タクソノミ（Custom Post Type UI）

カテゴリとタグの違いは階層化の可否ですが、投稿記事でしか使えないので、カスタム投稿をカテゴリのように階層化するにはカスタムタクソノミを使います。

投稿記事を分類化するということは、カテゴリ項目（会計システム・生産管理システム etc.）を投稿に紐付けるということであり、同じようにカスタム投稿を分類化するには、まず分類自体をタクソノミとして定義してから、タクソノミ項目をカスタム投稿に紐付けます。

Advanced Custom Fieldの関数でフィールドの値を取得

通常はカスタムフィールド作成プラグインの定番Advanced Custom Field関数を使用します。

カスタムフィールドの値は、テンプレートタグget_post_meta()関数で取得可能です。

<?php echo get_post_meta($post->ID, 'price', true); ?>

数値・テキスト

基本はthe_field()関数で表示、get_field()関数で取得します。

<?php the_field('price'); ?>
<?php echo get_field('price'); ?>

画像

WordPressで画像を挿入したときに、オリジナルのサイズ以外にサムネイル・中・大の3種類のファイルが自動生成され、メディアとして保存されます。

get_field()関数で画像から取得できる$imageは画像IDです。

$image=get_field('picture');  //画像ID
$url=$image['size']['medium']; //中サイズ画像URL
$width=$image['size']['medium-width']; //中サイズ画像横幅
$height=$image['size']['medium-height']; //中サイズ画像縦幅

チェックボックス

チェックボックスの値は配列で取得しますので、例えば自動巻き、クォーツ、手巻きという3つのチェックボックスの配列の値を取得します。

$spring=get_field('spring');
foreach($bed as $key=>$value){
	echo $value;
}

よくある質問｜WordPress商品カタログ作成

本稿の内容に沿って、繰り返し出る問いを短く整理します。

WordPressで商品カタログを作成するにはどうすれば良いですか？

WordPressでは、商品カタログを作成するためにカスタム投稿タイプを利用します。これにより、商品名やサイズ、価格などの共通情報を効率的に管理できます。タクソノミーを使って商品を分類することも可能です。

カスタムフィールドを使って商品情報を管理する方法は？

カスタムフィールドを使うことで、商品ページに必要な情報を入力画面に追加できます。これにより、商品名や価格などの情報を一元管理し、HTMLでの手動入力を避けることができます。Advanced Custom Fieldsプラグインを使うと、さらに柔軟なフィールド管理が可能です。

固定ページと商品カタログの違いは何ですか？

固定ページはタクソノミーが使えないため、商品カタログとしては不向きです。一方、商品カタログはカスタム投稿タイプを利用し、価格やサイズなどのタクソノミーを定義することで、商品情報を効率的に分類・管理できます。