トライアーチ

ノウハウ

HOME > ノウハウ > WordPressでカスタムフィールドを設定する方法。画像付きで詳しく解説
wordpress-guide-custom-field

WordPressの「カスタムフィールド」とは、記事の投稿とは別の情報を追加して、サイトに掲載することができる機能のことです。

カスタムフィールドを使うことで具体的に、

  • 既存の情報に加え、
  • 任意で設定した情報

以上をピックアップすることが可能です。

ここでは、Web担当者向けにWordPressのカスタムフィールドを設定する方法について解説します。

ご相談はこちら

カスタムフィールドとはなにか

WordPressのカスタムフィールドとは、通常投稿の「タイトル」や「本文」のほかに、任意で決めたフィールドも設定することができる機能のことです。

たとえば、通常の投稿とは違って以下のような表示画面を、フィールドから入力するだけで投稿・更新することができます。

そのためカスタムフィールドを実装することで、自社で運用する商品情報を更新するときに、

  • 記事の中の価格を変更するのではなく、
  • 補助的に作成された入力欄の値だけを変更すれば良い

といった状態になります。

ご相談はこちら

カスタムフィールドの実装例

カスタムフィールドを使わない状態と、使った状態でできることの違いを以下にまとめました。

項目 カスタムフィールド未使用 カスタムフィールド仕様
入力フィールド
  • タイトル
  • 本文
  • タイトル
  • 本文
  • 任意の設定項目
  • etc…
設定フィールド
  • タグ
  • カテゴリー
  • アイキャッチ
  • タグ
  • カテゴリー
  • アイキャッチ
  • etc…

以下にカスタムフィールドを実装した際のイメージを、まとめてみました。

商品情報をギャラリー形式で掲載する例

カスタムフィールドの実装例1

たとえば以上のような商品情報をギャラリー一覧で表示した場合、

  • 素材
  • サイズ

といった、定型の情報をカスタムフィールドで設定できます。

施工実績を掲載した例

カスタムフィールドの実装例2

施工実績を掲載した例では、

  • 予算
  • 施工
  • エリア

といった定形の情報を、カスタムフィールド上から編集・設定できます。

画像や写真の並び替えは知識が必要

WordPressのビジュアルエディタを利用して、写真や画像を上記イメージのように並び替えを行うには、

  • WordPressの操作に慣れている
  • HTMLの知識がある

といったように、初心者にとって導入のハードルが高いと言えます。

しかし、カスタムフィールドを設定することで、

  • ギャラリーとして画像を掲載
  • 任意の情報のみを簡単に更新

といったことが簡単にできるようになります。

カスタムフィールドの設定について相談してみる

カスタムフィールドをWordPressに設定する方法

カスタムフィールドをWordPressに設定する方法は、以下の2とおりです。

1. 投稿ページからカスタムフィールドを設定する

カスタムフィールドを追加したい投稿ページの右上の「表示オプション」をクリック。

表示オプションを選択

表示オプションが出てくるので、「カスタムフィールド」の項目にチェックを入れます。

カスタムフィールドを選択

すると投稿ページの下に、カスタムフィールドの入力欄が表示されます。(クリックすると入力欄が表示されます。)

カスタムフィールドが表示された図

新しいカスタムフィールドを作成する場合は、名前と値の小入力欄に任意の値を設定し、「カスタムフィールドを追加」をクリックします。

カスタムフィールドに値を設定

カスタムフィールドに任意の入力欄が設定されました。

カスタムフィールドに設定が追加された

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

設定したカスタムフィールドを、記事の中に表示します。

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

  • the meta()テンプレートタグを
  • WordPressループ内に設置する

といった作業が必要です。

またthe meta()テンプレートタグを記事の最初や、最後の記事のメタデータセクションに含めるという方法も使われています。

今回設置する場所は、WordPressのphpファイルの中にthe meta()テンプレートタグを設置して更新を行います。

<?php the_meta(); ?>

ただし、phpファイルに上書きするため、編集を失敗するとサイト画面の崩れたりする恐れがあります。

またWordPressテーマによっては、書き込む先のphpファイルが異なるため、編集は慎重に行わなければなりません。

もしも、

  • 設定が崩れてしまうかもしれない
  • どこにタグを設置すればよいか分からない

といったことが想定される場合は、失敗する前に制作会社へ先に相談してみると良いでしょう。

ご相談はこちら

2. WordPressのプラグインで実装する

カスタムフィールドをプラグインで設定するには「Advanced Custom Fields」を利用します。

Advanced Custom Fields
Advanced Custom Fieldsプラグイン

Advanced Custom Fieldsでは、カスタムフィールドの出力タイプを

  • テキスト
  • 画像ファイル
  • ページリンク

といった、さまざまな項目で設定することが可能です。

また、Advanced Custom Fieldsは、WordPressデフォルトのカスタムフィールド機能とも相性が良いです。

もしphpファイルの編集でカスタムフィールドの設定が難しい場合は、Advanced Custom Fieldsプラグインを利用して、カスタムフィールドの実装を行うのもオススメです。

ただし、プラグインで実装した場合は、WordPressの利用しているテーマファイルの設定と機能が競合し、うまく反映されないこともあります。

もし利用方法が分からない場合は、弊社でもご相談を承っておりますので、ぜひお気軽にご相談ください。

カスタムフィールドの設定を相談をしてみる

WordPressにカスタムフィールドを設定する方法まとめ

WordPressにカスタムフィールドを設定する方法について、ご紹介しました。

投稿ページでカスタムフィールドを表示させるまでは簡単に再現できると思いますが、実際に記事に反映させようとすると、phpファイルの編集が不可欠です。

プラグインの設定でも、WordPressのテーマによってはカスタムフィールドの値の反映が重複することがあるため、カスタムフィールドの設定は慎重に行いましょう。

もし自分でカスタムフィールドの設定を行ってもうまくいかないときは、ぜひお気軽に弊社までお問い合わせください。

ご相談はこちら

WordPressサイト制作・構築はトライアーチ。静的HTMLをWordPress化は格安料金39,800円!初回限定総額10%OFFキャンペーン実施中!制作会社様向けサービスあり。保守・管理・更新代行も承ります。

ページトップへ