カスタム投稿・カスタムタクソノミー・カスタムフィールドについて

WordPressにはデフォルトで「投稿」や「固定ページ」が存在していますが、実際のサイト運用において、例えば

  • 商品一覧
  • 店舗一覧
  • 不動産一覧

などのページを別で作成したいケースが出てきた場合に、「カスタム投稿」を作成するという方法があります。
カスタム投稿の中でカテゴリ分けをしたいときには、「カスタムタクソノミー」を作成して、分類分けをおこなうことができます。
「カスタム投稿」の中には、独自の入力項目を「カスタムフィールド」で設定することができます。

例:
「商品一覧」というカスタム投稿を作成
→その中に「食品」「日用品」「文具」などといった分類(カスタムタクソノミー)を作成
→「商品一覧」の中に、「商品名」・「メーカー名」・「金額」などをカスタムフィールドで設定

ここでは、プラグインを使用した「カスタム投稿」「カスタムフィールド」「カスタムタクソノミー」の作り方をお伝えしていきたいと思います。

プラグインのインストールと有効化

Custom Post Type UI」と「Advanced Custom Fields」の2つのプラグインをインストールして有効化します。

STEP
1

Custom Post Type UIで「カスタム投稿タイプ」の作成

まずは、
CPTUIで「カスタム投稿タイプ」を作成します。

管理画面のメニューから、
CPT UI>投稿タイプの追加と編集を選びます。

投稿タイプスラッグ
半角英字で文字を入力します。
今回は「shop_list_test」としました。

複数形ラベル/単数形ラベル
名称を入力します。
今回は「テスト店舗一覧」としました。

※他にも様々な設定項目がありますが、必須項目は上記のみとなります。

すべて入力したら、「投稿タイプを追加」をクリックします。

追加すると、管理画面のメニューに
テスト店舗一覧」が追加されていることがわかります。

STEP
2

Custom Post Type UIで「カスタムタクソノミー」の作成

次に、
CPTUIで「カスタムタクソノミー」を作成します。

管理画面のメニューから、
CPT UI>タクソノミーの追加と編集を選びます。

タクソノミースラッグ
半角英字で文字を入力します。
今回は「business_type_test」としました。

複数形のラベル/単数形のラベル
名称を入力します。
今回は「テスト業種」としました。

利用する投稿タイプ
先ほど作成した「テスト店舗一覧」の中で使いたいので、そこにチェックを入れます。

※他にも様々な設定項目がありますが、必須項目は上記のみとなります。

すべて入力したら、「タクソノミーの追加」をクリックします。

追加すると、管理画面のメニューの「テスト店舗一覧」の中に「テスト業種」が追加されていることがわかります。

※タクソノミーの並び順という項目が表示されているのは、「Category Order and Taxonomy Terms Order」というプラグインを使って、タクソノミーの並び順の入れ替えができるようにしているためです。

STEP
3

Advanced Custom Fieldsで「カスタムフィールド」の作成

次に、
Advanced Custom Fieldsで
カスタムフィールドを作成
します。

管理画面のメニューから、カスタムフィールド>新規追加を選びます。

フィールドグループを編集
カスタムフィールドの名前を入力します。
今回は「テスト店舗カスタムフィールド」とします。

フィールドタイプ
プルダウンから選択します。
今回は入力欄を作りたいので「テキスト」を選択します。

フィールドラベル
編集ページで表示されるフィールドタイプの見出しとなります。
今回は「店舗名」とします。

フィールド名
半角英字で設定します。
PHPコードでの呼び出しに使います。

入力できたら、「Add Field」をクリックします。

同じ手順を繰り返しながら、必要なフィールドを作成していきます。

このような形でテスト店舗のカスタムフィールドを作成します。

必要なフィールドの作成ができたら、下にスクロールします。

設定を図のように、
投稿タイプ 等しい テスト店舗一覧
と設定します。

ここまでできたら、「Save Changes」をクリックして、設定を保存します。

STEP
4

カスタムタクソノミー「テスト業種」に分類を登録する

続いて、先ほど作成した、
カスタムタクソノミー「テスト業種」の中身を作成していきます。

管理画面から、
テスト店舗一覧>テスト業種を選択します。

テスト業種のカスタムタクソノミー画面が出てきます。

まずは親業種を作成します。
ここでは「親業種1」とします。

名前:「親業種1」
スラッグ:「親業種1」
と入力します。

親テスト業種は今回は存在しないので、「なし」を選択します。

※親テスト業種がある場合の方法は、この後説明します。

入力できたら、「新規テスト業種を追加」をクリックします。

追加すると、一覧に追加した分類が表示されていることがわかります。

次に子業種を作成します。

先ほどと同様の手順で、名前、スラッグを入力します。

親テスト業種で「親業種1」を選択します。

入力できたら、「新規テスト業種を追加」をクリックします。

追加すると、一覧に「子業種1-1」が追加されていることがわかります。

先ほど、親テスト業種に「親業種1」を選択したことで、「ー子業種1ー1」となっていて、分類に親子関係ができていることがわかります。

同様の手順を繰り返し、2つの親業種とそれぞれの子業種3つを作成しました。

STEP
5

カスタムフィールドの中身を作成する

管理画面から、
テスト店舗一覧>新規追加 を選択します。

新規テスト店舗の追加画面になります。

先ほど作成したカスタムフィールドの項目が表示されていることがわかります。

情報を入力していきます。

先ほど作成したタクソノミーを選択することができるので、チェックをつけます。

(A店は親業種1、子業種1にチェックをつけました)

入力とチェックが終わったら、公開をクリックします。

同様の手順を繰り返し、
今回は6店舗の情報を登録しました。

STEP
6

カスタムタクソノミーで「絞り込み検索」も可能です

絞り込み検索のイメージ

カスタムフィールドに値を入力し、カスタムタクソノミーを選択することで、
「検索機能をつけて、カスタムフィールドの検索をおこないたい!」という場合に、カスタムタクソノミーでの絞り込み検索をおこなうこともできるようになります。

検索機能についての記事はこちら

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)