投稿でチェックボックスの値を配列として保存する方法

はじめに

Advanced Custom Fieldsプラグインで作成したカスタムmetaフィールドの投稿フォームで、チェックボックスの値を配列として保存したいですか？ 小さなPHPスニペットで、これらの値をカスタムフィールドの配列に格納できます。

デフォルトでは、カスタムフィールドがPost Submissionアドオンでマッピングされると、WPFormsはすべてのフォームでWPFormsがデータを保存するのと同じ形式でカスタムフィールドのデータを保存します。

例えば、チェックボックスのフォームフィールド（および複数の値を持つすべてのもの）では、WPFormsは値を1つの文字列として保存し、各値を新しい行に格納します。

Red
Green
Blue

しかし、ちょっとしたPHPのスニペットで、これを配列として格納するように簡単に変更することができる。

array( 'Red', 'Green', 'Blue')

カスタムフィールドの作成

まず、Advanced Custom Fieldsプラグインを使って投稿用のカスタムフィールドを作成します。

カスタムフィールドの設定についてさらに詳しい情報が必要な場合は、こちらの記事をご覧ください。

フォームの作成

さて、いよいよ投稿フォームを作成し、フォームにチェックボックスフィールドを追加します。

フォームに残りのフィールドを追加したら、「設定」タブで「投稿送信」をクリックし、カスタムフィールドが正しくマッピングされていることを確認します。

値を配列として格納するスニペットの追加

値を配列として保存するには、このスニペットをあなたのサイトにコピーするだけでよい。

スニペットをサイトに追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Turn checkbox values into an array.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */
 
function wpf_dev_post_submission_process_meta( $field_value, $meta_key, $field_id, $fields, $form_data ) {

    // Only run on my form with ID = 443
    if ( absint( $form_data[ 'id' ] ) !== 443 ) {
            return;
    } 
     
    // The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields
    if ( $meta_key === 'have_visited' ) {

            $field_value = explode( "\n", $field_value );

        }
 
    return $field_value;
}
add_filter( 'wpforms_post_submissions_process_meta', 'wpf_dev_post_submission_process_meta', 10, 5 );

値の表示

今度はこれらの値を単一投稿テンプレートに表示する番です。WPFormsはテーマに変更を加えることを推奨していませんので、子テーマまたはカスタム関数を使用してテンプレートに反映させるのがベストです。

子テーマの作成に関する詳しい情報は、WPBeginnerの友人による素晴らしい記事をご覧ください。

このチュートリアルのために、子テーマを作成し、single.phpに以下のコードを追加しました。

			<div class="states_wrapper">
				<?php if( get_field('have_visited') ): ?> 
					<p>I've already visited these states in the last 5 years: <?php the_field('have_visited'); ?></p> 
				<?php endif; ?>
			</div>

投稿が表示されると、各州が行単位ではなく段落単位で表示されていることがわかります。

これで完了です！これで WordPress データベースへの値の保存方法が変更されました。 チェックボックスのフォームフィールドのラベルにテキストの代わりに画像を使いたいですか？ CSSを使ってチェックボックスラベルに画像を適用する方法」の記事をご覧ください。

関連

フィルター参照：wpforms_post_submissions_process_meta

よくあるご質問

A: 他のアドオンでも使えますか？

A:もちろんです！例えば、このチュートリアルで説明したのと同じシナリオを想定した場合、ユーザー登録アドオンにこれを追加することで、ACFを使用してWordPressのユーザープロフィールにさらに情報を追加しながら、ユーザープロフィールページに自動的に保存することができます。

/**
 * Turn checkbox values into an array with the User Registration addon.
 *
 * @link https://wpforms.com/developers/how-to-store-checkbox-values-as-arrays-with-post-submissions/
 */

function wpf_dev_user_submission_process_meta( $field_value, $meta_key, $field_id, $fields, $form_data ) {
      
        // The $meta_key name is the same name that shows in the Field Name on Advanced Custom Fields
        if ( $meta_key === 'have_visited' ) {
                $field_value = explode( "\n", $field_value );
            }
      
        return $field_value;
    }
    add_filter( 'wpforms_user_registration_process_registration_custom_meta_value', 'wpf_dev_user_submission_process_meta', 10, 5 );

フィルター名が wpforms_user_registration_process_registration_custom_meta_value つまり、登録フォームを ユーザー登録 アドオンを使用すると、この情報はユーザーのプロファイルに保存されます。