WordPressでトップページや特定のページに自在に記事を表示する

今でこそ、Wordpressについて少しはわかるようになったと思いますが、最初の頃は記事の一覧を表示させるだけで苦労しました。

僕はブログよりもコーポレートサイトを作る機会が多いのですが、Wordpressでコーポレートサイトを構築する時、例えば「お知らせ」というカテゴリを持った投稿のみをトップのある部分に表示させたいことがよくあります。また普通のループ処理とは別にある条件の投稿一覧を複数表示させたいということもあります。

ということで今回はWordpressのループ外に投稿一覧を表示させる方法をご紹介します。

WP_Queryを使う

WP_Queryはメインのループとは異なる独自のループを作る時などに使います。
メインループの下でもフッタでもサイドバーでもどこでも設置できます。ただしメインループとは異なるのでページネーションは設置できないのでご注意ください。

まずは基本の書き方から見ていきましょう。
なるべく初心者にもわかるようにコロン構文で書きます。

<?php
  $args = array();
  $args['post_type'] = 'post';
  $the_query = new WP_Query($args);
  while ( $the_query->have_posts() ) : $the_query->the_post();
?>
  <h1>タイトル:<?php the_title(); ?></h1>
  <h2>URL:<?php the_permalink(); ?></h2>
  <h3>日付:<?php the_time('Y年n月j日'); ?></h3>
  <h4>カテゴリ:<?php the_category(', '); ?></h4>
  <h5>本文:<?php the_content(); ?></h5>
<?php
  endwhile;
  wp_reset_postdata();
?>

上記が基本的な書き方です。
これを表示させたい部分にコピペしてみてください。
これだとすべての投稿データが出力されるはずです。

次に5件だけ表示されるようにします。
1〜6行目を下記に置き換えてみてください。

<?php
  $args = array();
  $args['post_type'] = 'post';
  $args['posts_per_page'] = 5;
  $the_query = new WP_Query($args);
  while ( $the_query->have_posts() ) : $the_query->the_post();
?>

これで5件だけ表示されるようになります。posts_per_pageは表示させたい件数を指定します。ちなみにここを-1にしても全件表示されます。

今度はカテゴリを指定します。

<?php
  $args = array();
  $args['post_type'] = 'post';
  $args['posts_per_page'] = 5;
  $args['category_name'] = 'カテゴリ名';
  $the_query = new WP_Query($args);
  while ( $the_query->have_posts() ) : $the_query->the_post();
?>

カテゴリ名はカテゴリを登録する時に入れたスラッグ名です。
複数のカテゴリを指定する場合、以下のように書きます。

<?php
  $args = array();
  $args['post_type'] = 'post';
  $args['posts_per_page'] = 5;
  $args['category_in'] = array(1, 2, 3); //カテゴリIDを入力します
  $the_query = new WP_Query($args);
  while ( $the_query->have_posts() ) : $the_query->the_post();
?>

上記だとカテゴリIDが1、2、3のどれかに属していれば一覧に表示されます。
ちなみに「1、2、3のカテゴリすべてに属している投稿」を表示させる場合はcategory_inをcategory_andに、逆に「1、2、3のカテゴリに属している投稿を除外する」という場合はcategory_not_inを使います。

いかがでしたでしょうか?
次回はカスタム投稿、タクソノミーについてご紹介したいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA