モダン・ドロップダウン・フィールドのカスタマイズ方法

WPFormsのモダンスロップダウンフィールドをカスタマイズしたいですか？ このフィールドを使用すると、ユーザーが検索ボックスに入力し、入力された文字に基づいて結果を表示することができます。 このチュートリアルでは、表示される結果の数をカスタマイズするための各ステップを説明します。

フォームの作成

まず、フォームを作成し、少なくとも1つのドロップダウンフォームフィールドがフォームに含まれるようにフィールドを追加する必要があります。

フォームの作成にヘルプが必要な場合は、こちらのドキュメントをご覧ください。

ドロップダウン・フィールドを追加したら、「詳細設定」タブをクリックし、ドロップダウンのスタイルに「モダン」を選択します。

モダン・ドロップダウンのカスタマイズ

次に、モダン・ドロップダウン・フィールドをカスタマイズするコード・スニペットを追加します。

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

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_search_results( $config, $forms ) {
	
	// Change 519 to an ID of your actual form or remove this condition to apply to all forms.
	if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
	}
	
	// Change 6 to a large number to show all the matching results for every search (might impact performance).
	$config[ 'searchResultLimit' ] = 6;
	
	return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_search_results', 10, 2 );

自分のフォームIDに合わせて519を変更することを忘れずに。

フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。

スニペットを追加し、フォームIDを更新したら、最後のステップとして、searchResultLimitにユーザーが検索ボックスに入力する際に表示したい数を設定します。この例では、上位6つの検索結果のみを表示します。

必要なのはこれだけです！結果が見つからなかったときに表示されるテキストも変更したいですか？モダンドロップダウンフィールドのNo Results Foundテキストを変更する方法についてのチュートリアルをご覧ください。

リファレンス・フィルター

wpforms_field_select_choicesjs_config

よくあるご質問

Q: ドロップダウンで選択できる項目を2つに制限することはできますか？

A:もちろんです！まず、モダンドロップダウンフィールドを編集し、詳細設定タブで複数オプション選択を有効にします。

このオプションを有効にすると、このスニペットをサイトに追加できます。

/**
 * Customize modern dropdown search results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_limit( $config, $forms ) {
     
    // Change 519 to an ID of your actual form or remove this condition to apply to all forms.
    if ( ! array_key_exists( 519, $forms ) ) {
        return $config;
    }
     
    // Change 2 to a large number to show all the matching results for every search (might impact performance).
    $config[ 'maxItemCount' ] = 2;

    // Modify the 'maxItemText' to make it translatable when limiting the selections.
    $config['maxItemText'] = sprintf( __( 'Only %1$s values can be added', 'wpforms' ), $config['maxItemCount'] );
     
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_limit', 10, 2 );

Q: 検索結果をより完全一致にするにはどうすればいいですか？

A:閾値を変更することで、より具体的な検索が可能になります。このスニペットをサイトに追加してください。

/**
 * Return more specific results
 *
 * @link https://wpforms.com/developers/how-to-customize-the-modern-dropdown-field/
 */

function wpf_dev_modern_dropdown_select_search( $config, $forms ) {
     
    // Providing more specific search results 
    // This will be added to all WPForms Modern Dropdown field for the search bar
    $config[ 'fuseOptions' ] = array(
		'threshold' =>  0.1
	);
      
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_modern_dropdown_select_search', 10, 2 );