WordPressのコメントフォームの順番をCSSで入れ替える方法

flex - order

まずはコメントフォーム部分の基本的な HTML です。主要部分以外は省略しています。

HTML

<form id="commentform" class="comment-form">
    <!-- 1番目　注意書き -->
    <p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span></p>
    <!-- 2番目　コメント記入欄 -->
    <p class="comment-form-comment"><label>コメント</label><textarea id="comment"></textarea></p>
    <!-- 3番目　名前 -->
    <p class="comment-form-author"><label>名前</label><input id="author"></p>
    <!-- 4番目　メールアドレス -->
    <p class="comment-form-email"><label>メールアドレス</label><input id="email"></p>
    <!-- 5番目　ウェブサイト -->
    <p class="comment-form-url"><label>ウェブサイト</label> <input id="url"></p>
    <!-- 6番目　コメント送信ボタン -->
    <p class="form-submit"><input id="submit" value="コメント送信"><input id="comment_post_ID"><input id="comment_parent"></p>
</form>

「注意書き」「コメント記入欄」「名前」「メールアドレス」「ウェブサイト」「コメント送信ボタン」の順に並んでいますが、これを「注意書き」「名前」「メールアドレス」「ウェブサイト」「コメント記入欄」「コメント送信ボタン」の順番に並び替えます。

CSS

/*親要素(form)に display:flex と縦並びの指定*/
#commentform {
    display: flex;
    flex-direction: column;
}

/*コメント記入欄を下から2番目に*/
.comment-form-comment {
    order: 1;
}

/*コメント送信ボタンを1番下に*/
.form-submit {
    order: 2;
}

order が順番を表します。何も設定しない場合は「0」となり、0より大きいほど下にいくようになっています。今回は「コメント記入欄」が「ウェブサイト」下になれば良いので「1」に、「コメント送信ボタン」はその「コメント記入欄」よりも更に下なので「2」とすれば OK です。他の要素は順番を変更しなくても大丈夫です。

下図のような order 指定になっています。

order の値は「-1」や「-3」などマイナスの値も指定できますので、逆に上の方に持っていくことも出来ます。

また、もし他の要素の順番を変更したい場合は、同様にセレクタを指定して order で数値を指定してあげれば変更可能です。例えば以下のように順番を自由に変更することが出来ます。

CSS

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

/*注意書き*/
.comment-notes {
    order: -3;
}

/*コメント記入欄*/
.comment-form-comment {
    order: 1;
}
 
/*名前*/
.comment-form-author {
    order: -2;
}

/*メールアドレス*/
.comment-form-email {
    order: 1;
}

/*ウェブサイト*/
.comment-form-url {
    order: 4;
}

/*コメント送信ボタン*/
.form-submit {
    order: 0;
}

ただし、各要素のセレクタ名はあくまでも初期の WordPress のものなので、テーマ等によって異なる可能性があります。

まとめ

コメント欄の順番を昔と変更している関数の実行を制御すれば、4.4 以前のような並べ方に出来るようなので、その方法を使うのがベストだと思われます。flexbox は IE10 以上の対応となるので全ブラウザで正しく表示されるとは限りません。

ただ flexbox はこんなことにも出来るんだぞ、という内容だったので記事にしてみました。この記事のコメント記入欄も順番を変更していますので確認してみてください。

ベンダープレフィクスは必要に応じて下記ページを参考に追加してください。

参考：order｜MDN
参考：flexbox｜Can I use