WordPressで簡単にカスタムフィールドを設置できるプラグイン「Advanced Custom Field」の使い方

| カテゴリー : WordPress

こんにちは、福岡のホームページ制作アイドットデザインのちゃんけいです。

今回はWordPressのプラグイン「Advanced Custom Field」を使って、カスタムフィールドを設定する方法を紹介します。

それではどうぞ!

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

WordPressをインストールした直後は、投稿画面にタイトルと本文しかありません。

カスタムフィールドを追加すると、別枠でテキストやチェックボックス、画像などを追加で入力できるエリアを設けることができます。

例えばイベント情報を掲載する際に、タイトルや本文以外に開催場所・時間といった情報を本文とは
別のデザインで載せたい…!!という時に知っていると役立ちます。

Advanced Custom Field

カスタムフィールドの実装方法は大まかに2通りあり、functions.phpに書く方法とプラグインを追加して管理画面で作る方法があります。

今回は「Advanced Custom Field(以下 ACF)」というプラグインを使う方法を紹介します。

インストール

WordPressの管理画面より、「プラグイン → 新規追加」をクリックし「Advanced Custom Field」で検索。
画像のようにインストールして、有効化してください。

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

管理画面より、カスタムフィールドを開き「新規追加 > フィールドを追加」を押します。

上の画像は作成するカスタムフィールドを決める部分です。

最低限抑えておきたい項目は3つ。他の項目もしっかり理解するとより使いやすく設定することができます。

  • フィールドラベル:管理画面に表示される名前
  • フィールド名:PHPで出力する時に使う項目
  • フィールドタイプ:テキストやチェックボックスなどカスタムフィールドの入力形式を選ぶ項目

次に「位置」と書かれた部分、ここでルールを設定することで投稿タイプや固定ページ、カテゴリ等にカスタムフィールドを表示できます。

こちらを設定しなくては、カスタムフィールドは表示されないので注意してください。

最後に「Settings」と書かれた部分、入力時の表示位置や画面での表示非表示等を設定することができます。

変更しなくてもカスタムフィールドは表示できるので、しっかりと学ぶまでは触らなくても問題ありません。

カスタムフィールドの出力方法

記事に入力されたカスタムフィールドを、記事詳細ページで表示する方法を紹介します。

画像のようにカスタムフィールドを設定したとします。

表示するには、ACFの用意している関数the_field()かget_field()を使うことができます。

参考URL

未入力の際にエラーになってしまう項目もあるので、if文を使って空の場合は表示しないようにします。

まとめ

ACFは簡単にカスタムフィールドが入れられる便利なプラグインです。

公式のドキュメントを読んで扱えるようになると、WordPressの実装時に強い味方になってくれると思います。

項目によって出力される内容が変わるので実際に使ってみて、柔軟にコードを書き換えてみてください。

それではまたWordPressの記事でお会いしましょう!

SEOノウハウを駆使したホームページ制作で、企業の認知拡大やブランディング向上にお応えします。

儲かる会社はやっている!小さな会社のホームページ集客の鉄則

無料の資料をダウンロード

×

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。