webエンジニア発信 | 少しためになるブログ

プログラミングの学習方法や学習する上で大切な考え方など、僕が初心者の時に知っておきたかったことなどを中心に発信しています。

WordPressプラグイン「ACF」で出来ること

たむ

WordPressでオリジナルテーマを作っていると、

「この文章を管理画面から変更できるようにしたい」

「会社情報だけ入力欄を分けたい」

「施工事例ごとに金額や場所を登録したい」

といった場面が出てきます。

そんなときに便利なのが、**ACF(Advanced Custom Fields)**というWordPressプラグインです。

ACFを使うことで、WordPressの投稿画面に自分で好きな入力項目を追加できます。

今回は、ACFを使うと具体的に何ができるのかを紹介します。


ACFとは?

ACFは「Advanced Custom Fields」の略で、WordPressのカスタムフィールドを簡単に作成・管理できるプラグインです。

通常のWordPress投稿画面には、

  • タイトル

  • 本文

  • アイキャッチ画像

  • カテゴリー

などがあります。

ACFを使えば、ここにさらに、

  • 会社名

  • 住所

  • 電話番号

  • 料金

  • 日付

  • 画像

  • URL

  • 担当者名

など、サイトに合わせた入力欄を追加できます。

つまり、

WordPressの管理画面を、そのサイト専用の入力画面にカスタマイズできる

というイメージです。


① テキスト入力欄を追加できる

一番基本的なのが、テキストフィールドです。

例えば施工事例ページなら、

  • 施工場所

  • 工事期間

  • 施工内容

  • 費用

などを、それぞれ別の入力欄として作れます。

通常の投稿本文に全部入力するよりも、

「ここには施工場所を入力する」

「ここには費用を入力する」

と決まっているので、サイトを更新する人も迷いにくくなります。


② 画像を登録できる

ACFでは画像専用の入力欄も作れます。

例えば施工事例なら、

  • 施工前の画像

  • 施工後の画像

をそれぞれ登録することもできます。

Before画像とAfter画像を別々のフィールドにしておけば、PHP側で決められた位置に表示できます。

制作実績やスタッフ紹介などでも非常に便利です。


③ URLやリンクを登録できる

URL専用のフィールドも作れます。

例えば制作実績ページで、

「実際のWebサイトを見る」

というボタンを表示したい場合、

管理画面からURLだけ登録できるようにできます。

HTMLを毎回編集する必要がありません。


④ 日付を入力できる

日付専用のフィールドも用意できます。

例えば、

  • イベント開催日

  • 施工完了日

  • 公開日

  • キャンペーン終了日

などに使えます。

普通のテキスト入力欄でも日付は入力できますが、日付専用フィールドを使った方が入力ミスを防ぎやすくなります。


⑤ 選択肢を作れる

ACFでは、

  • セレクトボックス

  • ラジオボタン

  • チェックボックス

なども作れます。

例えば施工事例で、

「建物の種類」

という項目を作って、

  • 木造

  • 鉄骨造

  • RC造

から選択できるようにすることもできます。

入力する人によって、

「木造住宅」

「木造」

「木造建築」

のように表記がバラバラになることを防げます。


⑥ ON・OFFの切り替えもできる

True / Falseというフィールドを使えば、

「表示する・表示しない」

のような切り替えもできます。

例えば、

「おすすめマークを表示する」

という項目を作っておき、

ONになっている投稿だけ、

「おすすめ」

というラベルを表示するといった使い方ができます。

管理画面から簡単に表示を切り替えられるので便利です。


⑦ ページごとに入力項目を変えられる

ACFの便利なところは、すべてのページに同じ入力欄を表示する必要がないことです。

例えば、

固定ページが「会社概要」の場合だけ、

  • 会社名

  • 代表者

  • 所在地

  • 電話番号

を表示する。

「施工事例」の投稿タイプの場合だけ、

  • 施工場所

  • 施工内容

  • 施工前画像

  • 施工後画像

を表示する。

といった設定ができます。

これによって、管理画面がかなり分かりやすくなります。


⑧ カスタム投稿タイプと組み合わせるとさらに便利

ACFは、カスタム投稿タイプと組み合わせるとかなり便利です。

例えば、

「施工事例」

というカスタム投稿タイプを作ったとします。

そこにACFで、

  • 施工場所

  • 施工期間

  • 建物種別

  • 施工内容

  • Before画像

  • After画像

などの項目を追加します。

すると、管理画面から施工事例を追加するときに、

必要な情報を入力して「公開」を押すだけで施工事例ページを作れるようになります。

WordPressに詳しくない人でも更新しやすい管理画面を作れるのが大きなメリットです。


⑨ PHPから入力した内容を取得できる

ACFで入力した内容は、WordPressテーマ側のPHPから取得できます。

例えば、

「company_name」

というフィールド名を作った場合、

<?php the_field('company_name'); ?>

と書くことで、管理画面から入力した会社名を表示できます。

取得だけしたい場合は、

<?php
$company_name = get_field('company_name');
?>

のように書くこともできます。

ACFを使う場合、

管理画面で入力する部分と、PHPで表示する部分はセット

で考えると分かりやすいです。


ACFを使うメリット

ACFの大きなメリットは、

サイトを作った人以外でも更新しやすくなること

だと思います。

例えばクライアントにWordPressサイトを納品するとき、

「この部分を変更するときはHTMLのここを書き換えてください」

と言っても、現実的には難しいです。

しかし、

「料金」の入力欄

「画像」の入力欄

「URL」の入力欄

のように分かれていれば、WordPressに詳しくなくても更新できます。

制作者側としても、入力方法をある程度固定できるので、レイアウトが崩れる可能性を減らせます。


ACFを使わなくてもWordPressは作れる?

もちろん作れます。

すべてPHPに直接書いたり、通常の投稿本文だけを使ってサイトを作ることもできます。

ただし、更新するたびにコードを変更しないといけないサイトになってしまうと、WordPressを使うメリットがかなり減ってしまいます。

WordPressの強みは、

管理画面から自分で情報を更新できること

です。

その管理画面をサイトに合わせて使いやすくするために、ACFが役立ちます。


ACFはどんなサイトで使える?

ACFは特に、

  • コーポレートサイト

  • 店舗サイト

  • 不動産サイト

  • 採用サイト

  • 制作実績サイト

  • 施工事例サイト

  • スタッフ紹介

  • 商品紹介サイト

などと相性が良いです。

同じレイアウトの情報を何件も登録するサイトでは、かなり使いやすいです。


まとめ

ACFを使うと、WordPressの管理画面にサイト専用の入力欄を追加できます。

例えば、

  • テキストを入力する

  • 画像を登録する

  • URLを登録する

  • 日付を入力する

  • 選択肢を作る

  • ON・OFFを切り替える

  • カスタム投稿タイプごとに入力欄を変える

といったことができます。

WordPressでオリジナルテーマを作り始めた頃は、

「PHPに直接書けばいいじゃん」

と思うこともあります。

ですが、実際のWeb制作では、誰が更新するのかまで考えることが重要です。

ACFを使えるようになると、

「表示するサイトを作る」

だけではなく、

「運用しやすいWordPressサイトを作る」

という考え方ができるようになります。

WordPress制作をしているなら、カスタム投稿タイプと合わせて覚えておきたいプラグインの一つです。