同じカテゴリーの記事をプラグインなしで表示する

同じカテゴリーの記事をプラグインなしで表示する

get_the_category

Pocket

同じカテゴリーの記事一覧

投稿記事で同じカテゴリーの記事を一覧表示します。今回はプラグインを使用せずにテンプレートファイルにコードを記入して表示します。サムネイル画像、タイトル、およびカスタムフィールドで設定したサブタイトルを表示内容として設定します。

PHP コードを記入する書類

デフォルトテーマの「Twenty Fourteen」を子テーマでカスタマイズする場合は wp-content > theme > 子テーマのフォルダ > content.php を修正します。
その他のテーマを利用している場合は single.phpindex.php などが修正の対象ファイルとなります。

content.phpに追記するコード

<!-- 同じカテゴリの最新記事 -->
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 5, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h5>'; $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name;} echo 'カテゴリーの最新記事</h5><dl>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<dt><div class="samecat">
	<div class="samecat_thumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(50,50)); ?></a></div>
	<a class="samecat_sub" href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php echo esc_html ($post->subtitle); ?></a>
	<a class="samecat_titile" href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
	<div class="clear"></div>
</div><!-- .samecat -->
</dt>
<?
}
echo '</dl></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?> 
<!-- End - 同じカテゴリの最新記事 -->

記事一覧の表示を整えるためのCSS記入例

/* 同じカテゴリの最新記事 */

a.samecat_sub {
	clear: both;
	font-size: 14px;
	text-decoration: none;
	color: #FA8072;
	font-weight: 400;
}

a.samecat_titile {
	color: #000;
	font-size: 14px;
	display:block;
}

.samecat_thumb {
	float: left;
	margin: 10px 15px 5px 0;
	background-color: #F5F5F5;
	padding: 5px;
}

.clear {
	clear: both;
}

#related_posts {
	margin-top: 10px;
}

#related_posts h5 {
	color: #000;
	padding-left: 10px;
	border-left: 5px solid #336699;
	border-bottom: 1px solid #336699;
}

表示例
同じカテゴリーの記事をプラグインなしで表示する