ワードプレス投稿に関連記事表示方法　コピペ | 福岡のホームページ制作はマリオ君にお任せ

<?php
$categories = get_the_category($post->ID);
if ( $categories ) :
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),//現在の記事を除く
'posts_per_page'=> 3,//記事数
'category__in' => $category_ID,//カテゴリー指定
'orderby' => 'rand' //ランダム取得
);
$related_posts = new WP_Query($args);
if( $related_posts-> have_posts() ): ?>
<?php
while ($related_posts -> have_posts()) :
$related_posts -> the_post();
?>

<!--ここに関連記事の表示方法を記入-->
	

<?php endwhile; ?> 
<?php else : ?>
<!--関連記事がない場合に何か表示させたい場合はここに書く-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>  

<?php
$categories = get_the_category($post->ID);
if ( $categories ) :
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),//現在の記事を除く
'posts_per_page'=> 3,//記事数
'category__in' => $category_ID,//カテゴリー指定
'orderby' => 'rand' //ランダム取得
);
$related_posts = new WP_Query($args);
if( $related_posts-> have_posts() ): ?>
<div class="kanrenbox">
<h6 class= "kanti"><span>こっちもみて！関連記事</span></h6>
<ul>	
<?php
while ($related_posts -> have_posts()) :
$related_posts -> the_post();
?>

<li>
    <a href="<?PHP the_permalink();?>">
        <p>
<?php if (has_post_thumbnail()) : ?>
<?php
  $post_title = get_the_title();
  the_post_thumbnail('full',array('alt' => $post_title,));
?>
<?php else : ?>
    <img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/nosum.jpg" alt="サムネイル画像no-image" />
<?php endif ; ?>
        </p>
        <h4><?PHP the_title();?></h4>
        <ul>
            <?php
        //
if ($terms = get_the_terms($post->ID, 'category')) {
    foreach ( $terms as $term ) {
    echo ('<li>') ;
    echo esc_html($term->name)  ;
    echo ('</li>') ;
    }
}

?>

        </ul>
        <p class="days"><?PHP echo get_the_date();?></p>
    </a>
</li>
	

<?php endwhile; ?> 
</ul>
</div>
<!--kanrenbox終わり//////////////-->
<?php else : ?>
<!--関連記事がない場合に何か表示させたい場合はここに書く-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>  

.kanrenbox{
	
	margin: 80px 0 0;
	@media screen and (max-width: 767px){
		
       margin: 60px 0 0;
		
    }
	ul{
		
		display: flex;
		//justify-content: space-between;
		flex-wrap: wrap;
		margin: 50px 0 0;
		
	}
	
	li:nth-child(2){
		
		margin:0 5% 40px;
		@media screen and (max-width: 767px) {

			margin:0 0 40px;
		}
	}
	li{
		
		width: 30%;
		position: relative;
		margin: 0 0 40px;
		@media screen and (max-width: 767px){
			width: 100%;
			margin: 0 0 20px;
		}

        &::before{

            content: '';
            display: block;
            width: 38px;
            height: 57px;
            position: absolute;
            background:url("../img/bico.svg") no-repeat;
            background-size: contain;
            right: 0;
            bottom: 0;

        }
        &::after{

            content: '';
            display: block;
            width: 9px;
            height: 15px;
            position: absolute;
            background:url("../img/aro01.svg") no-repeat;
            background-size: contain;
            right: 5%;
            bottom: 5%;

        }
		a{
			display: block;
			position: relative;
			height: 100%;
			padding: 0 0 30px;

		}
		h4{
			
			padding: 15px 5px;
		}
		ul{
			
			margin: 0 ;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		li{
			
			width: inherit;
			font-size: 1.1rem;
			background: #32B488;
			border-radius: 20px;
			padding: 5px 10px;
			color: #FFF;
			margin: 0 5px 5px 0 !important;
			&::before,&::after{

				display: none;
			}
		}
        .days{

            color: #CCC;
            font-size: 1.2rem;
			　　margin: 10px 0 0 5px;
			　　@media screen and (max-width:374px) {

				　　font-size: 1.0rem;

			　　}
        }
	}
	
}