この章で学ぶこと。

前回は、「Contact Form 7」や「Breadcrumb」などのプラグインを入れることで、お問い合わせのページ、パンくずリストを簡単に追加できました。こちらの講座は、DAY.4の続きです。必ずDAY.1から開始し、順番に進めてくださいね。▶︎ DAY.4は、こちらから

カスタム投稿タイプ(Custom Post Type)

制作実績(WORKS)のページを追加する

サンプル株式会社が手がけた制作実績が、一覧で見れるようにページを追加します。スタッフが、更新しやすいよう投稿から、追加ができるように実装します。

WordPressには「投稿」と「固定ページ」がありますが、それ以外に「制作実績」という専用の投稿ができるようにします。オリジナルの投稿タイプ(カスタム投稿タイプ)を作成するには、プラグイン「CPT UI(Custom Post Type UI)」を利用します。管理画面から「プラグイン」を開き、CPT UI(Custom Post Type UI)をインストールして有効化します。

CPT UI(Custom Post Type UI)

  1. WordPressの管理画面から 「プラグイン」>「新規追加」 をクリックします。
    2. 検索窓に 「Custom Post Type UI」 と入力します
    3. 検索結果に表示されたら 「今すぐインストール」 をクリックし、完了したら 「有効化」 します。
    4. 有効化すると、管理画面のメニューに 「CPT UI」 という項目が追加されます。

「カスタムタクソノミー」とは?

WordPressをカスタマイズしていくと、標準の「カテゴリー」や「タグ」だけでは綺麗に分類できないケースが出てきます。そこで、自分好みに新しく作ったオリジナルの分類ルールのことを「カスタムタクソノミー」と呼びます。※初心者は、「専門用語」には、深い理解に拘らずステップ通りに進めていきましょう。

カスタム投稿タイプを追加する

「制作実績(スラッグ名:works)」という新しい投稿タイプを作ります。

  1. 管理画面メニューの 「CPT UI」>「投稿タイプの追加と編集」 を開きます。
  2. 「基本設定」 の3つの項目を入力します。
項目名入力内容説明
投稿タイプスラッグworksURLやプログラムで使う半角英数字(小文字)
複数形のラベル制作実績管理画面のメニューに表示される名前です。(日本語でOK)
単数形のラベル制作実績基本的には複数形と同じで大丈夫です。(日本語でOK)
  1. 画面を少し下にスクロールすると 「追加のラベル」 がありますが、ここは自動で補完されるので、空欄のままにしておきます。
  2. さらに下にスクロールし、「設定」 の中にある以下の項目を確認・変更します。
    • アーカイブあり (Has Archive): True に変更する(制作実績の一覧ページを表示するために必要な設定です。)
    • サポート (Supports): その投稿タイプで使いたい機能(タイトル、エディター、アイキャッチ画像など)にチェックを入れます。
  3. 最下部にある 「投稿タイプを追加」 ボタンをクリックします。

これで、管理画面のメニューに新しく「制作実績」という項目が登場します。

補足

専門用語がたくさん出てきましたが、ざっくりとそれぞれの役割を解説します。

CPT UIカスタム投稿
制作実績(専用の)投稿ができるようになる
タクソノミー実績を分類する
例:業種、サイト種別、制作カテゴリ
ACF入力項目を増やす
例:制作期間、担当範囲、URL、使用ツール、クライアント名

ACF(Advanced Custom Fields)

入力欄を追加する

制作実績の投稿タイプを作成しましたが、現在入力できるのは「タイトル」と「本文」のみです。しかし実際の制作実績ページでは、

  • サイトURL
  • 制作期間
  • 担当範囲
  • 使用技術

などの情報も管理したい場合があります。そこで、入力項目を自由に追加できるプラグイン「ACF(Advanced Custom Fields)」を利用します。

ACFプラグインを利用する

ACFは、WordPressの投稿画面にオリジナルの入力欄を追加できるプラグインです。

プラグインの追加ができたら、管理画面に「ACF」ができます。

▶︎「フィールドグループ」をクリックします。

▶︎ 「フィールドグループ名」
「制作実績 詳細情報」と入力します。

▶︎以下のような入力項目を追加していきます。

フィールド・ラベル

制作実績を入力する際、フィールドが表示されますので各情報を入力していきます。

制作実績のページ

制作実績を登録していきましょう。素材等は、以下のページから利用してください。
https://cocohp.pw/2026/les000/works/