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

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

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

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

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

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

目次

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

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

カスタムフィールドとは

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

例えば、

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

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

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

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

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

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

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

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

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

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

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

ただし、カスタムフィールドはとても便利な入力補助ですが、実はこのフィールドに入力、記事を更新しただけでは記事に出力されません。出力するためには、テーマを直接編集する必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

入力フォームの登録

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

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

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

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

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

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

などがあります。

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

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

[感想]
type =textarea

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

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

表示テンプレートの登録

[cft] and [cftsearch] ShortCode Formatに、タグなどを使って表示させたいテンプレートを作成します。この時に「PHPを使用する」にチェックを入れるとPHPが使用できます。

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

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

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

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

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

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

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

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

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

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

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

そうですね♪

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