モダンドロップダウンフィールドで結果が見つからなかったときに表示されるテキストをカスタマイズしたいですか？シンプルなコードスニペットで、デフォルトのNo results foundメッセージを変更し、多言語サイト用に翻訳可能にすることができます。この機能は、検索結果が空だった場合に、より文脈に沿ったフィードバックを提供することで、ユーザーエクスペリエンスを向上させるために特に役立ちます。
デフォルトでは、検索結果がドロップダウンに表示されない場合、訪問者は「No results found」というメッセージを見ることになります。
このチュートリアルでは、このテキストを変更するために必要なPHPコードを提供し、各ステップを説明します。
フォームの設定
まず、新しいフォームを作成し、少なくとも1つのドロップダウン・フィールドを含むフォーム・フィールドを追加します。
フォームにドロップダウンフォームフィールドを追加したら、詳細設定タブをクリックし、スタイルドロップダウンから モダンを選択します。
結果なしテキストのカスタマイズ
デフォルトのメッセージを変更するには、このコードをサイトに追加してください。カスタムコードの追加方法がわからない場合は、コードスニペットの追加方法のガイドをご覧ください。
このスニペットはフォームID1369にのみ適用され、デフォルトのnoResultsTextメッセージを変更し、追加したものに置き換えます。
フォームIDの見つけ方にお困りの場合は、フォームとフィールドIDの見つけ方ガイドをご覧ください。
結果なしと選択テキストの両方をカスタマイズする
また、"Press to select "のホバーテキストも同時にカスタマイズできます：
/**
* 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 );
必要なのはこれだけです！これで、「No Results Found」の代わりに、あなたのパーソナライズされたメッセージがユーザーに表示されるようになります。
次に、完了したフォームのすべてのフィールドを確認メッセージに表示したいですか?確認メッセージにすべてのフィールドを表示する方法についてのチュートリアルをご覧ください。