2022.4.23｜WordPress

WordPress（ワードプレス）で記事の一覧に条件（ID、件数、ランダム）を設定して表示する実装方法

WordPress（ワードプレス）で記事の一覧に条件（ID、件数、ランダム）を設定して表示する実装方法

WordPress（ワードプレス）で、記事の一覧を表示することができますが、記事の一覧をランダムで表示することができます。プラグインを利用して記事一覧をランダム表示することはできますが、プラグインを利用しないで記事一覧をランダム表示することができます。
また、記事の一覧をランダムに表示する方法はさまざまな条件を設定し、条件に沿って記事の一覧をランダムに表示することができます。

今回は、WordPress（ワードプレス）で記事の一覧に条件（ID、件数、ランダム）を設定して表示する実装方法を解説します。

本記事の内容

記事の一覧に条件（ID、件数、ランダム）を設定して表示する実装方法

記事の一覧をランダムに表示する場合は、「テンプレート」ファイルにWordPressのクラスを記述るす必要があります。記事の一覧をランダムで表示するために「query_posts」「WP_Query」「get_posts」など、それぞれのクラスを利用することで実装することができます。どのクラスを記述しても同じ表示がされます。
それぞれのクラスは、パラメータが似ていますが実装方法は異なっており、適切に使う必要があります。
※「query_posts」は非推奨とされているため、「WP_Query」や「get_posts」のクラスを利用する方が良いです。

【3つの実装方法】
1.「query_posts」クラスを利用
2.「WP_Query」クラスを利用
3.「get_posts」クラスを利用

1.「query_posts」クラスを利用

「query_posts」クラスを利用して、記事の一覧をランダム表示する実装方法や、パラメータで条件を指定して表示する実装方法をご紹介します。

実装コード（通常のランダム表示）
<?php query_posts('orderby=rand');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile; ?>
<?php else: ?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif; ?>
実装コード（10件に指定してランダム表示）
<?php query_posts('showposts=10&orderby=rand');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile; ?>
<?php else: ?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif; ?>
実装コード（カテゴリーIDが2の記事を10件に指定してランダム表示）
<?php query_posts('cat=5&showposts=10&orderby=rand');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile; ?>
<?php else: ?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif; ?>
実装コード（カスタム投稿タイプ、10件に指定してランダム表示）

※「カスタム投稿タイプ名」を変更します。

<?php query_posts('post_type=カスタム投稿タイプ名&showposts=10&orderby=rand');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile; ?>
<?php else: ?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif; ?>

2.「WP_Query」クラスを利用

「WP_Query」クラスを利用して、記事の一覧をランダム表示する実装方法や、パラメータで条件を指定して表示する実装方法をご紹介します。

実装コード（通常のランダム表示）
<?php
$args = array(
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand'// ランダムで表示
);
$post_query = new WP_Query( $args );
if ( $post_query->have_posts() ) : 
  while ( $post_query->have_posts() ) : $post_query->the_post(); 
?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile;else:?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif;wp_reset_postdata();?>
実装コード（10件に指定してランダム表示）
<?php
$args = array(
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'posts_per_page' => 10// 表示する記事数
);
$post_query = new WP_Query( $args );
if ( $post_query->have_posts() ) : 
  while ( $post_query->have_posts() ) : $post_query->the_post(); 
?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile;else:?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif;wp_reset_postdata();?>
実装コード（カテゴリーIDが2の記事を10件に指定してランダム表示）
<?php
$args = array(
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'cat' => '2',// カテゴリーID
  'posts_per_page' => 10// 表示する記事数
);
$post_query = new WP_Query( $args );
if ( $post_query->have_posts() ) : 
  while ( $post_query->have_posts() ) : $post_query->the_post(); 
?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile;else:?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif;wp_reset_postdata();?>
実装コード（カスタム投稿タイプ、10件に指定してランダム表示）

※「カスタム投稿タイプ名」を変更します。

<?php
$args = array(
  'post_type' => 'カスタム投稿タイプ名',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'posts_per_page' => 10// 表示する記事数
);
$post_query = new WP_Query( $args );
if ( $post_query->have_posts() ) : 
  while ( $post_query->have_posts() ) : $post_query->the_post(); 
?>
//記事が有る場合
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endwhile;else:?>
//記事が無い場合
<h2>記事がありません</h2>
<?php endif;wp_reset_postdata();?>

3.「get_posts」クラスを利用

「get_posts」クラスを利用して、記事の一覧をランダム表示する実装方法や、パラメータで条件を指定して表示する実装方法をご紹介します。

実装コード（通常のランダム表示）
<?php
$args = array( 
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand'// ランダムで表示
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endforeach; wp_reset_postdata();?>
実装コード（10件に指定してランダム表示）
<?php
$args = array( 
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'posts_per_page' => 10// 表示する記事数
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endforeach; wp_reset_postdata();?>
実装コード（カテゴリーIDが2の記事を10件に指定してランダム表示）
<?php
$args = array( 
  'post_type' => 'post',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'category' => '2',// カテゴリーID
  'posts_per_page' => 10// 表示する記事数
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endforeach; wp_reset_postdata();?>
実装コード（カスタム投稿タイプ、10件に指定してランダム表示）

※「カスタム投稿タイプ名」を変更します。

<?php
$args = array( 
  'post_type' => 'カスタム投稿タイプ名',// 投稿タイプを指定
  'orderby' => 'rand',// ランダムで表示
  'posts_per_page' => 10// 表示する記事数
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php endforeach; wp_reset_postdata();?>

まとめ

WordPress（ワードプレス）では、あらゆる情報を取得して表示させる方法はいくつもあります。記事の投稿一覧を表示する方法だけでもいくつかあるのでそれぞれのWordPressクラスやパラメータの指定方法を覚えておきましょう。
自分の使いやすいクラスの記述方法を覚えておき、他の記述方法もあることを知っておくと良いです。

«
»

関連記事