bbPress でトピックの返信フォームを一番上にする方法

Contents

1 返信フォームを一番上にする

　前回の

HoBoFoTo AMP

bbPress でトピックの返信を日付の逆順にする方法

https://www.hobofoto.net/bbpress-replies-desc/

　今回はbbPress でトピックの返信を日付の逆順にする方法を探したのですが、なかなか見つからず大変な思いをしたので、なんとか手助けになればと思って書いてみます。

でトピックの返信を日付の逆順にする方法を紹介しました。
で、逆順にするとやってみたいなと思うことがあります。それは何かというと通常のbbPressでは入力フォームが一番下になっているんですね。でも逆順にすると、一番上に新しい投稿が来ることになります。
　じゃあ、返信フォームも一番上にしたいじゃないですか。今回はその方法を紹介したいと思います。

返信フォームを一番上にする

　で、その方法ですが、functions.phpに記入する変更することでできないか、色々考えてみたんですが、なかなかいい方法が見つかりませんでした。

　じゃあということで、考えついたのが、cssで順番を入れ替える方法でした。

Flexbox

CSS3 Flexboxを使うことで、順番を強制的に入れ替えます。最新の情報では日本で使われているブラウザの97.39%がFlexboxに対応しているので使って表示が変になることも少ないでしょう。

そもそもFlexboxはなに？という方はで色々紹介されているので、どうぞ。

CSSの設定

　それでは、CSSを変更していきたいと思います。といっても、テーマフォルダにある、style.cssに以下のコードを書き入れるだけなんですが、

#bbpress-forums{
  display:flex;
  flex-direction:column;
}
.bbp-reply-form{
  order:1;
  width:95%;
}
#bbpress-forums div:nth-of-type(2){
  order:2;
}
ul.bbp-replies{
  order:3;
  width:95%;
}
#bbpress-forums div:nth-last-of-type(2){
  order:4;
}

詳しい説明

１行目から４行目までで、Flexboxを設置します。

２行目の「display:flex;」でbbpress-forumsクラスにFlexboxを設置します。
３行目の「flex-direction:column」で上から下へ並べるようにします。

５行目から８行目で、返信フォームの調整をしています。

６行目で「order:1;」を設定して順番を一番上に変えます。
７行目は返信フォームの幅を表示範囲の95%にしています。

９行目から１１行目で、ページネーションの設定をしています。これが一番やっかいでclassが「bbp-pagination-count」とついているのですが、上のページネーションと下のページネーションに同じclassがついています。上下を判定するために、「#bbpress-forums div:nth-of-type(2)」を使っています。これは#bbpress-forumsの中にある２番目のdivの要素（nth-of-type(2)）にスタイルを適用します。