特定カテゴリの表示や表示件数を制御するquery_postsの使い方|WordPressでくビジネスサイトをつくろう【第13回】

前回はカテゴリーのスラッグ名を取得してclassに割り当てて投稿時のカテゴリー毎に異なったアイコンを表示させる形を作成しました。投稿する種類によって色違いのアイコンをつけたりすることで視認性をあげる役割ができ簡単な記述で便利に使うことができます。

今回は特定のカテゴリーの中の記事のみを表示させたり、表示させる件数を制御するための「query_posts」についての使い方をまとめてみたいと思います。

こちらもビジネスサイトではページ内容によって決められたカテゴリーの記事のみを表示させたいという場合が多くありますので簡単な記述で特定のカテゴリーの記事を表示できるとても便利な記述です。

投稿した記事の表示件数の設定

WordPressに限らず、ブログなどではTOPページには、その記事の見出しを複数表示させる設定があり、管理画面に投稿数を設定するとそのブログの一覧ページの表示件数を制御することができます。

WordPressでも左側のメニューの「設定」→「表示設定」内にある「1ページに表示する最大投稿数」の件数分の投稿された記事がループ文で呼び出された場合のループされる回数になります。(初期設定では10件)

各ページで表示される記事数を設定できる

ループ文の設定については以前の記事でまとめてあります。

参考:第10回目 WordPressで投稿した記事の内容をループ文を使用して表示させる

ブログなどではブログのTOPのみが一覧になったりするので、この設定のみでよいのですが、ビジネスサイトのように更新する内容がページ毎に違う場合でも、すべてのループの呼び出しで10件表示されてしまいます。

ページによっては10件以上表示させたい場合や、件数を減らしたい場合などもでてきます。

また、今回の参考サイトでは「ニュース」と「製品情報」を投稿で管理していますので、両方の記事が最新順に表示されてしまいますので、実際使用する際はTOPページなどはニュースを表示するエリアと製品情報を表示するエリアにわけたいです。

しかし、通常なにもしないでループ文で投稿した記事を呼び出すと、最新の記事からカテゴリーの種類は気にせず表示させてしまいます。

こうするとビジネスサイトなどではわかりにくいページになってしまいますので必ず特定のカテゴリーを表示させるという機会がでてきます。

サンプルサイトから表示を確認する

実際に今回作成したサンプルサイトからどのように表示されているかを確認してみます。

サンプルサイトはこちらになります。
http://wordpress-book.webdesignmatome.com/news/

TOPページではNEWSの領域にスラッグ名「info」と「seminer」の中から最新から5件表示し、PRODUCTSの領域にはスラッグ名「products」の最新4件を表示させています。

それぞれのカテゴリーを個別に表示

こちらを見るとわかると思いますが、「表示設定」で設定した10件ではなく、それぞれのカテゴリーのみを表示させ、それぞれ表示件数を制御しています。

このようにすると「表示設定」で設定は必要ないとおもいますが、今回のサンプルサイトでは表示件数を20件にして、NEWSの一覧ページと製品情報一覧ページを20件表示にさせました。

「表示設定」で設定した20件を表示

※クリックして大きな画像をみる

「query_posts」ですべてを表示件数制御することも可能ですが、サイト全体を考えてベースとなる部分の設定を「表示設定」で行い、個別に対応する部分は条件分岐などをしていくなどするとサイト全体の表示の管理を手軽に行うことができます。

表示するカテゴリーや表示件数を制御するquery_postsについて

ループで呼び出した記事に対して表示するカテゴリーを限定させたり、表示する件数を制御する記述として「query_posts」があります。

query_posts はループによって表示される投稿情報の条件を指定することができます。

サンプルのように特定のカテゴリーのみ表示したり投稿数や表示順なども変更できます。

尚、複数のループを扱う場合にその条件が次のループにも影響してしまう場合があるので、ループの終了時に「wp_reset_query()」タグを使い条件をリセットするようにしています。

ループ文の基本はこのように記述しました。

ループ文基本

ループ文基本

コピー用

<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
	<?php endwhile; ?>
<?php endif; ?>

こちらに「query_posts」を追加してカテゴリーの制御や投稿数の制御をおこなってみたいとおもいます。

表示するカテゴリーを制御する場合

NEWSの記事のみを表示させる場合の記述はこのようになります。

記事の出力のループの前に「query_posts( ‘category_name=カテゴリースラッグ’ );」と記述することで指定したカテゴリーのみ表示するようになります。

query_postsの記述

こちらをループ文に追加して記述してみるとこのようになります。

コピー用

query_posts( ‘category_name=カテゴリースラッグ’ );

カテゴリーのスラッグが「news」の記事のみを表示させる

カテゴリーのスラッグが「news」の記事のみを表示させる

コピー用

<?php query_posts( 'category_name=news' ); ?>
<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
	<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

この場合のスラッグ名「news」に該当するものとしては、その下の階層にある「info」と「seminer」になりますのでTOPページのNEWに両方のカテゴリーが表示されています。

カテゴリー作成時の親の設定をすることによって個別に設定しなくても上位のスラッグを参照することが可能です。

サンプルサイトのカテゴリー

サンプルサイトのカテゴリー作成の考え方についてはこちらをご覧ください。

参考:第4回目 はじめてWordPressを使用する際に行う設定をまとめる(カテゴリー・固定ページ編)

query_postsで表示件数を制御する

特定のカテゴリーを表示させる制御ができましたが、このままでは表示件数は「表示設定」で行った数値になってしまいます。

そこでquery_postsに表示件数を制御する文を追加したいと思います。

表示件数の制御

コピー用

posts_per_page=出力する記事数

トップページにNEWSや製品情報がそれぞれスペースによって表示件数が違っていましたが、「query_posts」を利用することで表示件数も変更することができます。

posts_per_page=出力する記事数」で出力を変更します。

また、パラメーターを複数指定する場合は「&」でつなげることができますので4件に設定する場合はこのようになります。

表示件数の制御

表示件数の制御

コピー用

<?php query_posts( 'category_name=news&posts_per_page=4 ); ?>
<?php if(have_posts()): ?>
	<?php while(have_posts()): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
	<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

このようにすることで「表示設定」で設定した投稿数以外にしたい場合に使用することができます。

特定のカテゴリーや表示数を設定したいという時に「query_posts」を設定したループ文を用意しておけばすぐに使用できるので便利です。

今回は以上になります。

次回も同じように簡単な分岐で異なるカテゴリーや固定ページ毎に決めた画像を自動的に表示させる条件分岐についてまとめていきたいと思います。

WordPressは一度用意した記述は何度も使えるので一番初めは少し難しいと思いますが、次からどんどん簡単にサイト全体が作れていきますのでオススメです。

また、今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。

どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。

http://www.html5-memo.com/other/wordpress-book/

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事