ワードプレス カスタムフィールドの使い方

記事公開日:2018.02.02

最終更新日:2018.02.05

1,117 PV

WordPressにはカスタムフィールドという便利な機能があります。WordPressをカスタマイズするとなると難しいと思ってしまう人が多いと思いますが、初心者でも簡単に設定することができるので設定方法を紹介します。

カスタムフィールドとは?

WordPressをインストールすると、初期状態で『タイトル』と『本文』を入力できるフィールドがあります。WordPress投稿画面で情報を入力する項目、フィールドを自由に追加できるのがカスタムフィールドです。

例えば、毎回同じ形式の記事を作成・投稿するときなどに、作成したフィールドに沿って入力していくことで、他の投稿記事との見た目や書き方のズレもなくなり記事作成も簡略化されます。

カスタムフィールドの設定方法

管理画面での、カスタムフィールドの設定の仕方を紹介します。

①カスタムフィールドの表示の仕方

カスタムフィールドは、初期状態の管理画面では表示されていないので、まずはカスタムフィールドを表示する設定が必要です。

WordPress管理画面の右上にある『表示オプション』をクリックし、『表示する項目』の中にある『カスタムフィールド』をチェックします。チェックを入れると本文フィールドの下にカスタムフィールドのウィジェットが表示され、カスタムフィールドの設定を行うことができるようになります。

表示された枠に、「カスタムフィールド」の名前と値を設定し、「カスタムフィールドを追加」のボタンをクリックし設定完了です。しかし、カスタムフィールドは上記の設定のみでは表示できません。

②カスタムフィールドの呼び出しの仕方

呼び出しにはget_post_meta関数関数を使用します。下記は関数の書き方の例です。

<?php echo get_post_meta($post->ID, ‘カスタムフィールドの名前’, true); ?>

カスタムフィールドの名前の部分に呼び出したいフィールドの名前(作成した名前)を入れ、呼び出したいテーマテンプレートファイル(PHPファイル)の、呼び出したい箇所にコードを記述します。

①、②の流れで、カスタムフィールドで設定・入力したものがページに表示されるようになります。

カスタムフイールドを設定するプラグイン

カスタムフィールド設定に使用できるプラグインの紹介です。

Advanced Custom Fields(ACF)

WordPressには、Advanced Custom Fieldsというカスタムフィールド用のプラグインがあります。

Advanced Custom Fieldsとは?

Advanced Custom Fieldsはカスタムフィールドのタイプを、簡単に設定できるプラグインです。
Advanced Custom Fields ダウンロードページ
インストールすると管理画面左メニューに「カスタムフィールド」と表示されます。

Advanced Custom Fieldsで設定できる出力タイプは様々あり、

  • テキスト
  • テキストエリア
  • 画像やファイル
  • セレクトボックス
  • チェックボックス
  • Google Map

など、他にも多数の項目があり、簡単に出力させてくれる便利なプラグインです。

Advanced Custom Fieldsの基本の設定の仕方

管理画面左メニューに「カスタムフィールド」をクリックし「フィールドグループ」の中の「新規追加」の順に進みます。
フィールドグループ名を入力し、順番に項目を埋めていきます。

Advanced Custom Fieldsの入力項目の説明

フィールド名…フィールド名は日本語でOK。例えば「果物」のような項目
フィールドラベル…フィールドラベルは基本的には半角英数で入力。例えば「fruit」
フィールドタイプ…テキスト、セレクトボックス、画像、グーグルマップなど上記で記載したような出力タイプを選択します。
フィールド記入のヒント…何を入力するべきか投稿編集者へ伝えるための文章が入力できます。例えば、「好きな果物を入力してください」
必須か?…入力必須か必須でないかの選択。『はい』にすると、設定したフィールドが未記入の状態では投稿ページの公開できません。
位置…設定したフィールドをどの投稿タイプに表示するかを選択します。

必要な項目の入力設定が完了したら、管理画面の右上にある『公開』をクリックしてカスタムフィールドの設定が完了します。設定が完了し、投稿画面を開くと『タイトル』と『本文』以外に、Advanced Custom Fieldsで設定した新しいフィールドが表示されています。

Advanced Custom Fieldsで設定して入力した値をページに表示させる方法

Advanced Custom Fieldsで設定した時、カスタムフィールドも先に紹介したカスタムフィールド設定の仕方と同じく、そのままでは表示されません。
サイト内の表示したいページのテンプレートファイルに、以下のコードを記述する必要があります。

まとめ

カスタムフィールドを使用することで、WordPressの投稿を使いやすくカスタマイズできます。
初心者の方でも簡単に設定できるので、ぜひ試していただければと思います。

このエントリーをはてなブックマークに追加

筆者

A.Haraguchi

Bigmac inc. 制作部所属。2016年3月に入社しました。 ほぼ未経験の状態で入社し、戸惑うこともたくさんありましたが、会社のメンバー達に支えられながら今に至ります。 2児の母なので休日は子供との時間にしています。一緒に料理したり、家事を手伝ってもらったり、娘達が自分でできるようになっていく姿をみることが最近の楽しみです。

筆者が最近執筆した記事