ワードプレスブログのコメント欄の表示順を変更する方法（Diver用CSSも有ります）

ワードプレスブログの記事の一番下にあるコメント欄の

「コメント」「名前」「メール」「サイト」の順番を入れ替える方法を解説します。

CSSを使ってコメント欄の順番を入れ替えよう！

WordPress4.4 になってからコメント欄の順序が逆になってしまいました。
現在のデフォルトの状態だと、このような並びになっているかと思います。

コメント欄が一番上にきてしまっているので、ちょっと違和感を感じますよね。

コメント欄は、function.php を使って順番を入れ替えることも可能ですが

このファイルは書き換えに失敗するとブログが表示されなくなる危険性もあるので

今回は、css（スタイルシート）を使ってコメント欄の順序を変更したいと思います。

１ スタイルシートのページを開く

１ ワードプレスのスタイルシート(style.css)の画面は

管理画面 ⇒ 外観 ⇒ テーマエディター と進むことで開くことができます。

ワードプレステーマ Diver を使っている場合は

管理画面 ⇒ 外観 ⇒ カスタマイズ ⇒ 追加CSS の画面でも同じ作業ができます。

この場合は、ライブプレビューで実際のレイアウトを見ながら変更できます。

２ テーマの編集画面右側のテーマファイル一覧の中から、スタイルシート(style.css) を選択しましょう。

２ スタイルシートにCSSを追記する

スタイルシートのハイライト部分に、以下のCSSをコピペしましょう。

/*コメント欄並び替え*/
#commentform {
    display: flex;
    flex-direction: column;
}
/*名前*/
.comment-form-author {
    order: 0;
}
/*メールアドレス*/
.comment-form-email {
    order: 1;
}
/*ウェブサイト*/
.comment-form-url {
    order: 2;
}
/*コメント記入欄*/
.comment-form-comment {
    order: 3;
}
/*注意書き*/
.comment-notes {
    order: 4;
}
/*コメント送信ボタン*/
.form-submit {
    order: 5;
}

簡単に解説すると、order: の後に記載されている数字がコメント欄の並び順で

０より数字が大きくなるほど順番が下になります。

ですのでこの場合だと

「名前」⇒「メールアドレス」⇒「ウェブサイト」⇒「コメント欄」⇒「注意書き」⇒「送信ボタン」

の順に表示されます。

コピペしたら画面下部の、ファイルを更新 ボタンを押せば設定完了！

このCSSは要素をセレクタで指定しているので

お使いのテーマによっては、このように上手く表示されない可能性もあります。

/*コメント欄並び替え*/
#commentform {
    display: flex;
    flex-direction: column;
}
/*名前*/
.comment-form-author {
    order: -4;
}
/*メールアドレス*/
.comment-form-email {
    order: -3;
}
/*ウェブサイト*/
.comment-form-url {
    order: -2;
}
/*コメント記入欄*/
.comment-form-comment {
    order: -1;
}
/*コメント送信ボタン*/
.form-submit {
    order: 1;
}

さいごに

今回は、CSS を使用してコメント欄の表示順を入れ替える方法を解説しました。

CSS を使用することで、このようにサイトデザインを色々と自分好みに変更することができます。