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

2018/03/20

code

WordPress 4.4で逆になったコメントフォームの入力欄ですが、CSSだけで元に戻すことが可能です。同じ原理で、順番を任意に変更することも可能です。

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

#commentform .comment-notes{
  -webkit-order:1;
  order:1;

}
#commentform .comment-form-author{
  -webkit-order:2;
  order:2;

}
#commentform .comment-form-email{
  -webkit-order:3;
  order:3;

}
#commentform .comment-form-url{
  -webkit-order:4;
  order:4;
}
#commentform .comment-form-comment{
  -webkit-order:5;
  order:5;
}
#commentform .form-submit{
  -webkit-order:6;
  order:6;
}

参考：
・flex-direction - CSS | MDN
・order - CSS | MDN

orderの番号の小さい順に並ぶので、好きな順番に並ぶように付け替えてください。