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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

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

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

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

目次

本記事は下記の流れでご紹介します。

 

 

カスタムフィールドとは

WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つがあります。ここに入力する情報を追加できるのがカスタムフィールドです。

 

例えば、

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

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

 

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

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

 

 

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

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

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

 

デフォルトままでは表示されてないことが多いので、まずページ右上の「表示オプション」を選択します。

カスタムフィールド1

 

ここでカスタムフィールドにチェックを入れます。

カスタムフィールド2

 

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

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

カスタムフィールド9

 

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

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

 

出力するためには、テーマを直接編集する必要があり、PHPなどの知識がないと躓いてしまいがちです。

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

 

 

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

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

 

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

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

 

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

カスタムフィールド3

 

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

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

たくさん入力項目があるように見えますが、最低限設定すべきなのは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のウィジェット編集方法の記事もあります。

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

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