※当サイトではアフィリエイト広告を利用しています

WordPress

【カスタムフィールド】をAdvenced Custom Fieldsで作る方法

【カスタムフィールド】をAdvenced Custom Fieldsで作る方法

今回はWordPressのカスタムフィールドを簡単に作ることができるプラグイン
Advanced Custom Fieldsの使いかたをまとめてみたいと思います。

そもそもカスタムフィールドって?

まず、そもそもカスタムフィールドとはなんでしょうか。

カスタムフィールドはいわゆるWordPressの「カスタム3兄弟」の中の1つで、
投稿入力画面にタイトルと本文以外の入力項目を追加することができます。

【カスタム3兄弟】

  • カスタムフィールド
  • カスタム投稿タイプ / カスタムポストタイプ
  • カスタムタクソノミー / カスタム分類

WordPress自体にもカスタムフィールド機能はついていますが、
プラグインを入れたほうがより使いやすく、より簡単に、
カスタムフィールドを作ることができます。

どういうときに便利なの?

カスタムフィールドはどういうときに便利な機能なのでしょうか。

例えば、下記のようなサイトを運営していて、毎回投稿する内容が共通していれば
都度その形式で記事を作るより、フォーマット化した方が便利ですよね。

【個人サイトの例】

  • 書評ブログ→ タイトル / 著者 / ジャンル / 評価 / 発売年度 etc
  • 映画の感想を書いているブログ→ 作品名 / 監督 / 主演 / 評価 / 公開年度 etc

【企業サイトの例】

  • 自社商品ページ→ 商品名 / 価格 / 商品写真 / レビュー平均 etc
  • お客様の声→ 名前 / 年代 / 性別 / 評価 / 顔やアイコンなどの写真 etc

また固定ページの役割をしたページでも、サイト管理者がコンテンツを更新する場合、
担当者がWordPressに詳しいとは限りません

カスタムフィールドを導入することで
管理画面から簡単に内容の編集ができるようになり、操作性が高くなります。

Advanced Custom Fieldsの使いかた手順

それではプラグインを使って、
カスタムフィールドを作る方法を書いていきたいと思います。

手順1:プラグインをインストールして有効化する

下記から「Advanced Custom Fields」を検索し、インストール & 有効化します。

管理画面 > プラグイン > 新規追加

WordPressのAdvanced Custom Fieldsプラグイン

有効化すると、管理画面のメニューに「カスタムフィールド」の項目が追加されるので、
選択して「新規追加」をクリックします。

手順2:カスタムフィールドの項目を登録する

カスタムフィールドの項目内容を登録していきます。

「フィールドグループを新規追加」から
登録するカスタムフィールドのまとまりに名前をつけます。

ACF設定「フィールドグループを新規追加」

「+フィールドを追加」をクリックすると、
カスタムフィールドの設定項目が出てくるので入力していきます。

ACF設定「フィールドを追加」

主な設定項目を挙げてみます。

  • フィールドラベル:
    項目の投稿入力画面で表示される項目名。
  • フィールド名:
    テンプレートファイルにフィールドラベルで編集した項目を埋め込むために使う文字列。(スペースは不可、アンダースコアとダッシュは使用可能。)
  • フィールドタイプ:
    入力形式を選択。
    (テキスト、テキストエリア、数字、画像など。他にも様々な形式がある。)
  • 必須か?:
    入力項目が必須かどうか選択。(必須に設定した場合、未入力だとエラーになる。)
ACFの設定画面1 ACF設定画面2

フィールドタイプには様々な入力項目があります。

バズ部さんの記事で写真付きでとても詳しく紹介されていたので、URLを貼っておきます。

 

フィールドを追加したい場合は、「フィールドを追加」ボタンをクリックします。

次に、上記で設定した項目をどのページに表示させるか「位置」から設定します。

ACF「位置」設定

また「ルールを追加」をクリックすることで、
複数の種類のページにカスタムフィールドを設定することができます。

手順3:投稿入力画面からカスタムフィールドの値を入力する

手順2の「位置」で設定したページの編集画面にいくと、
設定したカスタムフィールドが表示されているので、フィールドに対する値を入力します。

ACFを設定したフィールドの編集ページ

手順4:サイトに入力値が表示されるようテンプレートファイルを編集する

これだけだとサイトに入力内容が表示されないので、
テンプレートファイルに内容を反映させるためのコードを書きます。

カスタムフィールドの項目を埋め込みたい場所に、下記を記述していきます。

<?php the_field('フィールド名'); ?>

「フィールド名」の部分は、手順2で登録した項目を埋め込むための文字列です。

こうすることでファイルを更新すると、
カスタムフィールド上で入力した内容がサイトに反映されるようになります。

以上、カスタムフィールドの作り方でした。

 

【WordPress】カスタム3兄弟の使い方まとめ
【WordPressテーマ作成】カスタム3兄弟の使い方まとめ今回はWordPressのカスタム3兄弟についての記事が少したまってきたのでまとめてみたいと思います。...
【Advanced Custom Fields】他のページでカスタムフィールドの値を表示する方法
【Advanced Custom Fields】他のページでカスタムフィールドの値を表示する方法カスタムフィールドを編集するのは特定の固定ページであっても、他のページでフィールドの値を表示させたいことってありますよね。 今回はWordPressのカスタムフィールドを作成できるプラグインAdvanced Custom Fields(略:ACF)を使って、他のページでフィールド値を表示する方法を備忘録として残しておきます。...
【Advanced Custom Fields】カスタムフィールドで背景画像を表示する方法【備忘録】
【Advanced Custom Fields】カスタムフィールドで背景画像を表示する方法【備忘録】Advanced Custom Fields(略:ACF)を使ったカスタムフィールドで登録した画像を背景画像として出力したいことがありました。 正しいやり方なのか自信はありませんが、備忘録として残しておこうと思います。...
【WordPress自作テーマ作成】全体の流れをまとめてみる
【WordPressテーマ作成】全体の流れをまとめてみる今回はWordPressで自作テーマを作るときの全体の流れをまとめてみたいと思います。...