楽天セール開催中!ポイント最大11倍! セール会場へ

WordPressのコメント欄を並べ替える|ラベルと必須入力を残す方法

WordPressのコメントフォームを「名前→コメント」の順に並べ替える例です。

入力欄のHTMLを作り直さず、既存のラベル、入力済みの値、必須属性、メール欄とCookieの選択欄を残します。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

子テーマに追加するコード

変更前に子テーマのfunctions.phpと変更するCSSをバックアップします。

旧コードを導入済みなら、今回のコードを重ねず旧フィルターとラベルを隠すCSSを先に解除してください。

既存のPHP開始タグの中へ以下を一度だけ追加してください。

Code Snippetsを使う場合も同じコードを重複して登録しないでください。

標準のcomment_form_fieldsフィルターを通るフォームが対象で、独自フォームには適用されない場合があります。

add_filter( 'comment_form_fields', 'waza_comment_field_order' );
function waza_comment_field_order( $fields ) {
    $ordered = array();
    foreach ( array( 'author', 'comment' ) as $key ) {
        if ( array_key_exists( $key, $fields ) ) {
            $ordered[ $key ] = $fields[ $key ];
            unset( $fields[ $key ] );
        }
    }
    return array_merge( $ordered, $fields );
}

残す項目と撤回した旧コード

旧記事のラベルを非表示にするCSS、メール入力欄を無条件に消す処理、入力値を空文字で置き換える処理は撤回しました。

メールアドレスを必須にしたまま欄を消すと送信できなくなります。

また、プレースホルダーは入力すると消えるため、ラベルの代わりにしません。

この例はディスカッション設定やCookieへの同意を変更しません。

reCAPTCHAの説明文を表示するだけではスパム対策は動作しないため、旧例の説明文も追加しません。

使用する対策の実装と表示条件は別に確認してください。

公開後の確認と戻し方

ログアウト状態で、名前・コメント・メールなどの表示順、ラベルと必須表示を確認します。

Tabで各欄と送信ボタンへ移動し、必須欄を空にしたときのエラーを確認してください。

ログイン状態では名前欄がない場合があります。

テストコメントを送る場合は公開範囲と通知先を先に確認します。

戻す場合は上のフィルター登録と関数を取り除きます。

既存コメントやフォームの設定値は変更しません。

WordPress公式のcomment_form_fields仕様を使用しています。

WordPress 7.1.2・SWELL 2.19.0の隔離環境で、標準フォームから実際のHTTP投稿先へ送信し、名前の必須エラーと正常投稿のリダイレクトを確認しました。

この確認はHTTPでの送信結果を対象としています。

導入したフォームのPC・スマホ表示、Tab移動、ラベルの見やすさは実画面で未検証です。

メールは送信直前で捕捉しており、外部配信とスパム判定は未検証です。

外部GitHubに残る旧例は同期していません。

送信できないときの切り分け

このコードは入力欄の並べ替えだけを行います。

名前・コメント・メールの順になっても、ディスカッション設定で必須になっている項目を空にすると投稿は受理されません。

画面上の必須エラーと、送信後にWordPressが返す必須エラーを分けて確認してください。

まずログアウト状態で標準フォームの項目がすべて表示されているか確認し、必須項目を埋めて検証用コメントを1件送ります。

送信先は標準のwp-comments-post.phpです。

送信後は承認待ちの一覧を確認し、通知やスパム対策の不調を並べ替えコードだけで判断しないでください。

  • URLをコピーしました!

実装を任せたい方へ

WordPressのカスタマイズ代行

ブロックの追加、テーマの改修、管理画面の調整など、記事で紹介している内容の実装を承ります。1時間 ¥8,000〜(税込)。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次