【WordPress 】初めてのカスタム投稿タイプの実装-2つのブラグインを連携-

2026年7月29日 最終更新日時 : 2026年7月29日 remy_world

カスタム投稿タイプとは、「投稿」や「固定ページ」などWordPressが標準で持っている投稿タイプの他に、独自な投稿タイプを作る機能です。具体例では「商品情報」や「賃貸物件」などが良く見受けられます。ここではキャンペーンなどの「お知らせページ」を「得々情報」という名前のカスタム投稿を作る例でプラグインの検証を行います。

この程度なら通常の投稿でも「カテゴリー」名で分けることもできますが、投稿リストに複数のカテゴリーが混在することになり、投稿数が増えると管理が面倒になります。それに対し、カスタム投稿であれば統一したフォーマットで投稿でき管理もしやすくなります。

カスタム投稿実装のために、２つのプラグインをインストールします。

  1. 「ACF(Advanced Custom Fields)」
  2. 「CPT UI(Custom Post Type UI)」

これらは共に有名なプラグインで、Lightningの子テーマと、2026年06月時点で最新版のプラグインを使って説明します。新しい設定画面を見ながら、カスタム投稿の作成手順の紹介と、公開ページからレスポンシブ対応がうまく継承できているのかまで確認しました。

目次

開発環境とプラグインのバージョン

  • 開発環境 ： Docker仮想環境　/ OS ： Ubuntu 22.04
  • WordPress ： v7.0
  • Advanced Custom Fields ： v6.8.4
  • Custom Post Type UI ： v1.19.2

実装ステップ

カスタムフィールドの作成

「Advanced Custom Fields (ACF)」プラグインを使って、投稿タイプに必要な入力項目を作成します。

カスタムフィールドの作成手順

WordPress管理画面から「ACF」の「フィールドグループ」を選択して、「+新規追加」ボタンをクリックします。

フィールド名称は、ここでは「お知らせページ」とします。

「フィールドを見る」ボタンをクリックするとプルダウン形式で各種種目を選ぶことができます。画像なども使えて高機能であることが分かります。

先ずはタイトルを定義します。「テキスト」を選択して、「フィールドラベル」に「タイトル」と記入します。
「テキスト」は1行程の簡単な文字列で、複数行に跨る文字列には「テキストエリア」を選びます。

その下側にある「フィールド名」はテンプレートファイルでコード生成する際に使用しますので、忘れないようにします。ここではa_titleという名前にしています。

また初期値の設定もできます。

「閉じてフィールドを追加」ボタンをクリックして、同じように「詳細」フィールドと「画像」フィールドを追加します。

カスタム投稿タイプの作成

既に「VK All in One Expansion Unit (ExUnit) 」がインストールされ有効化されている場合、その有効化設定の項目の中で、「カスタム投稿タイプマネージャー」の設定で、カスタム投稿タイプが利用できます。

「カスタム投稿タイプマネージャー」がONになっているときは、管理画面の左側メニューに「カスタム投稿タイプ設定」が表示され、OFFにすると表示されなくなります。

しかし使えるのはテキストのみで画像などは使えませんので、「カスタム投稿タイプマネージャー」はOFFにして、 「Custom Post Type UI (CPT UI)」 プラグインに切り替えます。

カスタム投稿タイプの作成手順

WordPress管理画面のCPT UIの中にある「Add/edit post types」を選択して、新規追加画面に入ります。

この画面は全て必須です。適時・適切な内容で記入してください。ここでは

  • 投稿タイプスラッグには「store-notice」と記入します。
  • ラベルには単数形と複数形がありますが、日本語には違いはありませんので同じ単語を入れます。ここは「得々情報」と記入します。

ここで直ぐに「投稿タイプを追加」ボタンをクリックせずに下方にスクロールします。

取り敢えずデフォルトのままで結構ですが、1箇所だけ、アーカイブありをTrueに変更しておいてください。

それ以外にメニュー表示の有無や位置やアイコン画像を変更できる箇所があります。

メニュー表示をTrueに変更して、表示させる位置を適用に入れてください。私の環境では、5を入力すると良い感じになりました。メニューアイコンもデフォルトは画鋲のようなアイコンですが、これを「ダッシュアイコンを選択」ボタン、もしくは「画像アイコンを選択」ボタンから選んで変更することができます。

サポートの項目は□なし以外は全部チェックしても良いかと思います。ここでは一例を示します。

カスタムフィールドとカスタム投稿の紐付け

今作成したカスタムフィールドと、それを表示させるページと紐付けします。この紐付けを忘れると今までやってきたことが機能せず使えません。

またこの紐付けは、複数のページにも適用できます。

カスタムフィールドとカスタム投稿の紐付け手順

もう一度先程のACFのフィールドグループから「お知らせページ」の編集画面を開きます。

必要なフィールドを追加していきます。テキストなどは分かりやすいですが、画像は配列で取得するかURLで取得するかなど分かれます。

戻り値の形式で「画像配列」にすると、画像のURLだけでなく、alt属性なども取得できます。ここは「画像URL」に設定しておきます。

その下側にスクロールすると、「ロケーションルール」のセクションがあります。

ここで「投稿タイプ」と「得々情報」を紐付けしています。

これで良ければ「変更内容を保存」ボタンが編集画面上側にありますので、クリックして保存します。

複数紐付けする場合、[と]のボタンをクリックすると、追加するロケーションルールとAND条件で紐付けされます。

また、「ルールグループを追加」ボタンをクリックするとOR条件（または）で紐付けできます。「ルールグループを追加」ボタン押してみると、このようにまたはの文字の下側に次のロケーションルールが表示されます。

テンプレートファイルの作成

テーマフォルダ内に single-{スラッグ名}.php を作成します。スラッグ名は「store-notice」としていますので、single-store-notice.phpを作成します。

以下のACF出力関数を利用します。

  • get_field('フィールド名')　　：取得関数（変数に取り込む、また条件分岐などでも使う）
  • the_field('フィールド名')　　：出力関数

例えばタイトルを表示させるときは、<?php the_field('a_title'); ?>と書きます。あるいは、
<?php echo get_field('a_title'); ?>でも構いません。

single-store-notice.php

<!-- ACF 追加 -->
<h1><?php the_title(); ?></h1>
<img src="<?php echo esc_url(get_field('a_image')); ?>" 
class="img-fluid" style="margin-bottom: 20px;"><br>
<h5>題目： <?php the_field('a_title');   ?></h5>
<p><?php echo nl2br(get_field('a_details')); ?></p>

これは画像の下にタイトルと詳細な内容を表示するときの最低限のコードです。

ポイントは：

  1. esc_url()は、WordPressにおいてURLを出力する際に、悪意のあるコードの混入を防ぐためのセキュリティ関数（エスケープ関数）です。
  2. Lightning は Bootstrap 互換なので、 img-fluidクラス を付けるだけでレスポンシブ画像になります。
Lightning のレスポンシブを継承

ここまでで、「Advanced Custom Fields」と「CPT UI(Custom Post Type UI)」の連携は完了です。しかし、折角Lightningテーマを使っているので、メニューもレスポンシブ対応させて、スマホサイズになればハンバーガーメニューが表示されるようにしたいです。

絶対守るべきポイント

  1. site-bodyクラスを使う。
    ⇨Lightning の全体レイアウトが崩れない。
  2. containerクラスとrowクラス、colクラスを使う。
    ⇨Lightning のレスポンシブが効く。内部でBootstrapを使っています。
  3. get_header()とget_footer()を必ず使う。
    ⇨グローバル CSS・JS・メニューが読み込まれる。

    ※)Lightning は 独自のテンプレート構造を持つため、Lightningではget_footer()は特に必要ありませんでした。有っても問題ありませんが以下のコードは必要です。
    lightning_get_template_part( 'template-parts/site-footer' ); と
    lightning_get_template_part( 'template-parts/page-footer' ); です。
    また、Lightning のヘッダーはget_header() だけでは完成せず、get_header()に加えて、site-header.phpとpage-header.phpが必要になります。整理するとコードは以下のようになります。

single-store-notice.phpの改良版

<?php

get_header();

//  Lightning独自の「画面全体を包む枠」を出力する関数
if ( function_exists( 'lightning_get_template_part' ) ) {
    
    // ヘッダー（ロゴ・メニュー・スマホ用ボタン）を出力
    lightning_get_template_part( 'template-parts/site-header' );
    
    // ページ全体のタイトル（巨大な見出しエリア）が必要なら出力
    lightning_get_template_part( 'template-parts/page-header' );
    
}

?>

<div class="site-body">
    <div class="container site-body-container">
        <div class="row">
            
            <!-- メインコンテンツエリア -->
            <div class="col-md-12 site-main" id="main" role="main">
                    
                <!-- カスタムフィールドを表示するエリアを決めているだけ: 
                                   (レスポンシブとは関係ない) -->
                <div  style="margin-top: 30px; padding: 20px; 
                                             background: #faf9f9;">
                      
                  <h2><?php the_title(); ?></h2>
                  <img src="<?php echo esc_url(get_field('a_image')); ?>" 
                   class="img-fluid" style="margin-bottom: 20px;"><br>
                  <h5>
                    <?php 
                    // カスタムフィールドの値を取得して表示
                    echo get_field('a_title'); 
                    ?>
                  </h5>
                  <p><?php echo nl2br(get_field('a_details')); ?></p>
              </div>    
            </div>
        </div><!-- /.row -->
    </div><!-- /.container -->
</div><!-- /.site-body -->


<?php 

if ( function_exists( 'lightning_get_template_part' ) ) {
    lightning_get_template_part( 'template-parts/site-footer' );
    lightning_get_template_part( 'template-parts/page-footer' );
} else {
    get_footer();
}

動作確認

メニューに「得々情報」のアーカイブを登録しておき、メニューから個別詳細ページに飛ぶようにして動作確認してみました。

フロントエンド（公開ページ）でチェック

アーカイブはサイズに応じてレイアウトも切り替わりました(レスポンシブ動作)。またメニューもスマホサイズになるとハンバーガーメニューに切り替わって正常に使えることを確認できました。

一方、個別詳細ページ(single-store-notice.php)では画面サイズに応じてレイアウトが崩れたりせず正常に動作しましたが、ハンバーガーメニューが表示できません。

課題：ハンバーガーメニューが表示されない

個別詳細ページ(single-store-notice.php)の最終版

スマホサイズでメニューが全て消えてしまうのも困ります。色々検討してみましたが、どうもうまくいきません。

そこで、正常動作しているアーカイブページのソースコードをそのままコピーして、そこから必要な箇所に、カスタム投稿が表示できるようにコードを追加・修正しました。

苦肉の策ですが、これでsingle-store-notice.phpで、ハンバーガーメニューも表示することができました!!

カスタムタクソノミー

カスタムタクソノミー（カスタム分類）とはWordPressが標準で備わっている、カテゴリーとタグとは別にカスタム投稿に独自に持たせることができる分類タイプのことです。新規追加とカスタム投稿との紐付けについて。

Custom Post Type UI (CPT UI)でタクソノミーを作成

タクソノミーの追加・編集

管理画面のCPT UIから「Add/edit taxonomies」に入ります。(※環境によっては日本語表示になります。)

「新規タクソノミーを追加」タグを選択して、タクソノミーを新規追加します。

スラッグのところに、お知らせ-カテゴリーの意味で「notice-cate」と入れています。ラベルはメニューに表示されるラベル(表記名)ですので日本語で結構です。単数形も複数形も同じ「お知らせカテゴリー」と入力してください。

「利用する投稿タイプ」で利用する投稿タイプと紐付けます。ここでは「得々情報」で「お知らせカテゴリー」が利用できるようにしています。

さらに下側に移動すると、階層というものがあります。これはTrueにすると、階層化されたカテゴリーのように使え、Falseにすると階層化構造をもたない、フラットな位置付けのタグとして使えます。

ここでは、カテゴリーの設定をしていますのでTrueに変更します。それ以外はデフォルトのままでして、最後に「タクソノミーの追加」ボタンをクリックしてください。

新規追加したお知らせカテゴリーにカテゴリーを追加する

カスタム投稿と紐付いた「お知らせカテゴリー」ですが、さらにどういった内容のカスタム投稿なのか分類分けします。例えば「キャンペーン情報」なのか、「休業日のお知らせ」なのかで分類分けしたかったとします。

カテゴリー追加手順

管理画面の「得々情報」の「お知らせカテゴリー」を選択します。

名前に「キャンペーン情報」と記入し、スラッグには英語で「campaign」と記入します。

次のセレクトボックスは階層化する場合はその親カテゴリーを指定しますが、今は初めてでありませんので「なし」のままで、最後に「新規お知らせカテゴリーを追加」ボタンをクリックします。

右側の一覧表に項目が追加されるのを確認して、「休業日」についても同様に追加します。

2項目を追加した時のカテゴリーの一覧です。

カスタム投稿ページとカテゴリーとの紐付け

個別のカスタム投稿ごとに編集画面からカテゴリーを決めます。標準の投稿ページのように、投稿一覧のクイック編集から選択することはできませんでした。

カスタム投稿の新規追加・編集画面

先程追加した「お知らせカテゴリー」から該当するものにチェックを入れます。

カテゴリー分類では、1記事に１つ程度が目安と言われていますが、標準の機能では複数チェックを入れる事ができますので、どれかに絞ってチェックを入れてください。

また、この画面から新しいカテゴリーを追加することもできます。

以上です😀

Follow me!

カテゴリー
Wordpress、プラグイン検証
前の記事
【WordPress】WooCommercev10.6.1 で属性を持った商品を登録する方法
2026年7月3日