Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. 初心者必見!WordPressで便利なカスタムフィールドとは?設定する手順とプラグインもまとめて紹介
  1. action
  2. URLをコピーしました

初心者必見!WordPressで便利なカスタムフィールドとは?設定する手順とプラグインもまとめて紹介

  • 2017年8月18日
  • ニュース

WordPress には、「カスタムフィールド」と呼ばれる、記事のタイトルや本文以外に別の情報を追加してサイトに掲載する属性を設定できる機能があります。

カスタムフィールドを使えば、「ピックアップ商品の中から、価格が500円以上のものを最新5件だけ表示する」「国産カテゴリで評価が5つ星のものをランダムに10件表示する」など細かな条件を指定できます。

今回は、 WordPress を扱っているなら絶対に知っておきたいカスタムフィールドについて、初心者〜中級者向けに設定方法を解説します。
カスタムフィールドの設定は初心者にとっては難しいところもあるので、 プラグイン をつかって簡単に導入する方法もあわせてご紹介します。

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

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

ブログ 記事であれば、「 タイトル 」「本文」だけで事足りるのですが、例えば次のようなテーマだと、追加で情報をまとめておきたい場合があります。

不動産サイト:
  場所・交通情報・築年数・賃料・敷金礼金・おすすめポイントなど
レストランのレビュー
                  ブログ
                :
  場所・交通情報・評価・価格帯・おすすめ料理など
アパレルショップ:
  ブランド・価格・サイズ・在庫数など
日記:
  今日の天気・今日の気分・一言コメントなど

こうした情報を本文に書き込んで管理することもできますが、「カスタムフィールド」を使うとさらに便利です。
カスタムフィールドを使えば、「 タイトル 」や「本文」だけではなく任意のフォームを追加することができるだけでなく、テンプレート タグ を駆使することで、後ほど「評価が高い順に並べ替える」といったこともできるようになります。

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

カスタムフィールドは、通常初期画面では表示されていないので、表示するように設定する必要があります。

まず、 ページ 右上に「表示オプション」があるので、そこをクリックします。

option.png Screenshot on WordPress .org

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

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

Custom-field-box.png Source: WordPress Codex

「カスタムフィールドを追加」で新しく属性(キー)を追加することで、次回以降はプルダウンメニューから属性を選択することができます。

カスタムフィールドを記事に表示してみよう

post_custom()関数

しかし、カスタムフィールドはそのままでは表示することができません。
カスタムフィールドの値を、テンプレートソース内の任意の箇所に表示させたい場合が多いと思いますが、指定した数値だけを出したい場合には、テンプレート タグ 「post_custom()」を使って以下のように記述します。

<?php echo post_custom('値'); ?>

例えば、「商品価格」という属性をカスタムフィールドで作って、バナナの記事で価格を「100円」と入力した場合、その価格を表示したいとします。

価格は<?php echo post_custom(‘商品価格’); ?>です。

上記のように記述すると、以下のように表示されます。

価格は100円です。

ぶどうの記事で価格を「150円」とすれば、ぶどうの記事を閲覧しているときには「価格は150円です。」と表示されるということです。

the_meta()関数

また、設定したカスタムフィールドをすべて表示したい場合には、テンプレート タグ 「the_meta()」を使うのもいいでしょう。

<?php the_meta(); ?>

すると、ソースコードではこのように表示されているはずです。

<ul class='post-meta'>
<li><span class='post-meta-key'>今読んでいる本: </span>変身</li>
<li><span class='post-meta-key'>作者: </span>フランツ・カフカ</li>
</ul>

さらに、カスタマイズすることもできます。

.post-meta {color: red;}
.post-meta-key {font-weight: bold;}

さらに高度なテクニック

すべてのデータを取得するには、「getpostmeta()」関数を使います。

<?php get_post_meta($post_id, $key, $single); ?>

「$post_id」は、データの値を取得する記事のIDなので、「$post->ID」を使って記事のIDを取得しましょう。
「$key」には取得する名前の文字列を入れます。
「$single」はboolean型(true/false型)で、trueに設定されている場合は結果を1つの文字列として、falseの場合にはカスタムフィールドの配列を返します。

例えば、カスタムフィールドから果物の商品画像の URL を取得して表示する場合には、以下のようなコードを利用します。
この例では、 サムネイル 画像の URL が「thumb」という名前でカスタムフィールドにあります。

<?php if ( get_post_meta( get_the_ID(), 'thumb', true ) ) : ?>
<h2>果物の商品画像:</h2>
<img class="thumb" src="<?php echo get_post_meta( get_the_ID(), 'thumb', true ) ?>" alt="<?php the_title(); ?>" />
<?php else: ?>
商品画像がありません
<?php endif; ?>

これで、商品画像がある場合には画像を表示し、ない場合には「商品画像がありません」を表示します。

カスタムフィールドを便利にする プラグイン

WordPress で標準で用意されているカスタムフィールド自体、非常に汎用性が高く便利ではありますが、 プラグイン を使えばさらに便利になります。

ここでは、特におすすめのカスタムフィールドを便利にする プラグイン を3つご紹介します。

Advanced Custom Fields

01.png Screenshot on WordPress .org

Advanced Custom Fieldsは、通称「ACF」と呼ばれているカスタムフィールド プラグイン の定番とも呼べる プラグイン です。
カスタムフィールドの出力タイプを、 テキスト やWYSIWYG、画像やファイル、 ページ リンク や日付ピッカーなどから選択でき、ネイティブの WordPress カスタムフィールドとの互換性が抜群です。

https://ja.wordpress.org/plugins/advanced-custom-fields/

Custom Field Template

02.png Screenshot on WordPress .org

Custom Field Templateは、初心者でも簡単にテンプレート タグ を扱うことができるシンプルな プラグイン です。
専用の簡単なコードでテンプレートを作成すれば、簡単にホームページに追加の属性を表示することができます。

https://ja.wordpress.org/plugins/custom-field-template/

Custom Field Suite

03.png Screenshot on WordPress .org

Custom Field Suiteも初心者に非常に扱いやすい プラグイン の一つです。
「フィールドグループ」と呼ばれるグループを作成し、複数のカスタムフィールドをまとめることができます。
また、配置ルールを使って、フィールドグループを並べ替えることも可能です。

https://ja.wordpress.org/plugins/custom-field-suite/

まとめ

カスタムフィールドを使うことで、投稿 コンテンツ を ブログ 記事以上の価値にすることができます。
ちょっとしたコードを追加するだけで、データに表示期限を付け加えたり、工夫次第でさまざまな使い方ができるのも特徴です。

自分なりの使い方を見つけて、ご自身のサイトをさらに魅力的にしていきましょう。

関連記事

  • 【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選
  • "地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介
  • ライバルに差を付けたい!HTMLコーダー必見のdl dt ddタグの基礎~応用
  • シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?
  • 検索エンジンのインデックスを早める為に必須!XMLサイトマップの基本を解説

関連記事

  • 【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選
  • "地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介
  • ライバルに差を付けたい!HTMLコーダー必見のdl dt ddタグの基礎~応用
  • シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

酒井 涼

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
  
>> 執筆記事一覧はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

急成長するInstagramの動画と動画広告

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

経営判断を加速化!ERPの基本とメリット・デメリット

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

新しくなったSearch Console(サーチコンソール)の導入と使い方について

現会員424,951人

ログインはこちら

おすすめ記事

【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選

"地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介

ライバルに差を付けたい!HTMLコーダー必見のdl dt ddタグの基礎~応用

シンプルで美しい!Google発のUIフレームワーク「Material Components for the Web」とは?

検索エンジンのインデックスを早める為に必須!XMLサイトマップの基本を解説

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら