icon
icon

WordPressでカスタムフィールドを設定する方法【初心者向け】

WordPressの【カスタムフィールド】を設定する方法を初心者向けに解説した記事です。カスタムフィールドを使うと、タイトルと本文に追加した情報をサイトに掲載することが可能です。テーマの編集から、初心者向けのプラグインまで紹介しています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

吉﨑 智正

トゥービーコンティニュード合同会社代表。1995年ぐらいからHTMLを生業としており、ここ7年はWordPressを中心に仕事をしています。直近2年半は神奈川と広島で2拠点生活をおくっています。

WordPressには便利な機能としてカスタムフィールドがあります。

そのカスタムフィールドについて初心者向けに設定方法を紹介します。カスタムフィールドの設定は、初心者にとっては難しいところもあるので、プラグインを使った方法もあわせて解説していきます。

目次

 

大石ゆかり

田島メンター!!WordPressのカスタムフィールドってなんですか?

田島悠介

カスタムフィールドっていうのはね、記事を書くときのフォーマットを自分用にカスタマイズできる機能なんだ。

 

カスタムフィールドとは

WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つがあります。

ここに入力する情報を追加できるのがカスタムフィールドです。

例えば、

  • 不動産サイトのようにたくさんの情報を扱うサイト
  • 飲食店紹介など、決まったフォームで記事を書きたいブログ

などを構築する時に、デフォルトの機能ではお店の情報などを定型的に表示することができず不十分です。

そこで便利なのが、「カスタムフィールド」です。

カスタムフィールドを使うと「タイトル」と「本文」だけでなく、自分好みの任意フォームを追加できます。

カスタムフィールドを使えば、あとで「評価が高い順番に並べ替える」といったことも柔軟に行えるようになります。

 

カスタムフィールドを使うメリット

カスタムフィールドを使う主なメリットは、主に以下の4つがあります。

  1. 決まった項目の入力データが扱いやすい
  2. スタイル(CSS)を管理しやすい
  3. 入力データを値として扱うことでデータの表現性が上がる
  4. 入力忘れを防げる

これら4つのメリットと利用例を記載します。

 

決まった項目の入力データが扱いやすい

例えばワインを毎日紹介しているサイトがあった場合、その定価は文章中に入れてしまうよりも、カスタムフィールドで入れておくと、あとで価格順に並べてみたり、年間の合計金額を算出するようなことが簡単にできます。

 

スタイル(CSS)を管理しやすい

フィールドには特定のクラスを付加することで、一括してスタイルの管理ができます。

 

入力データを値として扱うことでデータの表現性が上がる

文章の中に書くと、たとえば価格などは文字列と扱われてしまいますが、フィールドで入力したデータは数値として扱うことができます。

そのため後処理などで様々に加工してから出力することが可能になります。

 

入力忘れを防げる

入力フィールドが決められていることで、必須項目などの記載漏れを減らすことができます。

 

[PR] Webサイト制作で副業する方法とは

カスタムフィールドを表示させる方法

それでは早速カスタムフィールドを表示させる方法を紹介します。

 

デフォルトままでは表示されていないので、まずページ右上の3点リーダー「⋮」をクリックします。

右下の最下段に「設定」がありますので、そちらをクリックします。

設定画面の左側で「パネル」をクリックし、さらに最下段の「カスタムフィールド」のスイッチをオンにします。

そして表示された「有効化してリロード」をクリックします。

 

すると、投稿本文の下に、カスタムフィールドが表示されます。カスタムフィールドの編集はここで行うことになります。

任意の項目を追加すると、次回以降はプルダウンから選択することができます。

カスタムフィールド9

 

この表示までは簡単にできました。

ただし、カスタムフィールドはとても便利な入力補助ですが、実はこのフィールドに入力、記事を更新しただけでは記事に出力されません。

出力するためには、テーマを直接編集する必要があります。

 

大石ゆかり

カスタムフィールドについてはわかったんですけど、もう少し手軽に扱うことってできないですか〜?

田島悠介

プラグインを使うと手軽に使えるよ。

 

そこで今回は初心者の方でも負担・ミスなくカスタムフィールドを活用するためのプラグインを紹介します。

 

 

カスタムフィールドが使えるプラグイン

カスタムフィールドが使えるプラグインはいくつかありますが、今回は「Custom Field Template」を紹介します。

 

プラグインのインストール

まずは、Custom Field Templateをインストールしましょう。

やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。

 

インストールが完了すると、管理画面>設定>カスタムフィールドテンプレート
にプラグインが表示されます。

 

カスタムフィールドテンプレートの設定

プラグインからカスタムフィールドの設定を行います。

たくさん入力項目があるように見えますが、最低限設定すべきなのは2つです。まずは2つを登録しておきましょう。

1.カスタムフィールドテンプレートオプション(1番目
※入力フォームの登録

2.[cft] and [cftsearch] ShortCode Format(4番目)
※表示テンプレートの登録

 

今回はカフェブログを作るという想定で、1つずつ紹介していきます。

 

入力フォームの登録

「テンプレートタイトル」と「テンプレートコンテンツ」に入力します。

記述ルールはシンプルで、

  • [ID] :カスタムフィールドのID
  • type :カスタムフィールドの種類(+サイズ)
  • label :投稿画面で表示されるテキスト(※全角などの注意事項)

という3行で記述されています。

 

また、typeで使えるものとしては、

  • text:一行のテキストフィールド
  • textarea:複数行のフィールド
  • file:画像のアップロード

などがあります。

チェックボックスやラジオボタンも利用できます。

カスタムフィールド4

 

なお今回、テストで記入したコンテンツは下記のとおりです。
============
[お店名前]
type = text
size = 35

[感想]
type =textarea

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

[住所]
type = text
size = 35
===========

 

表示テンプレートの登録

[cft] and [cftsearch] ShortCode Formatに、タグなどを使って表示させたいテンプレートを作成します。

この時に「PHPを使用する」にチェックを入れるとPHPが使用できます。

ここで[お店名前]のように、テンプレートのコードを書くと引用されます。

カスタムフィールド6

 

カスタムフィールドテンプレートを使った記事投稿投稿画面を開くと、「本文」の下にカスタムフィールドの項目が表示されています。

ここに、表示項目にそってコンテンツを入力します。

カスタムフィールド5

 

そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=0]を入力します。

(※=の後の数字が、テンプレートの番号と対応しています)

カスタムフィールド7

 

 

入力が完了すると、このように表示されました。

カスタムフィールド8

 

カスタムフィールドの設定は以上です。

他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。

ぜひ活用してみてください。

 

大石ゆかり

同じフォーマットの記事をたくさん書くときには、カスタムフィールドは欠かせないですね!

田島悠介

そうだね。記事を書くスピードも早くなるし、何人かで書くときなんかにも同じように書けるのがいいね!

大石ゆかり

そうですね♪

 

まとめ

今回はカスタムフィールドについて次の4つの内容でご紹介しました。

  • カスタムフィールドとは
  • カスタムフィールドを使うメリット
  • カスタムフィールドを表示させる方法
  • カスタムフィールドが使えるプラグイン

最初は難しく感じるかもしれませんが、慣れてくると応用範囲が広い機能ですので、是非使いこなしてみてください。

 

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか?

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。