bbPressでフォーラムを簡単につくれますが、余計な表示があって見にくいですよね。
そして必要な表示がなくてなんだかよくわからない。
そこでCSSを使ってそれなりにしよう、という訳です。
ちなみに私はド素人です。お勉強しながら進めていきます。
いきなりCSSまとめ
・該当フォーラム以外のトピックを非表示にする
.bbp-body ul:not(.bbp-parent-forum-数字){
display:none;
}
「数字」の部分を書き換えてください
・「このフォーラムには〇件のどうのこうの、更新がうんたら」を消す
.bbp-forum-description{
display: none;
}
・「〇件のトピックを表示中」を消す
.bbp-pagination-count{
display: none;
}
写真で見る、フォーラムの余計な表示をほーむる
![](https://sakanomochi.com/wp-content/uploads/2023/11/209828fbea4be56109438fe96e3ab568-1024x392.png)
![](https://sakanomochi.com/wp-content/uploads/2023/11/713b30bdd1b6d193b00d365359836fea-1024x553.png)
フォーラムが複数あって、その中の「お試しフォーラム」を選んでリンクに飛びました。
なのに他のフォーラムのトピックが混ざってて見にくい。
該当フォーラム以外のトピックを非表示にします。
Webページ上で右クリックし、「検証」を選んでHTMLを確認します。
![](https://sakanomochi.com/wp-content/uploads/2023/11/e539a5c4a1a78d5d89e5ea49f53be4fe-1024x252.png)
クラス「bbp-parent-forum-数字」が使えそうです。
この「お試しフォーラム」は「bbp-parent-forum-189」だそうです。
/*余計なトピック非表示*/
.bbp-body ul:not(.bbp-parent-forum-189){
display:none;
}
CSS解説 クラス「bbp-body」の中のulで、クラス名が「bbp-parent-forum-189」以外は非表示
フォーラムの編集画面内のカスタムCSSに追記し、更新します。
![](https://sakanomochi.com/wp-content/uploads/2023/11/fbdac9eb78a6f0a129f603fca2c83c7c-1024x420.png)
![](https://sakanomochi.com/wp-content/uploads/2023/11/239c6edd8a6d15ac8737e528202da109-1024x419.png)
フォーラムのページを確認すると余計なトピックが消えました。
![](https://sakanomochi.com/wp-content/uploads/2023/11/15e22a95eb343dacd8ef824bd1d89271-1024x545.png)
次に「このフォーラムには〇件のどうのこうの、更新がうんたら」と「〇件のトピックを表示中」もいらないので消します。クラス名をコンマで区切って指定します。
.bbp-forum-description,.bbp-pagination-count{
display: none;
}
CSS解説 クラス「bbp-forum-description」と「bbp-pagination-count」を指定して非表示
![](https://sakanomochi.com/wp-content/uploads/2023/11/72936850245c1d3bf0f69879d5dafe25-1024x532.png)
すっきりしました。