WordPressのコメントフォームを必須にする(wp-comments-post.phpへのリダイレクト阻止)

WordPressのコメントフォームは、デフォルトだと少し厄介です。

inputの無い空フォームでも送信ボタンをクリックすることが可能で、ボタンが押されたあとはwp-comments-post.phpへリダイレクトされています。

そう、こんなやつです↓

まぁデフォルトでも良いのですが、ぶっちゃけダサいのでバリデーションさせたい(検証したい)ですよね?

JQuery validateを使うことで、「このフィールドは必須です」と空フォームを送信不可にできます。

以下のコードを、functions.phpへ記入してください。

なお、テーマのアップデートが行われたときにも変更されないように、子テーマを活用するのがベターです。

//Comment Validation
function comment_validation_init() {
  if(is_single() && comments_open() ) { ?>        
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script type="text/javascript">
     jQuery(document).ready(function($) {
        $('#commentform').validate({
            rules: {
                author: {
                    required: true,
                    minlength: 2
                },

                email: {
                    required: true,
                    email: true
                },

                comment: {
                    required: true,
                    minlength: 20
                }
            },

            messages: {
                author: "名前を入力してください",
                email: "メールアドレスを入力してください.",
                comment: "このフィールドは必須です"
            },

            errorElement: "div",
            errorPlacement: function(error, element) {
                element.after(error);
            }

        });
    });    
    </script>
    <?php
    }
}
add_action('wp_footer', 'comment_validation_init');

あ、子テーマの解説記事書いてませんでしたね。

後で書いておきます(あまり期待しないでください)。

messagesの部分の文章を変えることで個性も演出できます。

絵文字なんか使うと良いかもしれませんね!

            messages: {
                author: "名前を入力してください💪",
                email: "メールアドレスを入力してください📇",
                comment: "このフィールドは必須です📝"
            },

追記

WordPress 5.5からjQueryの扱いに関する仕様が少し代わったため、上記のコードではValidationを効かせることができなくなった。

WordPress 5.5の素晴らしい新機能—新リリースの詳細

kinsta

html5に対応したテーマであれば、HTML5 validationを利用することができる。

functions.phpへ以下のコードを挿入すればOK。

/**
 * Enable form validation
 */
function custom_enable_comment_form_validation() {
	if ( comments_open() && current_theme_supports( 'html5' ) ) {
		echo '<script>document.getElementById("commentform").removeAttribute("novalidate");</script>' . PHP_EOL;
	}
}
add_action( 'wp_footer', 'custom_enable_comment_form_validation' );

WordPressがデフォルトでやってくれよとは思う笑

参照:learnersbucket

Default image
Keisuke Kuribara
零細企業の代表 / ウェブマーケティング、コンサルティング、EC / 漫画と本が好き / 生物捕獲が趣味