投稿記事をランダムでピックアップ

記事をランダムに表示させる

関連記事や新着記事を呼び出す方法はたくさんありますが、たまに過去の記事を目にしてひらめくときってありませんか？
今回は、ランダムで投稿記事を表示する方法を紹介します。

サイドバーに一覧として出力するパターンと、スクロールを使ってコンパクトに表示する方法を紹介します。

ランダム記事を入れる場所

サイドバーに入れてみます。
sideber.phpの閉じタグ手前に入れます。

ランダムで出すソース

アイキャッチに画像が入っていない場合に、ノーイメージとして画像が出るように条件分岐しています。
お好みの画像を入れるか、不要な場合は削除してください。

記事数を変更する場合は、「showposts　＝＞5」の数字を調整してください。
ここの数字が表示記事数になります。

　
<h3>ピックアップ</h3>
<div class="pickup">
     <ul class="lower-page">
<?php query_posts(array('orderby' => 'rand', 'showposts' => 5));
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<li>
  <p><a href="<?php the_permalink(); ?>">
        <?php if ( has_post_thumbnail() ):   ?>
        <?php echo get_the_post_thumbnail($post->ID); ?>
        <?php else:  ?>
        <img src="https://ドメイン/image/お好みの画像.png" alt="NO IMAGE" title="NO IMAGE" />
        <?php endif; ?>
        </a></p>
  <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></li>
<?php endwhile; endif; ?>
</ul>
</div>  

立て並びで一覧表示させるCSS

サイドバーにアイキャッチとタイトルを並べただけのcssです。

　
.pickup ul {
    margin: 0;
}
.pickup li {
    list-style: none;
}
.pickup li p {
    margin-bottom: 0;
}
.pickup ul.lower-page li {
    margin-bottom: 1.5rem;
}
.pickup ul.lower-page li p {
    font-size: 0.8rem;
    line-height: 1.5;
}

横並びにしてスクロールさせる

cssだけでスクロールできるんです。ピタッと止まってくれるスクロールの詳細は、こちらで紹介していますのでご確認下さい。
スライダーとかスクロールでピタッと止まって欲しい！scroll-snap-typeってなに

イメージはこんな感じになります。

5記事を横並びにしたときのスタイルを紹介します。
スマホサイズにしたときにスクロールがピタっと止まるので、ぜひお試しください。

　
.pickup ul.lower-page li {
    margin: 0 0.5rem 0.5rem;
    width: 275px;
    scroll-snap-align: start;
    padding: 0.5rem;
    list-style: none;
}
.pickup ul.lower-page li p {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0;
}
.pickup ul.lower-page {
    width: 1600px;
    display: flex;
    margin: 0;
}
.pickup {
    height: 220px;
    overflow: hidden;
    width: 280px;
    max-width: 100%;
    overflow-x: scroll;
    border: 2px solid #666;
    margin: 1rem 0;
    box-shadow: 6px 5px #eee;
    scroll-snap-type: x mandatory;
}

このサイトのサイドバーにもランダム記事をスクロールできるようにしていますので、確認してみてください。