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のプラグインをインストールする方法をご覧ください。

 

有効化すると、ダッシュボード>設定>カスタムフィールドテンプレートというリンクができます。

Custom_Field_Template

プラグインの管理画面を開き、設定していきます。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

プラグインを設定する

では、本の感想を登録するためのフォームを作ってみましょう。

設定項目が複数ありますが、カスタムフィールドを使うためには入力フォームの登録表示テンプレートの登録という2箇所だけを最低限設定すればOKです。

Custom_Field_Template2

 

入力フォームの登録

下の画像のように、テンプレートの名前とテンプレートの項目を記載します。

ちなみに、TEMPLATE #0と記載されている、#以下の番号がこのテンプレートのNoです。
(複数作成する場合に区別します)

Custom_Field_Template3

テンプレートの表示項目は、下記3行で決まります。
(labelについてはなくても問題ありません)

  • [ID]:カスタムフィールドのID(定義)
  • type:カスタムフィールドの形状(+サイズ)
  • label:投稿画面で表示されるテキスト(注意事項など)
1時間でできる無料体験!

 

また、typeは、様々な種類を設定可能です。

  • text:一行のテキストフィールド
  • textarea:複数行のフィールド
  • file:画像のアップロード
  • checkbox:チェックボックス など

(※チェックボックスの場合は、下の行に「Value=◯◯ # ◯◯ # ◯◯ # 」と、 # 区切りで表示項目を指定します)

 

設定が完了したら、「オプションを更新」ボタンをクリックします。

Custom_Field_Template4

 

ちなみに、上記画像で入力したテンプレートの内容は、以下の通りです。

[本のタイトル]
type = text
size = 35

[本の表紙画像をアップロード]
type = file

[感想]
type =textarea

[出版年]
type = text
size = 35

[評価]
type = checkbox
value = ★★★★★ # ★★★★☆# ★★★☆☆# ★★☆☆☆# ★☆☆☆☆
label = ※5段階評価

ただ、これだけでは投稿画面で入力したものがサイトに反映されないため、サイト上でどう表示するかを設定します。

 

表示テンプレートの登録

プラグインの管理画面にある、[cft] and [cftsearch] ShortCode Formatのエリアを編集します。対応するテンプレートNoの表示エリアに、HTMLを用いて表示項目を設定してください。

その際に、カスタムフィールドのID([感想]など)を入力することで、その値が引用されます。

Custom_Field_Template5

 

入力が完了したら、やはり「オプションを更新」ボタンをクリックします。

ちなみに、上記画像で入力したテンプレートの内容は、以下の通りです。

本のタイトル [本のタイトル]
感想 [感想]
出版年 [出版年]

 

 

カスタムフィールドを使ってみる

投稿画面を開くと、投稿エリアの下に先ほど設定した項目が表示されています。

Custom_Field_Template6

 

カスタムフィールドに入力したら、本文のカスタムフィールドを表示したい部分にショートコードを入力します。

ショートコードは[cft format=0]です。=以下の部分が、テンプレートのNoです。

このショートコードを記入しないと、投稿に反映されないので注意してください。

Custom_Field_Template7

 

更新してサイトでの表示を確認すると、このように表示されます。
Custom_Field_Template8

今回の記事は以上です。

他にWordPressのプラグインを使ってみたい場合は、WordPress Popular Postsの使い方も合わせてご覧ください。

 

大石ゆかり

簡単にカスタムフィールドが作れましたね♪

田島悠介

そうだね。アレンジの仕方がとても豊富だから、状況に応じて使い分けができるね!

大石ゆかり

はい、そうですね〜!!!

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する