HoBoFoTo

Hobo everyday foto.

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をアップロードすれば順番が入れ替わっていると思います。
 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です