WordPress

MW WP Formのエラーメッセージをカスタマイズ

WordPressでお問い合わせを実装できるプラグイン「MW WP Form」で、必要な項目が未入力の時など、バリデーションエラー時のエラーメッセージをカスタマイズする方法を紹介します。

この記事で紹介するのは以下の内容です。

  • エラーメッセージの表示位置を変更
  • エラーメッセージの文言を変更
  • 複数のエラーメッセージをまとめる

エラーメッセージの表示位置を変更

エラーメッセージの表示位置を変更したい場合は、自動で出力されるエラーメッセージを非表示にし、任意場所にエラーメッセージを表示させるショートコードを使って、任意の場所で出力させてあげればOKです。

自動出力のエラーメッセージを非表示にする

お名前
[mwform_text name=”your-name” show_error=”false”]

上記のように「show_error=”false”」をタグ内に記述すれば、自動で出力されるエラーメッセージが表示されません。

任意の場所にエラーメッセージを出力する

お名前
[mwform_error keys=”your-name”]

任意の場所にエラーメッセージを表示させたい場合は、表示させたい場所に上記のようなタグを記述します。

keysの値はエラーメッセージと紐づけたい要素のname属性の値を入れるようにしてください。

エラーメッセージの文言を変更

デフォルトのエラーメッセージは「未入力です。」という文言ですが、この文言を変更したい場合は、フィルターフックを利用してカスタマイズする必要があります。

functions.phpに次のように記述してください。

function my_error_message($error, $key, $rule) {
　if ($key === ‘your-name’ && $rule === ‘noempty’) {
　　return ‘お名前を入力してください。’;
　}
　return $error;
}
add_filter(‘mwform_error_message_mw-wp-form-xxx’, ‘my_error_message’, 10, 3);

※全角スペースが含まれているため、コピーして使用する場合はお気をつけください。

このようにすることで、your-name属性の項目が未入力の際には、「未入力です。」ではなく、「お名前を入力してください。」というエラーメッセージが表示されます。

なお、フック名「mwform_error_message_mw-wp-form-xxx」のxxxの部分は、フォームの作成画面で表示されている識別子を入れてください。

複数のエラーメッセージをまとめる

一つの項目で複数の入力欄がある場合など、複数のエラーメッセージを一つにまとめたい時があるかと思います。

そのような時は、エラーメッセージの文言を変更する時と同様、フィルターフックを利用して設定します。

エラーメッセージの文言変更の時は「mwform_error_message_mw-wp-form-xxx」というフックを使いましたが、複数のエラーメッセージをまとめる場合は「mwform_validation_mw-wp-form-xxx」というフックを使います。

このフックは複雑なバリデーションルールを設定したい時に便利です。

今回は、生年月日の項目があったとして、年・月・日の3つを入力してもらう場合を例に説明します。

まずは、それぞれのテキスト入力欄のタグに「show_error=”false”」を設定して、自動出力のエラーメッセージを非表示にしておいてください。

西暦
[mwform_text name=”birth-year” show_error=”false”]年

月
[mwform_text name=”birth-month” show_error=”false”]月

日
[mwform_text name=”birth-day” show_error=”false”]日

[mwform_error keys=”birth-year,birth-month,birth-day”]

最後に記述しているmwform_errorは任意の場所にエラーメッセージを出力するショートコードです。

1つにまとめたい要素のname属性をカンマ区切りでkeysに設定してください。

次にfunctions.phpで独自のバリデーションルールを設定します。

function add_mwform_validation_rule($Validation, $data) {
　$validation_message = ‘いずれかが未入力です。’;
　if (empty($data[‘birth-year’])) {
　　$Validation->set_rule(‘birth-year’, ‘noempty’, array(‘message’ => $validation_message));
　} elseif (empty($data[‘birth-month’])) {
　　$Validation->set_rule(‘birth-month’, ‘noempty’, array(‘message’ => $validation_message));
　} elseif (empty($data[‘birth-day’])) {
　　$Validation->set_rule(‘birth-day’, ‘noempty’, array(‘message’ => $validation_message));
　}
　return $Validation;
}
add_filter(‘mwform_validation_mw-wp-form-xxx’, ‘add_mwform_validation_rule’, 10, 2);

※全角スペースが含まれているため、コピーして使用する場合はお気をつけください。

このように記述することで、年・月・日3つの入力のうち、どれか1つでも未入力の場合は、「いずれかが未入力です。」というエラーメッセージが表示されます。

フック名「mwform_validation_mw-wp-form-xxx」のxxx部分は、フォームの作成画面で表示されている識別子を入れてください。

まとめ

この記事では、MW WP Formにおいて、エラーメッセージを表示させる場所や文言を変更したり、複数のエラーメッセージを1つにまとめたり、バリデーションエラー時のエラーメッセージをカスタマイズする方法を紹介しました。

  • エラーメッセージの表示位置を変更
  • エラーメッセージの文言を変更
  • 複数のエラーメッセージをまとめる

ここで紹介したのは一部の例なので、やり方次第ではもっと複雑なバリデーションルールを設定したり、条件に応じてエラーメッセージを変えるなど、色々なカスタマイズをすることができると思います。

WordPressを始めるならエックスサーバーがおすすめ

WordPressでブログやアフィリエイトを始めたい、良いレンタルサーバーに乗り換えたいという方にはエックスサーバーがおすすめです。

その理由は以下の通り。

  • 国内シェアNo.1のレンタルサーバー
  • サポートの品質が高い
  • 表示速度・処理速度が速い
公式サイトはこちら

WordPressが学べるおすすめのスクール

WordPress関連の本もありますし、ネット上にはたくさんの情報がありますが、短期間でWordPressも含めたWeb制作のスキルを身につけたい方にはプログラミングスクールがおすすめです。

TechAcademy

  • WordPressのサイト制作の流れが理解できる
  • WordPressでオリジナルサイトが作れるようになる
  • プラグインやカスタムフィールドを学べる
  • オンラインで完結
  • 講師・メンターが現役エンジニア
公式サイトはこちら

関連記事
WordPressが学べるおすすめのプログラミングスクール

Leave a Comment