実現したいこと
・理想のデザインはこちらのサイトの見た目です。https://kokotomo.com/bbs
・掲示板という固定ページに、https://kokotomo.com/bbsのようなフォーラムタイトルが数個あり、そのフォーラムの下に数個トピックが箇条書きのように並んでいる。また、トピックの右横にコメント数が表示される。
・トピックのテキストをクリックすると、トピックページへ。フォーラムタイトルのテキストをクリックすると、フォーラムタイトルのページへ遷移するようにする。
前提
現在、自身のサイトで掲示板機能を実装しようとしています。
自身の際とはWordpressのcocoonテーマを使用して作成しています。
私の低いレベルでは、CSSをいじってやってみても理想には近づけませんでした。
該当のソースコード
こちらが、ショートコードで表示されたものを、デベロッパーツールで確認した時のHTMLです。
（フォーラムやトピックは、まだテストとして数個登録しているだけですので
理想のサイトのようなトピック数はありません。）
HTML
12<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
0 コメント