特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

WordPressのカスタムフィールドを記事に設定する2つの方法

WordPressには投稿項目を統一できるカスタムフィールドという機能があります。カスタムフィールドで設定した内容を記事に反映させるには、カスタムフィールドを投稿画面に表示させてテーマを編集する必要があるのでその方法を解説します。

カテゴリ: WordPress

WordPressの投稿画面にデフォルトで用意されている入力フィールドは
・タイトル
・本文
のみです。

しかし、WordPressの機能の1つ「カスタムフィールド」を利用することで以下のように入力フィールドを増やすことができます。

カスタムフィールドを活用することで、いちいち本文画面に入力項目と値を書き込まなくても必要な情報をすぐに表示させることができます

カスタムフィールドは、以下のようなWebサイトを制作するときに便利な機能です。
●お店紹介サイトや不動産サイトのように、1つのページに多数の情報を掲載するサイト
●決まったフォームで記事を量産するサイト
●商品やサービスを販売するショッピングサイト
●複数人で運営しているサイト

今回はカスタムフィールドを導入して、投稿作業をスムーズにする方法をご紹介します。

カスタムフィールドとは入力フィールドを増やす機能

デフォルト設定のWordpress投稿画面には、タイトルと本文2つの入力フィールドしかありません。

しかしカスタムフィールドを活用すれば、独自の入力フィールドを追加することができます。カスタムフィールドの追加例としては以下の項目が挙げられます。

・お店や不動産物件、会社の位置情報
・交通案内
・価格
・評価
・コメント

Webサイトに合わせて適切なカスタムフィールドを設定しましょう。

カスタムフィールドは本文とは異なった入力フィールドですので、単体で編集することができます。

カスタムフィールドが便利な場面

入力項目が固定されている場合

例えば、不動産サイトやショッピングサイト、お店の口コミサイトのように、記事ごとに内容は違うが固定の項目で情報を入力したいというときに活用されます。
また、カスタムフィールドは、本文とは別の位置に入力内容を表示することができます。

複数人で投稿している場合

複数人でブログを投稿している場合、入力項目にばらつきがでてしまう場合があります。
カスタムフィールドは入力項目の固定が可能なので、投稿内容を統一することができます。

カスタムフィールドを表示させる手順

カスタムフィールドを追加し、プレビュー画面で表示させる手順は以下の通りです。
●カスタムフィールドを追加する
●カスタムフィールドを表示させるテンプレートを作り、phpファイルに書き込む

カスタムフィールドを追加する

カスタムフィールドはデフォルトの投稿画面では表示されていません
したがって、プラグインを導入するか表示オプションから表示させる必要があります。

表示オプションからカスタムフィールドを表示させる

WordPress投稿画面の右上に「表示オプション」があるのでクリック。

「表示する項目」の「カスタムフィールド」にチェックを入れます。

本文の下にカスタムフィールドのウィジェットが表示されますので、カスタムフィールドの設定をおこないます。

「名前」の部分に入力項目名を入れます。(※今回は「サービス価格」と設定)
名前の隣は値を入力する部分です。(※今回は「50000円」と設定)
入力が完了したら、「カスタムフィールドを追加」をクリック。

「カスタムフィールドを追加」で追加することで、次に新規投稿する場合はプルダウンメニューからカスタムフィールドを選択することができるようになります。

なお、追加したカスタムフィールドは削除・更新が可能です。

プラグインでカスタムフィールドを表示させる

カスタムフィールドはプラグインを使って表示させることも可能です。
カスタムフィールドを表示させるプラグインはいくつかありますが、今回は「Advanced Custom Fields」というプラグインを使用します。
このプラグインは、通称「ACF」と呼ばれており、カスタムフィールドプラグインの定番です。
文字だけでなく画像、PDF、カレンダーなど様々なカスタムフィールドを簡単に追加することができます。

プラグインを追加するには、「プラグイン」→「新規追加」をクリック。

検索窓に「Advanced Custom Fields」と入力し、プラグインをインストールします。

インストールできると、「有効化」できるようになるのでクリック。

サイドバーに「カスタムフィールド」が追加されます。
「カスタムフィールド」→「新規追加」でカスタムフィールドを設定できます。

投稿画面に表示させるカスタムフィールドを設定します。
今回は「商品価格」を入力できるカスタムフィールドを作ります。
例えば、以下のように設定します。

すると、投稿画面には、以下のようにカスタムフィールドが追加されます。

カスタムフィールドを記事に表示させる

カスタムフィールドを投稿した記事に表示させるには、phpファイルにコードを記述する必要があります。
「投稿」なら投稿のphpファイル、「固定ページ」なら固定ページのphpファイルに記述します。今回は、投稿画面にカスタムフィールドを追加したので「singular.php」にコードを記述します。
(Webサイトによって、phpファイルの名称は異なります。)

phpファイルは、「外観」→「テーマエディタ」から開くことができます。

テーマエディタを開くとphpファイルのコードが表示されます。
書き込むphpファイルは赤枠の部分で選択できます。

コードを記述する際は、バックアップを取るか、コードを全てコピーしトラブルに備えましょう。
また、記述方法プラグインを使った場合と使わなかった場合で記述内容がそれぞれ違うので注意してください。

プラグインを使わなかった場合

「singular.php」ファイルを開き、カスタムフィールドを表示させるための関数を記述します。記述場所は、titleの直下などカスタムフィールドを表示させたい場所です。

カスタムフィールドを表示させるための関数はいくつか種類があります。
全ての情報を表示させるなら「get_post_custom()」という関数を使用します。

この関数を使い、phpファイル内に以下のようなコードを記述します。

今回は、サービス価格というカスタムフィールドを追加したため、(”)内が「サービス価格」になっています。

またテンプレートタグ「the_meta()」を使う方法もあります。
その場合、以下のコードを記述します。

さらに、テンプレートタグ「the_meta()」では表示フォントや色をカスタマイズすることもできます。

他にも以下のコードを使用した方法もあります。

「$post_id」は、データの値を取得する記事のID、「$key」は表示させるカスタムフィールドの名前、「$single」はtrueあるいはfalseを入れます。
trueに設定されている場合、結果が1つの文字列、falseの場合にはカスタムフィールドの配列が表示されます。

プラグインを使う場合

プラグインを使う場合、phpファイルに入力するコードがプラグインごとに異なります。
今回は、「Advanced Custom Fields」を使用したので、専用のコードをご紹介します。

Advanced Custom Fieldsの場合は、「the_field();」という関数を使用します。
()内にはカスタムフィールド作成時に設定したフィールド名を入れます。
今回は、「price」を設定したので、コードは「the_field(‘price’);」になります。

まとめ

カスタムフィールドは複数人で運営しているサイトやショッピングサイトに便利な機能です。カスタムフィールドを設定するには、
●投稿画面に表示させる
●phpファイルにプレビューで表示させるためのコードを記述する
といったことが必要です。
phpファイルを編集することになるので、バックアップやコピーを取ってから作成しましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要