WordPressで関連記事を設置(プラグインなし・レスポンシブ対応)

WordPress WordPress

WordPressの関連記事を表示する設置する方法です。
プラグインもいくつかありましたが、設定がイマイチ分かなったので、下記記事を参考に関連記事を追加しました。

301 Moved Permanently

設置場所は、記事詳細ページ(シングルページ)に設置しています。
レスポンシブ対応のCSSも記載しています。

設置イメージ

1. テーマフォルダに、関連記事用のテンプレートを追加作成します。

今回は tpl-related.php としました。

tpl-related.php の内容

‘posts_per_page’=> 9, の「9」は、表示件数になります。
お好みで変更してください。

<div id="related-post">
<h3>関連記事</h3>


<div class="related-post-list">


<?php
$categories = get_the_category($post->ID);
$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'=> 9,//表示件数
    'category__in' => $category_ID,
    'orderby' => 'rand',
);

$query = new WP_Query($args);

    if( $query -> have_posts() ):
        while ($query -> have_posts()) : $query -> the_post(); ?>
 
        <div class="related-post-sub">
          
          <div class="related-post-thumb">
            <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
             
			<?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail('full'); ?>
            <?php else : ?>
            
            	<p class="thumb-noimage">no image</p>
            
            <?php endif ; ?>
    
            </a>
            

          </div>
          
           
          <div class="related-post-content">
          
            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

          </div>
        </div>
   
        <?php endwhile;?>
   
    <?php else:?>
        
        <p>関連記事はありませんでした。</p>
	
	<?php endif; wp_reset_postdata(); ?>
 
</div>
</div>

 

2.single.php の表示したい場所にtpl-related.php を読み込みます。

single.phpに追加

<?php include( TEMPLATEPATH . '/tpl-related.php' ); ?>

 

3.スタイルシートを追加します。

レスポンシブ対応です。PCビューで3カラム、スマートフォンで2カラムとなります。

style.css に追加

/* 関連記事 */
#related-post{}  
#related-post *{
	box-sizing:border-box;
	}
#related-post h3{}


.related-post-list{
	display:flex;
	flex-wrap:wrap;
}

.related-post-list .related-post-sub{
	width:32%;
	margin-right:1%;
	margin-bottom:2%;
	
	padding:0.2em;
	
	box-shadow:0px 0px 3px 1px #EEE;
	-moz-box-shadow:0px 0px 3px 1px #EEE;
	-webkit-box-shadow:0px 0px 3px 1px #EEE;	
	
}

.related-post-thumb{
	margin-bottom: 0.5em;
	}
.related-post-thumb img{
	width:100%;
	
}
.related-post-thumb .thumb-noimage{
	text-align:center;
	background:#EEE;
	padding:2em;
	font-size:12px;
	color:#666;
	}
	 
.related-post-content{
	padding:0.5em;
	}

.related-post-content h4{
	margin-bottom:1em;
	font-size:12px;
	
}

@media only screen and (max-width: 600px){

.related-post-list .related-post-sub{
	width:48%;
	margin-right:2%;
}


}

コメント

タイトルとURLをコピーしました