Designed item on Suzuri 👔

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

WordPress コメントウェブ
この記事は約4分で読めます。

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: "このフィールドは必須です📝"
            },

参照:learnersbucket