Wordpressプラグイン「bbpress」でサイト内に掲示板を作っていますが、理想としているデザインができません。

実現したいこと

・理想のデザインはこちらのサイトの見た目です。https://kokotomo.com/bbs
・掲示板という固定ページに、https://kokotomo.com/bbsのようなフォーラムタイトルが数個あり、そのフォーラムの下に数個トピックが箇条書きのように並んでいる。また、トピックの右横にコメント数が表示される。
・トピックのテキストをクリックすると、トピックページへ。フォーラムタイトルのテキストをクリックすると、フォーラムタイトルのページへ遷移するようにする。

前提

現在、自身のサイトで掲示板機能を実装しようとしています。
自身の際とはWordpressのcocoonテーマを使用して作成しています。
私の低いレベルでは、CSSをいじってやってみても理想には近づけませんでした。

該当のソースコード

こちらが、ショートコードで表示されたものを、デベロッパーツールで確認した時のHTMLです。
（フォーラムやトピックは、まだテストとして数個登録しているだけですので
理想のサイトのようなトピック数はありません。）

HTML
1
2<li class="bbp-body">
3<ul id="bbp-topic-5735" class="loop-item-0 user-id-1 bbp-parent-forum-0 odd  post-5735 topic type-topic status-publish hentry ja">
4	<li class="bbp-topic-title">
5		<a class="bbp-topic-permalink" href="https://サイトURL/forums/topic/%e3%83%86%e3%82%b9%e3%83%881%e3%81%ae%e3%83%88%e3%83%94%e3%83%83%e3%82%af%e3%80%802%e5%80%8b%e7%9b%ae/">テスト1のトピック　2個目</a>
6	<p class="bbp-topic-meta">
7		<span class="bbp-topic-started-by">トピック作成者: <a href="https://サイトURL/forums/users/サイト名/" title="サイト名 のプロフィールを表示" class="bbp-author-link"><span class="bbp-author-avatar"><img alt="サイト名" src="https://サイトURL/wp-content/uploads/2022/12/ロゴ（カラー）.-.jpg" class="avatar avatar-14 photo" height="14" width="14"></span><span class="bbp-author-name">サイト名</span></a></span>
8		<span class="bbp-topic-started-in">フォーラム: <a href="https://サイトURL/forums/topic/%e3%83%86%e3%82%b9%e3%83%881%e3%81%ae%e3%83%88%e3%83%94%e3%83%83%e3%82%af%e3%80%802%e5%80%8b%e7%9b%ae/">テスト1のトピック　2個目</a></span>
9		</p>
10　　</li>
11	<li class="bbp-topic-voice-count">0</li>
12　　　　<li class="bbp-topic-reply-count">1</li>
13　	<li class="bbp-topic-freshness">
14　　　　	<a href="https://サイトURL/forums/topic/%e3%83%86%e3%82%b9%e3%83%881%e3%81%ae%e3%83%88%e3%83%94%e3%83%83%e3%82%af%e3%80%802%e5%80%8b%e7%9b%ae/" title="テスト1のトピック　2個目">28分前</a>
15		<p class="bbp-topic-meta">
16			<span class="bbp-topic-freshness-author"><a href="https://サイトURL/forums/users/サイト名/" title="agricreation のプロフィールを表示" class="bbp-author-link"><span class="bbp-author-avatar"><img alt="agricreation" src="サイトURL/wp-content/uploads/2022/12/ロゴ（カラー）.-.jpg" class="avatar avatar-14 photo" height="14" width="14"></span><span class="bbp-author-name">サイト名</span></a></span>
17		</p>
18	</li>
19</ul><!-- #bbp-topic-5735 -->
20<ul id="bbp-topic-5596" class="loop-item-1 user-id-1 bbp-parent-forum-5592 even  post-5596 topic type-topic status-publish hentry ja">
21	<li class="bbp-topic-title">
22		<a class="bbp-topic-permalink" href="https://サイトURL/forums/topic/%e3%83%86%e3%82%b9%e3%83%881-1/">テスト1-1</a>
23		<p class="bbp-topic-meta">
24			<span class="bbp-topic-started-by">トピック作成者: <a href="https://サイトURL/forums/users/サイト名/" title="サイト名 のプロフィールを表示" class="bbp-author-link"><span class="bbp-author-avatar"><img alt="サイト名" src="https://サイトURL/wp-content/uploads/2022/12/ロゴ（カラー）.-.jpg" class="avatar avatar-14 photo" height="14" width="14"></span><span class="bbp-author-name">サイト名</span></a></span>
25				<span class="bbp-topic-started-in">フォーラム: <a href="https://サイト名/forums/forum/%e3%83%86%e3%82%b9%e3%83%881/">テスト1</a></span>
26		</p>
27	</li>
28	<li class="bbp-topic-voice-count">1</li>
29	<li class="bbp-topic-reply-count">1</li>
30	<li class="bbp-topic-freshness">
31		<a href="https://サイトURL/forums/topic/%e3%83%86%e3%82%b9%e3%83%881-1/" title="テスト1-1">1週、 5日前</a>
32　　　　　<p class="bbp-topic-meta">
33			<span class="bbp-topic-freshness-author"><a href="https://サイト名/forums/users/agricreation/" title="サイト名 のプロフィールを表示" class="bbp-author-link"><span class="bbp-author-avatar"><img alt="agricreation" src="https://サイト名/wp-content/uploads/2022/12/ロゴ（カラー）.-.jpg" class="avatar avatar-14 photo" height="14" width="14"></span><span class="bbp-author-name">サイト名</span></a></span>		
34</p>
35</li>
36</ul><!-- #bbp-topic-5596 -->
37</li>

試したこと

上記理想のサイトでは、ショートコードを使用しているかどうかわからなかったのですが
①ショートコードを使用するパターン
②ショートコードを使用しないパターン
で試しました。

①では、ショートコードを使用してプレビューしたときの見た目から
デベロッパーツールでclassやIDを確認し、｛display:none;｝などを使いつつ
不要な要素は非表示にしたり、装飾したりしました。
しかし、理想のサイトのような見た目にはなりませんでした。
（トピックの右横にコメント数が表示されたり、フォーラムタイトルの仕様変更などうまくできませんでした。フォーラムタイトルは自身のサイトで登録している「h2」の見出しを使用し、トピックは「トピックタイトルのみ」などにもしてみましたが、表示が変になりました。）
下記PHPも記載し、デザインをデフォルトにしてから試してもみましたがダメでした。

php
1function enqueue_custom_styles() {
2    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/custom-styles.css', array(), '1.0.0', 'all' );
3}
4add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles', 9999 );
5

②ショートコードを使用せず、HTML、CSS、phpなどを使用して新着トピックを頭に持ってきたりなど試みましたが、phpの知識が乏しく、うまくできませんでしした。

【補足情報（使用テーマ・バージョン）】

テーマ名：Cocoon
バージョン：2.5.9
カテゴリー数：7
タグ数：73
ユーザー数：1

子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：19813バイト
functions.phpサイズ：10477バイト

Gutenberg：1
AMP：1
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：0

ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：0
Lazy Load：0

利用中のプラグイン：
Akismet Anti-Spam 5.1
All in One SEO 4.3.4.1
Anchor Episodes Index 2.0.1
bbPress 2.6.9
Bogo 3.6.1
Classic Editor 1.6.3
Conditionally display featured image on singular pages and posts 2.13.0
Contact Form 7 5.7.5.1
Custom Twitter Feeds 2.0.6
EditorsKit 1.34.8
Embed Block for TikTok 0.1
Envo Extra 1.6.4
EWWW Image Optimizer 6.9.3
Hello Dolly 1.7.2
podcast player 6.4.1
Search Everything 8.1.9
Site Kit by Google 1.99.0
Smash Balloon Instagram Feed 6.1.3
TikTok Feed (Beta) 4.0.0
TypeSquare Webfonts for エックスサーバー 1.2.4
Visualizer: Tables and Charts for WordPress 3.9.7
WooSidebars 1.4.6

m.ts10806

2023/04/25 05:03

テンプレート文言らしきものが残ってるのと、後半全て題字になっていて読みづらくなっているので調整してくさい。またレイアウトは文章と参考先だけでは伝わりづらいので、完成イメージと現在の状態を図示してください。テーマ周り、プラグイン周りの機能も含めるとかなり難易度も上がるので、もしかしたら「質問と回答」という範疇では難しいかもしれませんが…

AbeTakashi

2023/04/25 07:34

ココトモさんのメインのcssファイルを見ると、おそらくですがデザインのプロがこのサイトのためだけに一から作ったcssだと思います。素人が見よう見まねで小手先の対応だけで真似できる感じではないかと。ですので、m.ts10806さんもおっしゃってますが、現状の内容では単純に「質問と回答」のフォーマットで出るような質問になってないです。質問するのであればもっとピンポイントな内容に絞って質問された方がいいかと。 --- 掲示板という固定ページに、https://kokotomo.com/bbsのようなフォーラムタイトルが数個あり、そのフォーラムの下に数個トピックが箇条書きのように並んでいる。また、トピックの右横にコメント数が表示される。・トピックのテキストをクリックすると、トピックページへ。フォーラムタイトルのテキストをクリックすると、フォーラムタイトルのページへ遷移するようにする。 --- ↑の質問内容を可能な限り分解して、一つ一つじっくり解決を目指した方がいいと思いますよ。