fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

Web制作
WordPress の「カスタムフィールド」とは?使い方や設定方法をご紹介
2020/06/17

初心者でも簡単にサイトが作れるWordPressですが、EC サイトやコレクションサイトなどを運営する際に知っておくべき機能に「カスタムフィールド」があります。WordPressを利用しているが初めて聞いた、という方も多いのではないでしょうか?

今回は、カスタムフィールドについて初心者~中級者向けに分かりやすく解説します。使いこなせるようになると、サイトが大きくなっていくにつれて増えていくコンテンツの管理がとても楽になるはずです。ぜひこの記事を参考にしながら導入してみてくださいね。

※WordPress 5.0 に搭載されたビジュアルエディター「Gutenberg(グーテンベルク)」の利用を前提とした記事です。

目次

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

ECサイト

カスタムフィールドとは、名前からも分かる通り自分好みに任意の情報を追加できる機能のことを指します。ユーザーに伝えたい情報を、漏れなく提供しやすくなりますよ。

「カスタムフィールド」を使ってできることは?

カスタムフィールドを使ってできることをひとことで表すと、カテゴリーごとの情報テンプレートの作成です。

例えば、大手ECサイトでは食品から家電製品、衣類まであらゆるカテゴリーの商品が販売されています。仮にすべての商品情報を、編集画面で一から手で打ち込んだらどうでしょうか?食品にはアレルギー表示、家電製品には保証期間の掲載…など、販売カテゴリーによってユーザーへ伝えたい情報はさまざま。想像するだけで、工数の多さに気が引けてしまいますよね。

しかし、カスタムフィールドではテンプレートを自由自在にカスタマイズできます。カテゴリーごとに絶対に入力が必要な項目をあらかじめ作成しておくことで、コンテンツ管理がしやすくなるのです。

また、カスタムフィールドはグーテンベルクに搭載されている機能ですが、プラグインを使って利用することも可能です。ちなみに「プラグイン」とは、ソフトウェアに機能を追加するために組まれたプログラムのこと。これを自身のWordPressに導入することで、カスタムフィールドをより簡単に設定できます。一方で、プラグインを利用すると性能の高さからサイトが重くなったり、相互性に問題が生じたりといった不具合がでる場合もあるので注意しましょう。

以上より、設定したい項目が多い・簡単にカスタムフィールドを利用したいという場合にはプラグインを利用し、数種類設定できれば構わない・ITの知見に自信があり設定をカスタマイズしたいという方はプラグインなしの設定をおすすめします。

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

メリット

これまでカスタムフィールドについて解説してきましたが、使うことで得られるメリットは何でしょうか?

【メリット】
・簡単にコンテンツ(商品、サービスなど)の管理ができる
・ユーザーに伝えたい情報の漏れがなくなる
・短時間で情報を編集できる
・カスタムフィールドに入力したデータを、自由に出力できる
・自由にレイアウトできる範囲が広がる

主には、上記のようなメリットがあげられるでしょう。冒頭でも説明した通り、カテゴリーごとに入力事項のテンプレートを作成できるので、コンテンツ管理が楽にできます。

ECサイトの場合、商品数やカテゴリーが増えていく中で、入力事項のテンプレートがあると、項目に沿って情報を記入すればよいので、必要な情報をユーザーへ漏れなく伝えることができてとても便利です。

また、ECサイトを利用するユーザーにとって嬉しい、絞り込み機能の搭載も可能です。「1,000円以下の商品を見たい」「送料込みのものだけ表示させたい」「評価が高い国産商品を調べたい」など、さまざまなニーズに応えることができますよ。必要事項を一から記載しなくてよいので、編集の時短にも繋がるのが嬉しいですよね。

データ出力ができるという点もメリットとしてあげられます。「商品全体の販売個数を確認したい」「衣類カテゴリーだけの売り上げが知りたい」「○○支店のデータだけ見たい」など、特定データの取り出しが可能です。マーケティングの視点からも使い勝手がよい機能といえるのではないでしょうか。レイアウトを変更できる箇所もあるので、WordPressに慣れてきたら自分好みにカスタマイズするのも楽しいかもしれませんね。

初心者の方だと設定にてこずるというデメリットがあるかもしれませんが、多くのメリットを得られるカスタムフィールド。自身のサイト構成に合わせて、ぜひ設定することをおすすめします。

カスタムフィールドの設定方法とおすすめプラグイン

プラグイン

ここでは、初心者~中級者の方に向けてカスタムフィールドの設定方法を解説します。カスタムフィールドの利用をより便利にするおすすめプラグインもご紹介しているので、ぜひ参考にしてみてくださいね。

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

WordPressの初期設定ではカスタムフィールドの機能が表示されていません。そのため、表示設定をする必要があります。以下の手順に沿って設定を進めてください。

①管理画面左側の項目から「投稿>新規追加」を選択する。
②編集画面になるので、右側の編集ブロックの上にある「 ⁝ 」をクリックする。
③「オプション」をクリックし、「カスタムフィールド」にチェックを入れる。
④編集画面の下側に「カスタムフィールド」が表示されるので、テンプレートにしたい項目を「名前」に、内訳を「値」に記入する。
(例)健康食品の酵素ドリンクの商品ページを作成する場合
  タイトルを追加:酵素ドリンク○○(商品名を入力)
文字を入力:スッキリとした味わいで飲みやすい商品です。(商品の説明文を記載)
名前:価格、原材料、発売日など(テンプレートにしたい項目を記載)
値:680円、黒糖・果物類・海藻類…、2020年6月など(項目に応じた値を記載)
※「カスタムフィールドを追加」をクリックすることで、次回からプルダウンでの選択が可能になります。
⑤右上の「公開」をクリック

上記で設定は完了しますが、サイト上に情報が反映されません。そのため、以下の手順でテーマファイルを編集する必要があります。また、使用しているテンプレートによって編集場所が異なるため事前によく確認しておきましょう。

⑥管理画面左側の項目から「外観>テーマエディター」を選択する。
⑦編集したい該当箇所にタグを挿入する。
 (例)酵素ドリンクの価格(680円)を表示させたい場合
    以下の文言、コードを該当箇所に挿入します。
商品価格は<?php echo post_custom('680円'); ?>です。
 
上記のタグ以外にも、設定したカスタムフィールドをすべて表示させるタグや画像表示をするタグなど、多くのものが存在します。設定したい内容に応じて、あらゆるタグを使ってみてくださいね。

おすすめのプラグイン

「難しいタグの挿入方法が分からない」「よりシンプルに使いたい」「設定したい項目が多い」という方は、プラグインの利用をおすすめします。いくつかプラグインをご紹介するので、自分にぴったりのものを見つけてみてくださいね。

●Meta Box(メタボックス)
・利用したい機能に応じ価格帯が豊富(無料、$79、$149、$349)
・インストール後にカスタムフィールド用プログラムを作る必要がある
・比較的細かい設定が可能

Meta Boxは、プラグインの中でも比較的カスタマイズがしやすいのが最大の特徴。インストール後にカスタムフィールド用プログラムを作らなくてはならないので、PHPやHTMLなどの知見がある方に向いているでしょう。しかし、プログラムを作るにあたって必要な関数は提供してくれるので、ゼロベースで作るよりは簡単に作成ができますよ。少々難易度は高いですが、WordPress中級者には人気のプラグインです。

●PIKLIST(ピックリスト)
・すべて無料で利用できる
・コードが比較的シンプルなので初心者でも使いやすい
・英語版のみ(2020年6月時点)

すべて無料で利用できるのが特徴のPIKLIST。プラグインの中でも比較的シンプルなコードを利用しているので、慣れればとても使いやすく感じるでしょう。一方で、現状では英語版の対応のみなので、英語に抵抗がない方におすすめです。

●Advanced Custom Fields(アドバンスドカスタムフィールズ)
・無料から有料までプランがある(無料、$25、$100)
・インストールしたらすぐにカスタムフィールドを編集できる
・カスタムフィールドの種類が豊富
・操作が簡単

カスタムフィールドのプラグインの中でも、最も定番といえるのがこちら。何よりも、初心者にやさしい操作性が人気のひみつです。無料プランでも、カスタムフィールドの種類が豊富に用意されているので、初めて利用する方にとっては十分な機能が備わっています。インストール後、すぐに編集ができるので難しい工程がないのもポイントです。

まとめ

マーケティング

サイトを毎日運営するのは大変ですが、Webにおいてスピード感はとても大切なものです。ユーザーにとって魅力あふれるサイトにするためにも、ぜひカスタムフィールドを使ってみてくださいね。今までよりも時短での編集が可能になり、管理もしやすくなるはずです。


(本文・よしたかあしょう)

SHARE

PLEASE CONTACT US

サングローブのサービスにご関心のある方は、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP