WPFormsの入力プレビューから空のフィールドを非表示にしたいですか？これは、データを含むフィールドのみを表示することで、よりクリーンでフォーカスされたプレビューを作成するのに役立ちます。
このチュートリアルでは、カスタムコードスニペットを使ってWPFormsの入力プレビューから空のフィールドを削除する方法を紹介します。
コード・スニペットの追加
入力プレビューから空のフィールドを非表示にするには、サイトにカスタムコードスニペットを追加する必要があります。カスタムコードの追加にお困りの場合は、コードスニペットの追加に関するチュートリアルをご覧ください。
以下のPHPコード・スニペットをサイトに追加する：
/**
* Filter the entry preview fields to hide empty fields.
*
* @link https://wpforms.com/developers/hiding-empty-fields-in-wpforms-entry-preview
*
*
* @param array $fields The entry preview fields.
* @param array $form_data Form data and settings.
*
* @return array The filtered entry preview fields.
*/
function wpf_hide_empty_entry_preview_fields( $fields, $form_data ) {
foreach ( $fields as $field_id => $field ) {
if ( empty( $field['value'] ) ) {
unset($fields[$field_id]);
}
}
return $fields;
}
// Add the filter to apply the custom function.
add_filter( 'wpforms_entry_preview_fields', 'wpf_hide_empty_entry_preview_fields', 10, 2 );
このスニペットでは wpforms_entry_preview_fields フィルタを使用して、エントリープレビューに表示されるフィールドを変更します。このコードでは、エントリープレビューのすべてのフィールドをループし、各フィールドについて、'value' が空かどうかをチェックします。フィールドの値が空の場合、そのフィールドを配列から削除（アンセット）します。ループが完了すると、値を持つフィールドのみを含むようになったフィールドの変更された配列を返します。
これで完了です！これでWPForms入力プレビューから空のフィールドを隠すことができました。これにより、データを含むフィールドのみが表示される、よりすっきりとしたプレビューが作成されます。
WPFormsのエントリープレビューのカスタマイズについてもっと知りたいですか？WPFormsでエントリのプレビューフィールドを表示するチュートリアルをご覧ください。