Custom Post Type UIとAdvanced Custom Fieldsを使ってカスタム投稿ページとカスタムフィールドを構築する例

Custom Post Type UIとAdvanced Custom Fieldsを使ってカスタム投稿ページとカスタムフィールドを作ります。

本記事では固定ページ内にカスタム投稿記事をphpで表示させる事が主となっています。

カスタム投稿記事自体をカテゴリ別に分ける場合、タクソノミーを追加して設定していきます。

カスタム投稿ページとカスタムフィールド

Wordpressを使っていれば、カスタム投稿ページ・カスタムフィールドという言葉をよく耳にすると思います。

Wordpress管理画面に、投稿欄とは別にピンのアイコンが付いた名前の欄がありますよね。

あれがいわゆる「カスタム投稿ページ（タイプ）」であり、通常の投稿欄の別バージョンになります。

さらに通常の編集画面には「タイトル」と「本文」がありますが、それ以外に様々な入力欄が設けられている場合があります。

これが「カスタムフィールド」です。

※ここではカスタム投稿タイプとカスタム投稿ページは同じ意味とします。

本記事ではWordpressサイトを納品する場合を例に、カスタム投稿タイプやカスタムフィールドがどのように使われるのかを解説していきます。

固定ページは更新が難しい

例えば、クライアントへ納品するWordpressサイト構築の案件があったとします。

管理画面の通常の「投稿」欄は、新着情報の掲載に使われるものとしましょう。

新着情報はタイトルと本文欄を書き込んでもらうだけですから、特に問題はありませんね。

それに対して固定ページは、HTMLソースで構成されている場合が多く、クライアントには情報更新が難しい現状があります。

固定ページ内の情報が更新できる仕組み

そこで前もって更新対象箇所を決定しておき、クライアントに簡単に情報更新できる仕組みを作ります。

その「更新対象箇所」をカスタム投稿タイプとカスタムフィールドで実現する訳です。

クライアントとの打ち合わせが必要

ですのであらかじめどの部分を更新できるようにするか、クライアントと打ち合わせる必要がありますね。

今回は固定ページの中で「情報提携」の部分と「研修イベント」の部分を、更新できる様取り決めた事にします。

カスタム投稿ページ「情報提携」

まずはカスタム投稿ページとして、管理画面に「情報提携」という専用の投稿欄を作ります。

実際の固定ページ「情報提携」がPDFとコメントの並んだページになっていて、クライアントに自由に更新してもらいたい訳です。

ですのでカスタム投稿ページの「情報提携」ではPDFファイルをアップし、コメントの入力ができる様にします。

ここを「カスタムフィールド」を使って実現していきます。

カスタム投稿ページ「研修イベント」

それからもう一つ準備するカスタム投稿ページが「研修イベント」です。

実際の固定ページ「研修イベント」はイベントに関する情報が表形式に並んだページであり、これをクライアントに自由に更新してもらいたい訳です。

ですのでカスタム投稿の「研修イベント」欄では、PDFファイル・日時・場所・料金など、各種専用フィールド（カスタムフィールド）を複数準備します。

カスタムフィールドでユーザー操作を制限

専用の入力欄が表示されるので、そこに入れるだけで内容が表示される訳ですね。

この様にカスタムフィールドを設置しておけば、表形式データであってもクライアントに情報更新してもらいやすくなります。

単にタイトルと本文だけを提供する形よりも、クライアント操作を制御できるので便利です。

カスタマイズ概要

今回のカスタマイズ概要をまとめておきます。

あくまでクライアントと取り決めた箇所（情報提携と研修イベント）への更新機能の導入が目的です。

新設するオリジナル投稿欄（カスタム投稿ページ）

これにより通常の「投稿」以外に、2つのオリジナル投稿欄ができる事になりますね。

元々の「投稿」も含めて投稿欄は3つになりますが、今回通常の「投稿」には触れません。

新設するカスタムフィールド

「情報提携」内のカスタムフィールド

「研修イベント」内のカスタムフィールド

使うプラグイン

個別のカスタムフィールドを活用

ポイントは、カスタム投稿のタイプごとに個別のフィールド入力欄を準備する点でしょう。

それぞれ独立したカスタムフィールドが稼働する事になります。

本記事の最後には、カスタム投稿の記事をカテゴリ別に分ける方法も紹介していきます。

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

まずは上記2つのプラグインをインストール・有効化をしておいて下さい。

それからエディタは旧クラシックエディタで説明していきますので、「Classic Editor」もインストールしておきます。

では早速作っていきましょう。

Custom Post Type UIの設定

まずはカスタム投稿タイプを作る「Custom Post Type UI（以下：CPT UI）」の操作からです。

このプラグインで「情報提携」と「研修イベント」の2つのカスタム投稿ページを作ります。

「情報提携」投稿タイプの追加

CPT UIから「投稿タイプの追加と編集」を開きます。

まずは投稿タイプスラッグ欄に半角英字で文字を入れます。今回は「information_tieup」にしました。

その下の複数形ラベル・単数形のラベルには名称を入れます。ここでは両方とも「情報提携」になりますね。

他にも設定欄には様々な項目が準備されていますが、必須となるのは上の3つです。

後からでも編集できるので、まずは3つを入れたら「投稿タイプを追加」を押しましょう。

「研修イベント」投稿タイプの追加

再度CPT UIから「投稿タイプの追加と編集」を開きます。

投稿タイプスラッグ欄に半角英字で、今度は「event_training」と入れます。

その下の複数形ラベル・単数形のラベルには名称を入れます。ここでは両方とも「研修イベント」とします。

先ほど同様に3つを入れたら「投稿タイプを追加」を押しましょう。

2つの登録完了後、Wordpressの管理画面に「情報提携」と「研修イベント」の投稿欄が追加されているのがわかりますね。

カスタム投稿タイプの追加自体はこれで終了です。非常に簡単だと思います。

Advanced Custom Fieldsの設定

次にAdvanced Custom Fieldsの操作です。

このプラグインを使って、各投稿欄に専用の入力フィールド（カスタムフィールド）を準備します。

さらに準備するフィールドは、先ほど作ったカスタム投稿のタイプごとに出し分けます。

情報提携のフィールドグループ追加

Advanced Custom Fieldsから「新規追加」を押すと「フィールドグループを新規追加」の画面になります。

タイトル

まずはフィールドグループの名称タイトルを決めます。

投稿タイプごとに専用のフィールドを追加するので、利用するフィールドグループに名前を付ける訳です。

ここでは「情報提携グループ」にしました。

位置

次に重要なのが「位置」の欄の設定です。

今回追加するフィールドグループを表示させたい「投稿名（カスタム投稿タイプ）」を選んで紐づけます。

今回追加する投稿タイプは「情報提携」ですので、

となる様に選択します。ここでは他のルールも付ける事ができます。

情報提携のカスタムフィールド作成

ではカスタムフィールドを作っていきましょう。

タイトルと位置を入れたら、右下の「フィールドを追加」をクリックします。

PDFフィールド

コメントフィールド

やたらと入力欄が縦に並ぶのでわかりにくいかも知れませんが、各項目の下にある「フィールドを閉じる」を押すと一覧が折りたたまれます。

フィールドの追加および更新をする事

右下の「フィールドを追加」を押すと、追加されます。

最終的にはページ右にある「追加」「更新」を押さないと反映されませんので、注意ください。

研修イベントのフィールドグループ追加

登録をしたら再度上の「新規追加」を押して、もう一つフィールドグループを追加します。

今度は研修イベントのフィールドグループです。

タイトル

次のグループタイトルは「研修イベント」にしました。

位置

次に「位置」の欄の設定です。

紐づけたい投稿タイプは「研修イベント」ですので、以下の様に設定します。

研修イベントのカスタムフィールド作成

ではフィールドを作っていきます。以下は一部を例として紹介します。

イベント内容フィールド

日時フィールド

場所フィールド

上記の様に必要なカスタムフィールドを作っていきます。

フィールドの追加および更新をする事

それぞれ右下の「フィールドを追加」を押せば、追加されます。

最終的にはページ右にある「追加」「更新」を押さないと反映されませんので、注意ください。

フィールドの確認

これでそれぞれの投稿タイプごとに個別のカスタムフィールドを追加する事ができました。

では実際にそれぞれの編集ページを見てみましょう。

それぞれの欄が設置されているのがわかると思います。

カスタム投稿「情報提携」の編集ページ

カスタム投稿「研修イベント」の編集ページ

先ほど付けたフィールドのグループ名が、設定パネルの見出しになっていますね。

順番も設定した通りに並んでいます。

カスタム投稿ページの表示

ではいよいよ追加したカスタム投稿タイプの情報をページ上に表示させていきます。

表示させる先は、固定ページ（情報提携・研修イベント）の中です。

更新しにくい固定ページの情報を、クライアントに更新してもらえる様にするのが目的だからです。

固定ページに出さず専用に出す場合

もちろんカスタム投稿用のテーマファイル、single-information_tieup.phpなどを準備すれば、カスタム投稿記事の一覧や詳細を表示する事はできます。

しかし今回は固定されたページ内容をクライアントに更新してもらうのが狙いですので、テーマファイルは用意しません。

テーマファイルでカスタム投稿ページの一覧や詳細を表示させたい場合は、以下の記事を参考下さい。

カスタム投稿記事「情報提携」の出力

話が脱線しましたので、固定ページ内にカスタム投稿記事を出す方法に戻りましょう。

固定ページ「情報提携」の中に、カスタム投稿タイプの「情報提携」で入れた投稿を出します。

ところが固定ページ内には、こういった投稿記事を表示するphpを直接書く事ができません。

ですので代わりにショートコードを使って表示させます。

「情報提携」出力PHP

ショートコードを作る方法はここでは割愛し、PHP部分だけ紹介します。

<?php $wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'information_tieup', 'posts_per_page'=> '100', //とりあえず100件 ); $wp_query->query( $my_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <h3><?php the_title(); ?></h3> <p><?php the_field('comment'); ?></p> <?php if( get_field('pdf') ): ?><a href="<?php the_field('pdf'); ?>" target="_blank"><img src="PDF画像URL"></a><?php endif; ?> <?php endwhile; endif; wp_reset_postdata(); ?>

上記PHPを記述したショートコードを固定ページに貼り付けて、functions.phpで呼び出します。

ショートコードの詳細は、以下の記事をご参考下さい。

コード解説

出力にはWP_Query();を使います。

post_typeの欄には、CPT UIの「情報提携」設定時に「投稿タイプスラッグ」の欄で入れた「information_tieup」を入れましょう。

今回は一応100記事までという縛りで、posts_per_pageを設定しています。

if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); endwhile; endif; wp_reset_postdata();

これは対象データを全て表示するまで出力を繰り返す、while構文ですね。

カスタムフィールドの表示

情報提携のタイトルは、the_title();で表示しています。これはいつもの通りですね。

次にカスタムフィールドは以下の2つ表示させていました。

それぞれ上記の様に「the_field('');」で表示させる事ができます。

中にはそれぞれ、Advanced Custom Fieldsの「フィールド名」のところで設定した半角英字が入る事になります。

画像のURLについて

PDFのカスタムフィールドは、Advanced Custom Fieldsでフィールド設定の「返り値」に「ファイルURL」を選択しています。

それにより、the_field('pdf');で画像のパスURLが出力されるようになります。

設定しないままだと「画像ID」が出力されるので、画像がページ上に正常に表示されません。

カスタム投稿記事「研修イベント」の出力

同様に今度は、固定ページの「研修イベント」の中にカスタム投稿記事の「研修イベント」情報を出力します。

「研修イベント」出力PHP

<?php $wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'event_training', 'posts_per_page'=> '100', //とりあえず100件 ); $wp_query->query( $my_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <h3><?php the_title(); ?></h3> <table class="tbl1"> <tr> <th>PDFリンク：<br><?php if( get_field('event_pdf') ): ?><a href="<?php the_field('event_pdf'); ?>" target="_blank"><img src="PDF画像URL" alt="PDF画像"></a><?php endif; ?></th> <td><?php the_field('event_main'); ?></td> </tr> <tr> <th>日時：</th> <td><?php the_field('event_date'); ?></td> </tr> <tr> <th>定員：</th> <td><?php the_field('event_limit'); ?></td> </tr> <tr> <th>場所：</th> <td><?php the_field('event_place'); ?></td> </tr> <tr> <th>講師：</th> <td><?php the_field('event_staff'); ?></td> </tr> <tr> <th>受講料：</th> <td><?php the_field('event_price'); ?></td> </tr> <tr> <th>状況：</th> <td><?php the_field('event_ok'); ?></td> </tr> </table> <?php endwhile; endif; wp_reset_postdata(); ?>

コード解説

構成は先ほどの「情報提携」と同じです。

投稿タイプスラッグの名前が「event_training」になっている点が違いますね。

さらにイベント案内PHPでは、カスタムフィールドデータを表形式で出力します。

ですが基本的にはHTMLのtableソースであり、<td>欄にそれぞれのカスタムフィールド名が入っているだけです。

ここまでで、固定ページの「情報提携」欄にあるPDFリンクとコメントは、カスタム投稿ページ「情報提携」から更新できる様になりました。

さらに固定ページ「イベント案内」の表データ情報は、カスタム投稿ページ「イベント案内」から更新できる様になった訳です。

カスタム投稿ページの投稿をカテゴリ別に分ける場合

ではもう少し複雑にカスタマイズしてみましょう。

「情報提携」のPDFとコメントによる投稿を、カテゴリ別に分けて表示させてみます。

分類カテゴリ例

例えば以下の様にカテゴリを付けましょう。

ジャンル別にPDFとコメントを出し分ける事ができれば、固定ページの「情報提携」が項目別に並べられていた場合に対応できます。

「カテゴリAは一番上に」「カテゴリBは下の方に」など、指定位置に表示させる事ができますね。

カスタム投稿のカテゴリ分けはタクソノミーで行う

カスタム投稿タイプのカテゴリ分けは、CPT UIの「タクソノミーの追加と編集」欄から作ります。

カスタム投稿タイプのカテゴリ分類は、「タクソノミー」からと覚えておきましょう。

タクソノミーの追加

CPT UIから「タクソノミーの追加と編集」を押すと、新規タクソノミーの追加画面が出ます。

タクソノミースラッグの欄に半角英字でスラッグ名を付けましょう。

今回は情報提携のカテゴリ分けなので、「information_cat」としています。

複数形・単数形のラベルはいずれも、名称を「カテゴリ」としています。この名称が「情報提携」のメニュー欄下に表示されます。

次に利用する投稿タイプのチェックを「情報提携」に付けましょう。

他にもいろいろ設定できる欄はありますが、基本的にはこれで終了です。

一番下にある「タクソノミーの追加」ボタンを押します。

カテゴリ名の追加

タクソノミーで作るのは骨組みのみで、実際のカテゴリ分類名は別途追加していきます。

管理画面「情報提携」メニューの下に先ほどタクソノミーで登録した名称「カテゴリ」が表示されています。

これをクリックすると、通常の投稿欄のカテゴリ設定と同じような画面が表示されます。

ここでカテゴリ名とスラッグ名（半角英字）をそれぞれ登録します。

カテゴリの指定

カテゴリを登録したら、各投稿記事ごとにそれを選択する必要があります。

カスタム投稿の編集ページでPDFファイルをアップしコメントを入れたら、設定したカテゴリ名を選びましょう。

選んだカテゴリごとに情報提携の投稿が分類される訳ですね。

カテゴリ別のカスタム投稿ページの表示

ではこのカテゴリ分類されたデータを表示するPHPコードを紹介します。

カテゴリ分類出力のみPHP

$wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'information_tieup', 'tax_query' => array( array( 'taxonomy' => 'information_cat', 'field' => 'id', 'terms' => '6', ), ), 'posts_per_page'=> '100', ); $wp_query->query( $my_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> …

赤字の箇所がカテゴリ分類をしている部分です。

カテゴリごとに個別のショートコードPHPを作り、それぞれ固定ページの任意の位置に貼り付ける事になります。

コードの解説

上記のtax_query以外の部分は前回と一緒です。

今回は参照先として登録したカテゴリ名称のIDで縛っています。

IDの調べ方

カテゴリ登録画面で、登録したカテゴリ名称にマウスを合わせると下にコードが表示されます。

この中に「tag_ID=〇」という部分があり、そこに番号が記されているのでそれがIDになります。

これを先ほどのtermsの欄に入れれば、カテゴリで縛る事ができます。

一押し人気コーナー紹介