2016/09/17

【WordPress】プラグインなしで関連記事を表示する方法【CSS付き】

WordPressで関連記事表示するにはYARPPのプラグインが有名です。でも、わざわざプラグイン導入しなくても簡単に関連記事表示できます。

WordPressの掟

プラグインは便利だけど、入れすぎるとメンテナンスがめんどい…。

WordPressプラグインは、使えば使うほどサイトメンテナンスが面倒になります…。あとコンフリクトでバグったりする原因にもなるので、使いすぎないことをオススメします。WordPressにいれるべきプラグインはWordPressのおすすめプラグインは８つだけ。断言しますをご覧ください。

というわけで、プラグインなしでWordPressサイトに関連記事を表示するスクリプトをまとめました。

完成予想図

同じタグが入っている記事を表示する仕様です。あと、日付順じゃなくランダム表示なので、過去記事にもGoogleロボットが流れやすい仕様です（SEOの話なので、意味不明な人は無視でOK）。

また、アイキャッチ画像がない場合はNo imageのデフォルト画像がでるようになっています。

WordPress専用：関連記事を表示するPHPコード

下記をコピペで動きます。ちょろちょろコメントいれてますが、わからない場合はググってみてください。たぶん分からなくても人生には困りません。

<div class="relatedposts">

<h4>関連記事</h4>

<?php
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);

	if ($tags) {
		$tag_ids = array();

		foreach($tags as $individual_tag)
			$tag_ids[] = $individual_tag->term_id;
			$args = array(
			'tag__in' => $tag_ids,
			'post__not_in' => array($post->ID),
			'posts_per_page'=>4, // 表示する関連記事の数
			'caller_get_posts'=>1,
			'orderby' => 'rand', // 過去記事に内部リンクできるので割と重要
		);

		$my_query = new wp_query( $args );
		?>

		<div class="col-xs-12">

		<?php
		while( $my_query->have_posts() ) {
			$my_query->the_post();

			$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
			if ( !empty($thumb['0']) ) {
				$url = $thumb['0'];
			} else {
				$url = "http://design-ec.com/d/e_others_50/l_e_others_500.png";
		} ?>

		<div class="col-xs-6 inner">
			<div itemscope itemtype='http://schema.org/ImageObject' class="thumbnail">
				<a style="background-image:url(<?=$url?>);" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url" class="thumbnail-img"></a>
			</div>
			<h5>
				<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
					<?php if (strlen($post->post_title) > 30) {
					echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 30,  'UTF-8') . '...'; } else {
					the_title();
					} ?>
				</a>
			</h5>
			<p>
				<?php
					$cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">';
					echo $cat->cat_name;
					echo  '</a>';
				?>
			</p>
		</div>

		<?php } // while文ここまで
		?>
		</div>

	<?php
	} // IF文ここまで

	$post = $orig_post;
	wp_reset_query(); ?>
</div>

おまけ：CSSスクリプト（Bootstrapのみ）

すいません…。下記はBootstrapのみで動作します。Bootstrapじゃない人は頑張ってCSS書いてください。


.relatedposts {
    margin-top: 40px
}

.relatedposts .inner {
    border: 1px solid #F1F2F4;
    margin-bottom: 5%;
    margin-right: 2%;
    width: 46%;
    margin-left: 2%;
    padding-bottom: 20px;
    min-height: 340px
}

@media only screen and (max-width: 479px) {
    .relatedposts .inner {
        width: 96%;
        min-height: 250px
    }
}

.relatedposts .inner a.link {
    height: 0
}

.relatedposts .inner .thumbnail {
    margin-bottom: 20px
}

.relatedposts .inner .thumbnail a {
    height: 150px
}

@media only screen and (max-width: 479px) {
    .relatedposts .inner .thumbnail a {
        height: 100px
    }
}

.relatedposts .inner h5 {
    text-align: left;
    color: #4DAED4;
    letter-spacing: 0px;
    line-height: 25px;
    font-size: 16px
}

@media only screen and (max-width: 479px) {
    .relatedposts .inner h5 {
        font-size: 13px
    }
}

.relatedposts .inner p {
    float: right;
    margin: 3%;
    padding: 2px 10px 2px;
    background: #E8EBEC
}

.relatedposts .inner p a {
    font-size: 12px;
    color: #838C91
}

@media only screen and (max-width: 479px) {
    .relatedposts .inner p a {
        font-size: 9px
    }
}

以上です。簡単ですね。

WordPress