【WordPress】プラグインなしで関連記事を表示する方法【CSS付き】
WordPressで関連記事表示するにはYARPPのプラグインが有名です。でも、わざわざプラグイン導入しなくても簡単に関連記事表示できます。
WordPressの掟
プラグインは便利だけど、入れすぎるとメンテナンスがめんどい…。
WordPressプラグインは、使えば使うほどサイトメンテナンスが面倒になります…。あとコンフリクトでバグったりする原因にもなるので、使いすぎないことをオススメします。WordPressにいれるべきプラグインはWordPressのおすすめプラグインは8つだけ。断言しますをご覧ください。
というわけで、プラグインなしで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
}
}
以上です。簡単ですね。
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。