【ACFプラグイン】Advanced Custom Fieldsの使い方・出力方法を紹介

wordpressでカスタムフィールドを実装したい。

簡単な管理画面の操作・PHPコードを追加するだけで出力できるカスタムフィールドプラグインを知りたい。

このようなお悩みを解決します。

本記事では筆者もweb制作で重宝してるプラグイン、多機能でユーザ評価が高く設定も簡単なAdvanced Custom Fields(以下ACF)について、使い方・出力方法を紹介します。

ACFをイントール・有効化・導入準備

管理画面ログイン後、プラグイン>新規追加>検索ボックスにadvanced custom fieldsと入れて検索。

上記画像イメージが検索されます。

ACFをインストール・有効化しましょう。

新規追加でカスタフィールドを作成

ACFをインストールしたら左サイドバーにカスタムフィールド項目が追加されます。

新規追加ボタンを押し、フィールドグループを作成します。

フィールドグループを追加

フィールドグループを作成します。

A:任意のフィールド名を入力しましょう。カスタムフィールドを使いたいページ名でも良いです。

B:【フィールドを追加ボタン】を押す事でカスタムフィールドを生成でき、各種設定ができるようになります。

C:カスタムフィールドを設置したいページを選びます。選んだページ管理画面にカスタムフィールドが生成されるようになります。

D:【公開ボタン】を押す事でカスタムフィールドが公開されます。

フィールドを追加

【フィールドを追加ボタン】を押して設定画面を開きましょう。

最低限以下項目は設定必要です。

A:フィールドラベルを設定しましょう。任意のカスタムフィールド名で大丈夫です。

B:フィールド名を設定しましょう。任意の英小文字を設定します。出力する際に使います。

C:フィールドタイプを選択します。

以上で導入準備は完了です。

フィールドを追加して任意のカスタムフィールドを生成しましょう。

設定が終わったら【公開ボタン】を押して完了です。

次章よりweb製作者がよく使うカスタムフィールドタイプ・出力方法を紹介します。

テキストフィールドを作成・出力

テキストを入力するカスタムフィールドを作成します。

フィールドタイプでテキストを選択しましょう。

公開ボタンを押します。

テキストフィールドを出力するphpコード

<?php $text = get_field('text'); ?>
<!-- カスタムフィールドに値が入ってたら -->
<?php if (!empty($hoge)) : ?>
  <!-- 値を出力 -->
  <?php echo $text; ?>
<?php else : ?>
<?php endif; ?>

上記がテキストフィールドを出力するphpコードになります。

get_fieldの()内にフィールド名を指定しましょう。

テキストエリアフィールドを作成・出力

1行ではなく複数行あるテキスト内容を出力したい場合はフィールドタイプでテキストエリアを選択します。

テキストエリアを出力するphpコード

<?php $textarea = get_field('textarea'); ?>
<!-- カスタムフィールドに値が入ってたら -->
<?php if (!empty($textarea)) : ?>
  <!-- 値を出力 -->
  <?php echo $textarea; ?>
<?php else : ?>
<?php endif; ?>

上記がテキストエリアを出力するphpコードになります。

画像アップロードフィールドを作成・出力

画像をアップロードするフィールドを作成したい場合はフィールドタイプで画像を選択します。

返り値に画像URLを選択します。

上記を選択する事でアップロードされた画像をURL取得する事ができます。

画像アップロードフィールドを出力するphpコード

<?php $img = get_field('img'); ?>
<?php if (!empty($img)) : ?>
  <img src="<?php echo $img; ?>" alt="">
<?php else : ?>
<?php endif; ?>

上記が画像アップロードフィールドを出力するphpコードになります。

imgタグ内のsrc属性にフィールドを出力するように注意しましょう。

有無を判定するチェックボックスフィールドを作成・出力

チェックボックスにチェックが入ってたら出力・チェック無しの場合は出力しないフィールドを作成する場合はフィールドタイプで真/偽を選択します。

有無判定を出力するphpコード

<?php $umu = get_field('umu'); ?>
<?php if ($umu) : ?>
  <!-- チェック有りだったら -->
<?php else : ?>
  <!-- チェック無しだったら -->
 <?php endif; ?>

上記が有無判定するphpコードになります。

if else文を使って条件分岐させましょう。

繰り返しフィールドを作成・出力する

※繰り返しフィールドを使うには有料版Advanced Custom Fields Proを購入する必要があります。

A:同じようなフィールドを繰り返し使いたい場合は、フィールドタイプで繰り返しフィールドを選択します。

B:繰り返しフィールドを選択したら下部にサブフィールドが生成されます。

C:【サブフィールドを追加ボタン】を押し、繰り返したいフィールドを設定します。(今回の例ではテキストタイプフィールドを繰り返します。)

繰り返しフィールドを出力するphpコード

<?php $repeat = get_field('repeat'); ?>
<!-- カスタムフィールドに値が入ってたら -->
<?php if ($repeat) : ?>
  <?php foreach ($repeat as $key => $value) : ?>
  <!-- サブフィールドの値を出力 -->
    <?php echo $value['text']; ?>
  <?php endforeach; ?>
<?php else : ?>
<?php endif; ?>

繰り返しフィールドを出力するにはforeach文を使います。

サブフィールドが配列の値になってるので、foreach文のループ内で上記コードのように値を取り出して上げればOKです。

まとめ

ACFプラグインは無料の範囲でも非常に豊富なカスタムフィールドタイプを設定できますのでおすすめです。

以上で解説を終わります。

Ads

関連記事

JavaScript プログラミング

jQueryを使って、checkしたinput要素の label値を取得する方法

2022.01.12
600
WordPress

[html css]ユーチューブをレスポンシブに埋め込む方法

更新日:2019.11.28
87
HTMLCSS プログラミング

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
247
JavaScript プログラミング

[jQuery]デバイス幅(PC・スマホ)で条件分岐する方法【簡単】

更新日:2020.04.03
104