カスタム投稿タイプとカスタムフィールドという言葉は聞いたことがあっても、ごちゃごちゃしてしまってはっきりとはわかっていない、という方がいらっしゃるかと思います。今回は、「書籍」というカスタム投稿タイプを作ってそこに独自の項目を追加するカスタムフィールドを作る方法について書いてみます。目的に合ったカスタム投稿タイプがあると入力しやすかったり、表示を画一的にできるなどメリットがあります。
「カスタム投稿タイプ」と「カスタムフィールド」とは？なにが違うの？
カスタム投稿タイプとカスタムフィールドという２つの単語がありますが、それぞれ別の意味のものですのでそれについて説明します。
WordPressに最初からある「固定ページ」「投稿」と同じ種類のものがカスタム投稿タイプです。例えばカスタム投稿タイプで「書籍」というものを作れば、ダッシュボードには
このように、「投稿」「固定ページ」「書籍」というメニューが表示されます。
投稿や固定ページの入力画面は
クラシックエディターだと
このようになっていて、基本的にはタイトル、本文で構成されています。このタイトルや本文のように入力する部分のことをフィールドといいます。
カスタム投稿タイプを作る場合には、基本的にタイトル、本文が入力できますが、それ以外にも例えば今回の場合はISBNコードや出版社などの、基本的に必ず使うような項目をカスタムフィールドとして追加しておくと入力しやすかったり、検索ができたり、表示の時に決まった形で表示させることができたりします。
というように、カスタム投稿フィールドとはタイトル、本文の他にコンテンツに追加したい項目を追加するためにあります。
カスタム投稿タイプ「書籍」を作る
今回は「書籍」というカスタム投稿タイプを作ります。
カスタム投稿タイプを作るには色々な方法があるのですが、一番汎用的で簡単と思われるプラグインを使った方法について説明します。
Custom Post Type UI プラグインのインストール
カスタム投稿タイプを作るプラグインで定番のCustom Post Type UIをインストールします。
ダッシュボード プラグイン＞新規追加 をクリック
cpt uiと入力すると、
このプラグインが見つかりますので、今すぐインストールをクリック
有効化をクリック。これでインストールが終了です。
カスタム投稿タイプ「書籍」を追加する
インストールが終わると、
CPT UIというメニューが追加されますので、投稿タイプの追加と編集をクリック
この画面が表示されます。
投稿タイプスラッグ：book
複数形のラベル：書籍
単数形のラベル：書籍
と入力します。
投稿タイプスラッグは投稿＝post、固定ページ＝pageのように、どのような投稿タイプなのかを示します。そのため英文字で入力します。ラベルはメニューなどで利用する表示用のラベルです。
このページの下の方に
アーカイブありという項目があります。これを
Trueにします。アーカイブとは一覧表示のことなので、あった方が便利かなと思うからこのようにしてみました。
ページ一番下の
投稿タイプを追加をクリック
メニューを見ると
書籍というメニューが追加されています。
今回は説明が長くなるのでタクソノミー（投稿のカテゴリーのようなもの）は追加しませんでした。このプラグインでタクソノミーも追加できます。
このあたりをご覧ください。
投稿タイプを追加したら必ず行うこと
これで書籍カスタム投稿タイプは追加できたのですが、このあとに必ず行うことがあります。
ダッシュボード 設定＞パーマリンク設定 をクリックして、
ページ一番下の変更を保存をクリックします。これを行わないと、表示がおかしいなどということが起こってきます。
カスタム投稿タイプ「書籍」にカスタムフィールドを追加する
今回は書籍というカスタム投稿タイプに
ISBN13桁
書籍名
著者
出版社
発売日
画像url
の6つの項目を追加したいと思います。
Advanced Custom Fieldsをインストールする
カスタムフィールドを追加するプラグインの定番Advanced Custom Fieldsをインストールします。
ダッシュボード プラグイン＞新規追加 をクリック
advanced custom fieldsと入力すると、
このプラグインが見つかりますので、今すぐインストールをクリック
有効化をクリック。これでインストールが終了です。
書籍にカスタムフィールドを追加する
カスタムフィールドを追加するには、まずフィールドグループを作ります。
ダッシュボード カスタムフィールド＞新規追加をクリック
このように表示されますので、
タイトルを書籍グループ（任意の分かりやすい名前）、ルールというところで投稿タイプ 等しいの後の項目を書籍としておきます。
これで、書籍カスタム投稿タイプのときのみこのフィールドグループが表示されるということになります。
フィールドを追加するには
フィールドを追加をクリックして１つずつ追加していきます。
最初に表示される、フィールドラベル、フィールド名、フィールドタイプを入力して、必須入力にしたい場合は、必須か？を はい にします。
isbn13桁は
このように入力しました。
フィールド名はプログラムで使うので必ず英数文字で入力してください。
書籍名
著者
出版社
はフィールドタイプがテキストなので、同じように入力していきました。これら３つは必須にはしませんでした。
発売日は
フィールドタイプでデイトピッカーを選択
画像urlはテキストにしました。
※画像urlではなく、画像とした場合は、フィールドタイプで画像を選択すると、メディアから画像を選択できます。今回は後ほどのカスタマイズのためにurlとしてあります。
これで全部のフィールドが追加できたので、
画面右上にある
公開をクリック。カスタムフィールドの作成が終了しました。
カスタム投稿タイプ「書籍」に入力してみる
これで作成が終わりましたので、カスタム投稿タイプ「書籍」に入力をしてみます。
ダッシュボード 書籍＞新規追加 をクリック
このように、タイトル、本文の下に追加したカスタムフィールドが表示されました。
このように入力していきます。
発売日の入力欄をクリックすると
このようにカレンダーが表示されるので選択します。
すべて入力したら
公開する、公開をクリックします。
書籍＞書籍一覧をクリックすると、
このように保存されていて、編集をクリックすれば、
カスタムフィールドの値も保存されています。
カスタム投稿タイプとカスタムフィールドは追加されたけど表示は？
データは保存されているのですが、
一覧から表示をクリックしてみると
タイトルと本文の内容しか表示されません。
まぁ、それはそうかなと思います。というのもこれを表示しているテンプレートは、使っているテーマのものなので、先ほど自分が追加したフィールドのことなどそのテンプレートは一切知らないからです。
ということでカスタムフィールドを表示するには、カスタムテンプレートを作る必要があります。
ここまでも既にかなり長くなってしまいましたので、カスタムテンプレートの作り方については次回のブログで書きますね。
こんな感じに表示できるようにします。
こっそりと野望を語る
実はこの「書籍」というカスタム投稿タイプと、以前書いた
でご紹介した、楽天ブックス書籍検索APIを組み合わせて ダッシュボードにISBNコードを入れると他のデータをAPIで自動取得してフィールドにセットする ということを実現するという野望があります（というか既にできています）。
その説明をするのにはまずカスタム投稿タイプやカスタムフィールドのことを書いて、、、とかなり長くなりますが次々回ぐらいにはそのカスタマイズについて書けると思いますのでお待ちくださいm(_ _)m
コメント