【WordPress】おすすめ記事をテキスト形式で表示する方法！

サイト内の回遊率を高めるために、いろんな施策を試しているんですが、記事下に「おすすめ記事」を表示しているサイトをたまに見かけるので、当サイトでも同じことができるようにカスタマイズしてみました。

ちなみに、以前、記事下にピックアップ記事（画像＋テキスト）を表示するカスタマイズもしていたんですが、今回のカスタマイズでは「テキスト形式」を採用しました。

コピペだけでできるカスタマイズなので、ぜひ参考にしていただければと思います:D

1
HTMLコード
2
CSSコード
3
記事にタグを追加
4
まとめ

HTMLコード

まずは、下記のHTMLコードを表示したい場所（single.phpなど）にコピペします。

<!-- 記事下ピックアップ -->
<?php $args = array(
 'numberposts' => 3,//表示する記事数（1なら1記事、5なら5記事表示）
 'post_type' => 'post',
 'orderby' => 'rand',//ランダム表示適用（ランダム表示しない場合は削除）
 'tag' => 'recommend'//追加するタグの名前
);
$recommend = get_posts($args);
if($recommend) : ?>

<div id="under-post-pickup">
<?php foreach($recommend as $post) : setup_postdata( $post ); ?>
<p>
<span>注目</span>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</p>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>

<?php endif; ?>
<!--/ 記事下ピックアップ -->

テキストの左側には「注目」と表示していますが、

recommend
おすすめ
pickup

など、名前は適宜修正してOKです。

CSSコード

次に、style.cssに下記のコードをコピペします。

/* 記事下ピックアップ */
#under-post-pickup {
 padding-bottom: 20px;
}
#under-post-pickup a {
 text-decoration: underline;
}
#under-post-pickup span {
 background-color: #ff0000;
 color: #fff;
 font-size: 12px;
 margin-right: 5px;
 padding: 3px;
 border-radius: 2px;
}