モダンなドロップダウンフィールドで「結果が見つかりません」のテキストを変更する方法

モダンなドロップダウンフィールドで結果が見つからなかった場合に表示されるテキストをカスタマイズしますか？簡単なコードスニペットを使用すると、デフォルトの「結果が見つかりませんでした」メッセージを変更し、多言語サイトで翻訳可能にすることができます。この機能は、検索結果が空の場合に、よりコンテキストに沿ったフィードバックを提供することで、ユーザーエクスペリエンスを向上させるのに特に役立ちます。

デフォルトでは、検索でドロップダウンに結果が見つからなかった場合、訪問者には「結果が見つかりませんでした」というメッセージが表示されます。

このチュートリアルでは、このテキストを変更するために必要なPHPコードを提供し、各ステップをガイドします。

フォームの設定

まず、新しいフォームを作成し、少なくとも1つの「ドロップダウン」フィールドを含むフォームフィールドを追加します。

フォームに「ドロップダウン」フォームフィールドを追加したら、「高度な設定」タブをクリックし、「スタイル」ドロップダウンから「モダン」を選択します。

結果が見つからないテキストのカスタマイズ

デフォルトメッセージを変更するには、このコードをサイトに追加してください。カスタムコードの追加方法がわからない場合は、「コードスニペットの追加方法」ガイドを参照してください。

このスニペットは、フォームID 1369にのみ適用され、デフォルトの「noResultsText」メッセージを変更して、追加したものに置き換えます。

フォームIDの見つけ方がわからない場合は、「フォームとフィールドIDの見つけ方」ガイドを確認してください。

結果が見つからないテキストと選択テキストの両方をカスタマイズする

同時に「選択するにはクリック」のホバーテキストもカスタマイズできます。

/**
 * Change both No Results Found and Press to select text
 *
 * @link https://wpforms.com/developers/how-to-change-the-no-results-found-text-in-the-modern-dropdown/
 */
function wpf_dev_change_modern_dropdown_noresults_text( $config, $forms ) {
    // Change 1369 to an ID of your actual form
    if ( array_key_exists( 1369, $forms ) ) {
        $config[ 'noResultsText' ] = __( 'Apologies, your search term was not found', 'your-text-domain' );
        $config[ 'itemSelectText' ] = __( 'Choose this option.', 'your-text-domain' );
    }
    return $config;
}
add_filter( 'wpforms_field_select_choicesjs_config', 'wpf_dev_change_modern_dropdown_noresults_text', 10, 2 );

これで完了です！ユーザーは「結果が見つかりませんでした」と表示される代わりに、パーソナライズされたメッセージが表示されます。

次に、確認メッセージに完了したすべてのフォームフィールドを表示しますか？「確認メッセージにすべてのフィールドを表示する方法」のチュートリアルをご覧ください。

参照フィルター

wpforms_field_select_choicesjs_config