WordPressの投稿記事でカテゴリ関連記事一覧の追加

投稿記事のカテゴリで同一の関連記事を一覧で表示しているページがあります。
投稿記事のページは全て同じように関連記事の一覧を表示したいのでプラグインでなくプログラムを修正することにしました。
とはいえ採用したテーマやCSSの構成を把握するのも面倒なのでかなり手抜きですが参考程度に備忘録としますのでご容赦願います。

完成イメージ

 

投稿記事表示ページのプログラム修正

WordPressに管理者でログインして「外観」の「テーマエディター」をクリックします。
使用しているテーマは無料の「Nifty Lite」なので継承元の「Specia」リンクをクリックします。

「個別投稿(single.php)」をクリックします。

赤字の部分が追記したコードになります。
太字の部分はタイトルなど数値の10は最大10記事を表示します。
記事がなければ表示しません。
簡単なHTMLやサーバーサイドスクリプト言語を理解できれば難しくない内容かと思いますのでコピペしていい感じに修正して利用してください。

<!-- Blog & Sidebar Section -->
<section class="page-wrapper">
<div class="container">
<div class="row padding-top-60 padding-bottom-60">
<!--Blog Detail-->
<div class="<?php specia_post_column(); ?>" >
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<?php get_template_part('template-parts/content','page'); ?>
<?php endwhile; ?>
<?php comments_template( '', true ); // show comments  ?>
<?php else: ?>
<?php get_template_part('template-parts/content','none'); ?>
<?php endif; ?>
<?php
$categ = get_the_category($post->ID);
$catID = array();
foreach($categ as $cat){
array_push($catID, $cat -> cat_ID);
}
$args = array(
'post__not_in' => array($post->ID),
'category__in' => $catID,
'posts_per_page' => 10,
'orderby' => 'rand'
);
$the_query = new WP_Query($args);
if($the_query -> have_posts()) :?>
<b>関連記事</b>
<table>
    <tr>
        <td bgcolor="midnightblue" width="120"><font color="white">画像</font></td>
        <td bgcolor="midnightblue"><font color="white">タイトル</font></td>
    </tr>
<?php while($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <tr>
        <td>
        <a href="<?php the_permalink(); ?>">
            <?php if(has_post_thumbnail()): the_post_thumbnail('thumbnail'); endif; ?>
        </a>
        </td>
        <td valign="top">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </td>
    </tr>
<?php endwhile; ?>
</table>
<?php endif; wp_reset_postdata(); ?>
<div class="clearfix"></div>
            </div>
            <!--/End of Blog Detail-->
                <?php get_sidebar(); ?>
        </div>   
    </div>
</section>
<!-- End of Blog & Sidebar Section -->