Custom Field Templateの使い方ーWordPressプラグイン【初心者向け】
WordPressのプラグイン【Custom Field Template(カスタムフィールドテンプレート)】の使い方について初心者向けに解説した記事です。カスタムフィールドとして「タイトル」と「本文」以外の項目を追加できます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
WordPressのプラグインの使い方を初心者向けに紹介する記事です。
今回は、WordPressのカスタムフィールドを追加できるプラグイン、Custom Field Template（カスタムフィールドテンプレート）の使い方を紹介します。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。
田島メンター！！カスタムフィールドのことはわかったんですけど、使うのが少しむずかしいんですよね・・・。
ちょっと慣れが必要だね。でも、「Custom Field Template」っていうプラグインを使うと、手軽にカスタムフィールドを使えるよ！
え、そうなんですか！！教えてください！
Custom Field Templateとは
カスタムフィールドとは、WordPressの投稿フォームに、「タイトル」と「本文」以外に任意の項目を付け足すことが出来る機能です。導入すると、レシピブログや不動産サイトなど、決まったフォームに沿って投稿することが多い記事を効率化することができます。
ただ、導入には手間がかかります。その手間を省いて、初心者でも簡単にカスタムフィールドが追加できるのが、このCustom Field Templateです。
プラグインをインストールする
このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。
インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。
有効化すると、ダッシュボード＞設定＞カスタムフィールドテンプレートというリンクができます。
プラグインの管理画面を開き、設定していきます。
[PR] WordPressで挫折しない学習方法を動画で公開中
プラグインを設定する
では、本の感想を登録するためのフォームを作ってみましょう。
設定項目が複数ありますが、カスタムフィールドを使うためには入力フォームの登録と表示テンプレートの登録という2箇所だけを最低限設定すればOKです。
入力フォームの登録
下の画像のように、テンプレートの名前とテンプレートの項目を記載します。
ちなみに、TEMPLATE #0と記載されている、＃以下の番号がこのテンプレートのNoです。
（複数作成する場合に区別します）
テンプレートの表示項目は、下記3行で決まります。
（labelについてはなくても問題ありません）
- [ID]：カスタムフィールドのID（定義）
- type：カスタムフィールドの形状（＋サイズ）
- label：投稿画面で表示されるテキスト（注意事項など）
また、typeは、様々な種類を設定可能です。
- text：一行のテキストフィールド
- textarea：複数行のフィールド
- file：画像のアップロード
- checkbox：チェックボックス など
（※チェックボックスの場合は、下の行に「Value=◯◯ # ◯◯ # ◯◯ # 」と、 # 区切りで表示項目を指定します）
設定が完了したら、「オプションを更新」ボタンをクリックします。
ちなみに、上記画像で入力したテンプレートの内容は、以下の通りです。
[本のタイトル]
type = text
size = 35[本の表紙画像をアップロード]
type = file[感想]
type =textarea[出版年]
type = text
size = 35[評価]
type = checkbox
value = ★★★★★ # ★★★★☆# ★★★☆☆# ★★☆☆☆# ★☆☆☆☆
label = ※５段階評価
ただ、これだけでは投稿画面で入力したものがサイトに反映されないため、サイト上でどう表示するかを設定します。
表示テンプレートの登録
プラグインの管理画面にある、[cft] and [cftsearch] ShortCode Formatのエリアを編集します。対応するテンプレートNoの表示エリアに、HTMLを用いて表示項目を設定してください。
その際に、カスタムフィールドのID（[感想]など）を入力することで、その値が引用されます。
入力が完了したら、やはり「オプションを更新」ボタンをクリックします。
ちなみに、上記画像で入力したテンプレートの内容は、以下の通りです。
本のタイトル [本のタイトル] 感想 [感想] 出版年 [出版年]
カスタムフィールドを使ってみる
投稿画面を開くと、投稿エリアの下に先ほど設定した項目が表示されています。
カスタムフィールドに入力したら、本文のカスタムフィールドを表示したい部分にショートコードを入力します。
ショートコードは[cft format=0]です。=以下の部分が、テンプレートのNoです。
このショートコードを記入しないと、投稿に反映されないので注意してください。
更新してサイトでの表示を確認すると、このように表示されます。
今回の記事は以上です。
他にWordPressのプラグインを使ってみたい場合は、WordPress Popular Postsの使い方も合わせてご覧ください。
簡単にカスタムフィールドが作れましたね♪
そうだね。アレンジの仕方がとても豊富だから、状況に応じて使い分けができるね！
はい、そうですね〜！！！
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
