Worpressの通販サイトの投稿記事下に、関連記事を２列＆サムネイル付きで出したい。

前提・実現したいこと

WordpressのWelcart（テーマはWelcart Carina）を使った通販サイトの投稿記事の下に、関連記事を出したい。そして、その関連記事はサムネイル画像付きで、できれば２列（スマホ表示では１列）に表示させたい。

発生している問題・エラーメッセージ

single.phpにコードを追加して（初心者なので、コピペです）、一応関連記事が出るようになったが、２列にしたり、サムネイルと記事タイトルの間に余白を付けたり、などの細かいことができない。また、h2タグが効かない。

該当のソースコード

php
1<div class="relatedposts">
2<?php
3    $categories = get_the_category();
4  foreach($categories as $category):
5  $related_posts = get_posts(array('category__in' => array($category->cat_ID), 'exclude' => $post->ID, 'numberposts' => 3));
6  if($related_posts): ?>
7<h2>関連記事</h2>
8<ul>
9<?php foreach($related_posts as $related_post):
10  $thumbnail = get_post_thumbnail_id( $related_post->ID );
11  $src_info = wp_get_attachment_image_src($thumbnail, 'thumbnail');
12  $src = $src_info[0];
13  $width = $src_info[1];
14  $height = $src_info[2];
15  $title = $related_post->post_title;
16 ?>
17<li><a href="<?php echo get_permalink($related_post->ID); ?>">
18<?php if ( has_post_thumbnail($related_post->ID) ) {
19  echo '<img src="'.$src.'" alt="'.$title.'" width="'.$width.'" height="'.$height.'" />';
20  } ?><?php echo $title ?></a>
21</li><br>
22<?php endforeach; ?>
23</ul>
24<?php endif; endforeach; ?>
25</div>

試したこと

プラグイン（Yet Another Related Posts Plugin（YARPP））を入れてみましたが、全く機能しませんでした。
また、class名「relatedposts」でcssを少し変えてみたものの、こちらもあまり詳しくないため、表示が少々ずれただけであまり変わりませんでした。

補足情報（FW/ツールのバージョンなど）

WordPress 5.5 (Welcart Carina テーマ)

行動規範の内容に同意します

回答1件

ベストアンサー

お疲れ様です。出力はできているようなので、あとはCSSの問題かと存じます。
特に設定していなければ現在はお使いのテーマの仕様通りになっているはずです。
記事を２カラムにするならul要素にclassを追加し、display:flexを設定すると、直下の子要素を横並びにできます。直下のli要素はflex-basisやwidthを50%程度にしておくと、横に2つ並べることができます。
スマホ時１列にしたい場合はbreakpointで対応できます。
参考までにサンプルコードを下記に示しますが、テーマCSSによってはうまく動作しない可能性があります。なお、わかりやすいようにCSSにclassを付与しています。ご利用の際はphpのulおよびliにそれぞれclassを付与してください。

CSS
1ul.relatedposts-item-group {
2  display: flex;
3  flex-wrap: wrap;
4  align-content: space-between;
5}
6/* 50％以下にするとカラム間に余白ができる */
7li.relatedposts-item {
8  flex-basis: 49%;
9  width: 49%;
10}
11/* 画像とタイトル余白 */
12li.relatedposts-item > img {
13  padding: 1rem;
14}
15/* スマホ時は1列にする */
16@media (max-width: 375px) {
17  li.relatedposts-item {
18    flex-basis: 100%;
19    width: 100%;
20  }
21}
22