「WordPressでフォームに独自のバリデーションを追加したいけど、PHPが苦手でうまくいかない…」そんな悩みを抱える方も多いのではないでしょうか?この記事では、実際にChatGPTを活用して、例として「Contact Form 7のフォームのtext(テキストボックス)に英語のみが入力されたときにエラーを返す」カスタムバリデーションを作成した流れを解説します。
初心者でも安心して試せるよう、具体例を交えながらステップバイステップで進めますので、ぜひ参考にしてください。
目次
結論から言うと…
例えば「Contact Form 7のフォームの”テキストボックス(テキストエリアではなく)”に英語だけが入力されたときにエラーを返したい」という目的の場合のChatGPTを活用法です。流れはたったの3ステップです:
- サンプルコードをコピー
Contact Form 7の公式ドキュメントやウェブから、希望する機能に近いサンプルコードをコピーします。 - ChatGPTにコードを貼り付けて、質問する
ChatGPTに「このコードをContact Form 7のtextフィールド用に修正してください」と伝えます。
必要に応じて、「日本語入力を必須にしたい」「エラーメッセージを変更したい」など、希望も具体的に伝えます。 - 修正されたサンプルコードを貼り付ける
ChatGPTが出力したコードをWordPressに貼り付けて動作確認。ほとんどの場合、それだけで目的の機能が実現します!
問題の発端
「英語だけの入力を弾きたいけど、どうすればいい?」
例えば、Contact Form 7のtextarea
フィールドに対して、日本語(ひらがな)を含まない場合にエラーを表示させたい場合、以下のようなコードを使うことが考えられます。
function wpcf7_validate_textarea($result, $tag) {
$name = $tag[‘name’];
$value = (isset($_POST[$name])) ? (string) $_POST[$name] : ”;
if ($value !== ” && !preg_match(‘/[ぁ-ん]/u’, $value)) {
$result[‘valid’] = false;
$result[‘reason’] = array($name => ‘日本語で入力してください’);
}
return $result;
}
add_filter(‘wpcf7_validate_textarea’, ‘wpcf7_validate_textarea’, 10, 2);
add_filter(‘wpcf7_validate_textarea*’, ‘wpcf7_validate_textarea’, 10, 2);
引用:【スパム対策】Contact Form 7で英語のみの入力はエラーにする方法
課題とChatGPTの登場
このコードは一見正しそうに見えますが、いざフォームで使うと「エラーが表示されない」「そもそもバリデーションが機能しない」といった問題が発生することがあります。
「なぜエラーが出ないのか?」を手作業でデバッグするのは大変です。そんな時に頼りになるのがChatGPTです。
今回、ChatGPTに「このコードの問題は何か?」と相談した結果、以下のポイントを指摘されました。
- 「’」や「”」が全角になっている。
$result['valid']
や$result['reason']
の直接操作は推奨されない。- Contact Form 7の最新バージョンでは、
$result->invalidate()
を使うのが適切。 - 正規表現が「ひらがな」にしか対応しておらず、カタカナや漢字を弾いてしまう場合がある。
ChatGPTが提案した修正版コード
ChatGPTのアドバイスをもとに修正したコードがこちらです。
function wpcf7_validate_textarea($result, $tag) {
$name = isset($tag['name']) ? $tag['name'] : '';
$value = isset($_POST[$name]) ? sanitize_textarea_field($_POST[$name]) : '';
// バリデーションチェック: 日本語が含まれていない場合
if ($value !== '' && !preg_match('/[\p{Hiragana}\p{Katakana}\p{Han}]/u', $value)) {
$result->invalidate($tag, '日本語で入力してください');
}
return $result;
}
add_filter('wpcf7_validate_textarea', 'wpcf7_validate_textarea', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validate_textarea', 10, 2);
変更点の解説
元コードの問題点
$result->invalidate()
が使われていない:Contact Form 7の推奨方法ではないため、バリデーションエラーが正常に表示されない場合がある。sanitize_textarea_field()
が未使用:テキストエリアの内容に適したデータサニタイズがされていない。- 正規表現が限定的:ひらがなのみを対象としており、カタカナや漢字が含まれていてもエラーとなる。
修正内容
- サニタイズ方法を変更
テキストエリアでは改行や特殊文字が含まれる可能性が高いため、sanitize_textarea_field()
を使用。 $result->invalidate()
を使用
Contact Form 7の正しいエラーメッセージ設定方法である$result->invalidate()
を採用。- 正規表現を改良
/[\p{Hiragana}\p{Katakana}\p{Han}]/u
を使用して、ひらがな、カタカナ、漢字を全て許容。
textareaではなくtextに適用したい
今回はtextarea(テキストエリア)ではなくtext(テキストボックス)に適用させたいので、さらにChatGPTにその旨を伝えて修正してもらいます。はじめにまとめて質問すると早いですね。
ChatGPTのアドバイスをもとに修正したコードがこちらです。
function wpcf7_validate_text($result, $tag) {
$name = isset($tag['name']) ? $tag['name'] : '';
$value = isset($_POST[$name]) ? sanitize_text_field($_POST[$name]) : '';
// バリデーションチェック: 日本語が含まれていない場合
if ($value !== '' && !preg_match('/[\p{Hiragana}\p{Katakana}\p{Han}]/u', $value)) {
$result->invalidate($tag, '日本語で入力してください');
}
return $result;
}
add_filter('wpcf7_validate_text', 'wpcf7_validate_text', 10, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validate_text', 10, 2);
修正内容
- サニタイズ方法の変更
テキストボックスでは改行が不要なため、sanitize_text_field()
を使用。これにより、余分なHTMLタグや改行が削除される。 add_filter
対象を変更
textarea
専用のフィルターから、text
専用のフィルターに変更。具体的にはwpcf7_validate_text
およびwpcf7_validate_text*
を使用。
動作確認とポイント
修正版コードをテーマの functions.php
に追加し、Contact Form 7のフォームにtext
やtext*
フィールドを設定すれば、以下の条件でバリデーションが動作するはずです。
- 日本語が含まれていない場合 → エラーメッセージが表示。
- 日本語が含まれる場合 → フォーム送信成功。
まとめ
今回のケースでは、PHPコードの理解が浅くてもChatGPTを活用することで問題を解決できました。
「どうしてもエラーの原因がわからない」「どこを修正すればいいかわからない」といった場面で、ChatGPTは非常に頼りになるツールです。
フォームカスタマイズに限らず、WordPressの幅広いカスタマイズに活用できるので、ぜひ試してみてください!
Byさちお
元シンガーソングライターで、メンズ美容ブログ、パンブログもやってます。たまにテレビに出てたりします。最近はTikTokも頑張ってます。