プラグインAdvanced custom fields(ACF)のacf_form関数の使用方法・解説

概要

acf_form は、Advanced Custom Fields (ACF) プラグインにおいて、フロントエンドフォームを作成するための関数です。この関数を利用することで、ユーザーが投稿やカスタムフィールドを直接フロントエンドから追加または更新することができます。以下のような機能を実装する際によく使われます。

ユーザーによる投稿作成
カスタムフィールドのアップデート
コメントやレビューの追加
ユーザーからの情報収集フォーム
投稿の編集フォーム
モジュール型のコンテンツ作成

構文

acf_form( $args );

パラメータ

$args は連想配列で、フォームの表示や機能に関するオプションを含みます。主なパラメータは以下の通りです。

post_id: フォームで編集または作成する投稿のID
field_groups: フィールドグループのIDまたはスラッグの配列
submit_value: 送信ボタンのテキスト
return: フォーム送信後にリダイレクトするURL
ajax: trueの場合、フォームをAjaxで送信します

戻り値

acf_form は返り値を持ちません。フォームのHTMLを直接出力します。

互換性

ACFのバージョン: 5.0.0以上
WordPressのバージョン: 4.0以上

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect	〇
get_header
wp_head

サンプルコード

サンプルコード 1

// 投稿用のACFフォームをフロントエンドに表示します
acf_form(array(
    'post_id'       => 'new_post',
    'field_groups'  => array('group_123456'),
    'submit_value'  => '投稿を作成'
));

このサンプルコードは、新しい投稿を作成するためのACFフォームを表示します。フィールドグループのIDはgroup_123456です。

サンプルコード 2

// 既存の投稿を編集するためのACFフォーム
acf_form(array(
    'post_id'       => 42, // 投稿ID 42を編集
    'return'        => home_url('/thank-you/'),
    'submit_value'  => '更新する'
));

このサンプルは、投稿ID 42の既存の投稿を編集するためのACFフォームを表示します。送信後に指定のURLにリダイレクトされます。

サンプルコード 3

// Ajaxによるフォームの送信を有効にする
acf_form(array(
    'post_id'       => 'new_post',
    'ajax'          => true,
    'field_groups'  => array('group_123456'),
    'submit_value'  => '非同期で投稿する'
));

このサンプルでは、Ajaxを利用してフロントエンドから非同期で新しい投稿を作成できるフォームを表示します。

サンプルコード 4

// フォームのカスタマイズ
acf_form(array(
    'post_id'       => 'new_post',
    'field_groups'  => array('group_789012'),
    'submit_value'  => '送信',
    'html_before_fields' => '<div class="custom-class">この内容を入力してください:</div>'
));

このサンプルは、ACFフォームにカスタムHTMLを追加することで、よりわかりやすい指示をユーザーに提供します。

サンプルコード 5

// カスタムスタイルを追加したフォーム
acf_form(array(
    'post_id'       => 'new_post',
    'field_groups'  => array('group_345678'),
    'submit_value'  => 'サブミット',
    'form_attributes' => array(
        'class' => 'custom-form-class'
    )
));

こちらのサンプルは、CSSクラスをフフォームに追加することで、カスタムスタイルを適用したフォームを生成します。

概要

構文