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;
}
詳しい説明
1行目から4行目までで、Flexboxを設置します。
- 2行目の「display:flex;」でbbpress-forumsクラスにFlexboxを設置します。
- 3行目の「flex-direction:column」で上から下へ並べるようにします。
5行目から8行目で、返信フォームの調整をしています。
- 6行目で「order:1;」を設定して順番を一番上に変えます。
- 7行目は返信フォームの幅を表示範囲の95%にしています。
9行目から11行目で、ページネーションの設定をしています。これが一番やっかいでclassが「bbp-pagination-count」とついているのですが、上のページネーションと下のページネーションに同じclassがついています。上下を判定するために、「#bbpress-forums div:nth-of-type(2)」を使っています。これは#bbpress-forumsの中にある2番目のdivの要素(nth-of-type(2))にスタイルを適用します。
- 10行目で「order:2;」を設定して順番を上から2番目に変えています。
12行目から15行目で返信欄の調節をしています。
- 13行目で「order:3;」を設定して順番を3番目に変えます。
- 24行目は返信フォームの幅を表示範囲の95%にしています。
16行目から18行目で、下のページネーションの設定をしています。「#bbpress-forums div:nth-last-of-type(2)」で#bbpress-forumsの中にある下から2番目のdivの要素(nth-last-of-type(2))にスタイルを適用します。
- 17行目で「order:4;」を設定して順番を上から4番目に変えています。
後は、このstyle.cssをアップロードすれば順番が入れ替わっていると思います。