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 -->

 

関連記事
画像 タイトル
サイトマップページの作成(PS Auto Sitemap)
WordPress投稿記事の無駄なhタグを削除
コピペでダブルコーテーションやシングルコーテーションが勝手に変換される
ブログとTwitterを連携
サイトを常時SSL化(HTTPS)してHTTPを利用しない
リンクへの通知(ピンバック)を無効にする
Googleにブログを登録して検索してもらう
画像拡大ポップアップ表示(WP jQuery Lightbox)
WordPressのフッターにRSSフィードを追加する
サムネイルページの作成