【WordPress】Advanced Custom Fieldsの使い方

シュウ

今回は【WordPress】Advanced Custom Fieldsの始め方と使い方についての解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
WordPressのカスタムフィールドについて
更新作業を楽にしたい方向け　特定の情報を入力する専用のフォームを設置したい方向け

[記事の内容]

Advanced Custom Fieldsについて

Advanced Custom Fields(ACF)を使うと、WordPressの標準機能にはない柔軟な入力項目を簡単に追加できます。
これにより、専門的な知識がなくても、Webサイトのコンテンツを効率的に管理・更新できるようになります。
このプラグインを紹介する理由は3つあります。

POINT

投稿や固定ページだけでなく、ユーザー情報やタクソノミー（カテゴリー）など、
WordPressのあらゆる部分にカスタムフィールドを追加できます。
HTMLの知識がない人でも簡単にサイト(管理画面)を更新でき、作業ミスを防げます。
WordPressの管理画面上で誰でも簡単にカスタムフィールドを作成・管理できます。

デメリット

多くのカスタムフィールドや複雑なリピーターフィールドを使用すると、
データベースへのクエリが増え、サイトの表示速度が低下する可能性があります。
有料版の機能に依存する：リピーターフィールドやフレキシブルコンテントといった有料版（PRO版）の機能が必要になります。

以上の理由が上げられます。
公式サイトは以下になります。

プラグインのインストール方法は上記の「プラグイン導入方法」からご確認ください。
次に使用についての解説です。

通常版とPRO版の違いについて

通常版のACF（Advanced Custom Fields）とPRO版の主な違いは、機能の豊富さとライセンスにあります。
PRO版は、通常版のACFには含まれない機能が存在します。

PRO版の主要な追加機能

リピーターフィールド（Repeater Field）：同じフィールドのセットを繰り返し追加できる機能です。
フレキシブルコンテント（Flexible Content Field）：複数のレイアウトブロックを自由に組み合わせてコンテンツを作成できる機能です。
ギャラリーフィールド（Gallery Field）：複数の画像をまとめてアップロードし、ギャラリーとして簡単に管理・表示できる機能です。
クローンフィールド（Clone Field）：既存のフィールドやフィールドグループを複製して再利用できる機能です。

※個人的によく使用するのは、リピーターフィールド（Repeater Field）です。
これ1つでサイトの更新箇所の自由度がかなり上がります。

どちらを選ぶべきか？

Webサイトの規模や要件に応じて、適切なバージョンを選択することが重要です。
・通常版のACFには、シンプルなカスタムフィールド（テキスト、画像など）をいくつか追加したいだけであれば、無料の通常版で十分です。
・PRO版のACFには、繰り返し要素、複雑なレイアウトのページ、ギャラリー機能など、より高度な機能が必要な場合は、ACF PROの購入を検討するのが良いでしょう。

その他

サポート: ACF PROには、開発者からの公式サポートが含まれています。
価格: 通常のACFは無料で利用できますが、ACF PROは有料です。
有料ライセンスは、1つのサイトから無制限のサイトまで、複数のプランが用意されています。

Advanced Custom Fieldsの使い方

ACFは基本は管理画面でカスタムフィールドを生成し、phpファイルにコードを埋め込み、
管理画面に戻り、文字を入力することでWebサイト上に反映します。

●プラグインをインストール: プラグインをインストール後、「有効化」を選択

●1:カスタムフィールド: 画面左の「フィールドグループ」を選択します。

●2:カスタムフィールド: 画面上の「新規追加」を選択します。

管理画面の設定について

●3:新規フィールドグループを追加: フィールドグループを新規追加、「タイトル」を入力します。
例：トップページ、会社概要、など分かりやすい名前にしておきましょう。

●4:フィールド: カスタムフィールドを生成します。
ここは下記で詳しく解説いたします。

●5:設定-ロケーションルール: ロケーションルールは、どのページに表示させるかの設定を行います。

●5:設定-プレゼンテーション: プレゼンテーションでは、カスタムフィールの位置、画面右の項目にチェックを入れた項目は非表示になります。

●6:保存: 「変更内容を保存」で保存します。

注意！
Advanced Custom Fieldsの設定はこまめに「保存」しておきましょう。

位置について

上記の位置につい詳しく解説します。

●1:投稿ページ・カスタム投稿: 投稿タイプを選択し投稿を選択します。
カスタム投稿の場合は投稿タイプを選択し会社概要や実績などをカスタム投稿を選択します。

●2:固定ページ: ページテンプレートを選択し固定ページ名を選択します。

●3:投稿ページ・カスタム投稿&固定ページを設定する場合: 「ルールグループを追加」を選択し、同じように設定いたします。

フィールドの設定について

ACFで作成したカスタムフィールドに設定したラベルが、投稿や固定ページの編集画面で表示されます。

●フィールドタイプ: ここでは、「テキストや、画像」などを選択します。

●フィールドラベル: 管理画面に反映されるため、分かりやすい名前を入力しましょう。

●フィールド名: 日本はNGです。スペースは不可、アンダースコアとダッシュは使用可能です。
例：「company_name」「works_name」など

この通りに固定ページへ反映されていれば、カスタムフィールドの作成は完了です。

Advanced Custom Fieldsの出力方法

上記の解説で、カスタムフィールドの作成は完了しましたが、現状のままではWebサイトに範囲はしません。
以下のようにphpファイルにコード記述します。

変更前
<h2></h2>
↓変更後
<h2><?php the_field('company_name'); ?></h2>
↓または
<?php if( get_field('company_name') ): ?>
<h2><?php the_field('company_name'); ?></h2>
<?php endif; ?>

になります。
2パターンをご紹介しましたが、簡単に解説いたします。

the_fieldの設定について

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

利点

シンプルで最も短く、簡単に記述できます。

欠点

意図しない出力: フィールドが空でも、the_field()が記述されている場所に何も出力されない代わりに、意図しないHTML（例: divタグなど）が残ってしまう可能性があります。

if(get_field())の設定について

<?php if( get_field('company_name') ): ?>
<h2><?php the_field('company_name'); ?></h2>
<?php endif; ?>

利点

エラー防止: フィールドが空の場合、
不要なHTMLタグ（例: p〜/p)が出力されるのを防ぎます。
メンテナンス性: 値がない場合に余計な空行が生成されないため、HTMLコードがすっきりします。

欠点

コードが長くなるため、シンプルに出力するだけなのに、少し記述が長くなります。

the_field() は、フィールドに必ず値が入ると分かっている場合や、単純なテキストを表示したい場合に便利です。
if(get_field())で囲む方法は、フィールドに値が入るか分からない場合や、空の場合にHTMLタグも非表示にしたい場合に安全な記述方法です。
一般的には、if(get_field())で囲む方法が推奨されます。

テキストについて

ここからは、フィールドタイプについての解説になります。
主によく使うものに対して出力コードを解説していきます。

<!--テキスト-->
<?php if( get_field('company_name') ): ?>
<h2><?php the_field('company_name'); ?></h2>
<?php endif; ?>

テキストエリアについて

テキストエリアで入力されたbrダグ(改行)はWebサイト上で反映されず、1行で表示されます。
改行をする場合はコードを書き換える必要があります。
基本的には、「テキスト」同じコードになります。

<!--テキストエリア-->
<?php if( get_field('フィールド名') ): ?>
 <?php the_field('フィールド名'); ?>
<?php endif; ?>

<!--テキストエリア改行-->
<?php 
$text_area_content = get_field('フィールド名'); 
if ($text_area_content): ?>
 <?php echo nl2br($text_area_content); ?>
<?php endif; ?>

このコードは、フィールドに値があるかを確認し、nl2br()関数で改行を反映させてから出力します。
これにより、入力された通りのレイアウトがWebサイト上でも再現されます。

※「プレゼンテーション」のタブで行の指定や、改行の指定も可能になります。

画像について

ACFの「画像」フィールドの戻り値の形式は、用途によって使い分けるのが良いでしょう。
一般的には、最も柔軟な「画像配列」「画像URL」がおすすめです。

●フィールドタイプ: 「画像」を選択してください。

●フィールドラベル: 管理画面に反映されるため、分かりやすい名前を入力しましょう。

●フィールド名: 日本はNGです。スペースは不可、アンダースコアとダッシュは使用可能です。
例：「company_img」「works_img」など

●戻り値の形式: 「画像配列」「画像URL」にチェックを入れます。

●ライブラリ: 「すべて」にチェックを入れます。

画像配列

画像のURL、ID、altテキスト、幅、高さなど、すべての情報が格納された配列を返します。
altテキストを簡単に取得してimgタグに含めることができます。
esc_url()やesc_attr()といった関数を使って、安全に出力できます。

<!--画像配列-->
<?php 
$image = get_field('フィールド名');
if( !empty($image) ): ?>
    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" width="<?php echo esc_attr($image['width']); ?>" height="<?php echo esc_attr($image['height']); ?>" />
<?php endif; ?>

画像URL

画像のURL（ウェブアドレス）のみを文字列として返します。
シンプル: 最も簡単な方法で、imgタグのsrc属性に直接埋め込めます。
「画像URL」を選択した場合、altテキストや幅・高さは手動で記述する必要があります。

<!--画像URL-->
<?php 
$image_url = get_field('フィールド名');
if ( !empty($image_url) ): ?>
    <img src="<?php echo esc_url($image_url); ?>" alt="画像の説明" width="" height="" />
<?php endif; ?>