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

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

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

目次

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

 

 

カスタムフィールドとは

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

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

例えば、

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

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

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

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

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

 

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

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

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

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

 

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

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

 

スタイル（CSS）を管理しやすい

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

 

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

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

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

 

入力忘れを防げる

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

 

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

 

 

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

 

 

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

カスタムフィールドが使えるプラグインはいくつかありますが、今回は「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のウィジェット編集方法の記事もあります。

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

 

 

まとめ

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

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

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

 

WordPressを学習中の方へ

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

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

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

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

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

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

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