ODORIBA

【WordPress】コメントフォームの表示順を変更する

WordPressのコメントフォームは、デフォルトではコメント入力のテキストエリアが一番上に来ています。名前・メール・コメントの順に慣れてきた身としてはどうしてもしっくりこない。なので表示順を変更してみました。後々のWordPressのアップデートに伴う仕様変更にも柔軟に対応できるよう、PHPはいじらずにCSSのみで簡単に変更しています。

実際には「コメント/名前/メール/サイト」から「名前/メール/サイト/コメント」の順に変更しました。以下ではその手順を紹介します。

コメントフォームの表示順変更BEFORE/AFTERのイメージ図

コメントフォームの表示順を変更する手順

id/classを調べる

コメントフォームではid=”commentform”の中に、固有のclassが指定されています。それを利用してCSSで表示の設定を行っていきます。

コメントフォームのid/classのイメージ図

CSSで順序を変更する

CSSは以下の通りです。「外観 > カスタマイズ > 追加CSS」に入力するか、自身で作成したCSSファイルに入力し適用させましょう。

#commentform {
    display: flex;
    flex-direction: column;
}

#commentform .comment-notes { // コメントを記入する上での注意事項
    order: 1;
}

#commentform .comment-form-author { // 名前
    order: 2;
}

#commentform .comment-form-email { // メール
    order: 3;
}

#commentform .comment-form-url { // サイト
    order: 4;
}

#commentform .comment-form-comment { // コメント
    order: 5;
}

#commentform .comment-form-cookies-consent { // Cookie
    order: 6;
}

#commentform .form-submit { // 送信ボタン
    order: 7;
}

orderの数字を変えることで、表示順を自由に変更できます。数字にはマイナスの値も使用可能で、数字の小さいものから順に表示されます。ただし、何も指定をしていないものは初期値0となりますのでご注意ください。

 

参考にさせてもらったサイトは

【WordPress】コメントフォームの入力欄の順番を入れ替える【CSS】

【CSS】orderでflexアイテムを並び替える方法を解説

です。

最後までお読みいただきありがとうございました。

コメント

コメントはまだありません。

コメントを書く

コメントフォーム

メールアドレスが公開されることはありません。 が付いている欄は必須項目です