FASTCODING-Vietnamのバックエンドエンジニア、ジアンです。
Webサイトを見ていて「ランダムに記事を読み込む」ページを見たことはありますか？
具体的にはWebサイトを表示すると
最初はりんごに関する記事が1番上に表示されていたのに
同じページを更新してみたら、次はみかんに関する記事が1番上に来ている
このようにページを再読み込みしたら、毎回違う記事が表示されるというものです。
[ Demo ]ページはこちら
この機能は投稿数が多いブログなどに適しています。
ページを更新すると毎回ランダムに違う記事が表示されるので
記事に対しての読みムラが少なくなり、
まんべんなく色々な記事をユーザに読んでもらうことができます。
今回はWordPressでこの機能を実装してみたいと思います。
WordPressで記事をランダムに表示させる方法
まずカスタムページテンプレートを作ります。
下記の2パターン作成したので、お好きなほうを使用してください。
#1 : WordPressテーマ内に直接記述する場合
#2 : ショートコードとして使う場合
#1 : WordPressテーマ内に直接記述する場合
[↓] 記事を表示させたいphpファイル :
<?php query_posts(array('orderby' => 'rand', 'showposts' => 5));
if (have_posts()) :
while (have_posts()) : the_post(); ?>
/* 繰り返し表示させる部分 */
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
「’orderby’ => ‘rand’」で記事のランダム表示を設定し、
「’showposts’ => 5」で記事の表示件数を制御しています。
#2 : ショートコードとして使う場合
WordPressの記事のランダム表示は簡単なWP_Queryのループです。
ショートコードのlimitのパラメータに「5」を設定していますが、
これはランダム記事を5つだけを表示するという意味です。
このパラメータを変更することで記事の表示件数を変更できます。
[↓] 固定ページ内で使用するショートコード :
[random_posts limit=5]
[↓] functions.php :
<?php
function random_posts($attrs = array()){
ob_start();
$limit = !empty($attrs['limit']) ? $attrs['limit'] : 0;
?>
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'rand', // 記事のランダム表示設定
'posts_per_page' => $limit,
);
$posts_query = new WP_Query( $args );
if ($posts_query->have_posts()) :
while ($posts_query->have_posts()) : $posts_query->the_post(); ?>
/* 繰り返し表示させる部分 */
<div class="post-item">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php echo get_the_excerpt(); ?>
</div>
<?php endwhile;
endif; ?>
<?php
return ob_get_clean();
}
add_shortcode('random_posts','random_posts');
?>
「繰り返し表示させる部分」の中にはタイトルと本文だけ入れてありますが
HTMLを編集すれば、任意のコンテンツを繰り返し表示させることができます。
いかがでしたか？
WordPress構築案件でお困りでしたらFASTPRESSまでお気軽にご相談ください。
