特定カテゴリの表示や表示件数を制御するquery_postsの使い方 | デザインってオモシロイ -MdN Design Interactive-

特定カテゴリの表示や表示件数を制御するquery_postsの使い方

2020.8.8 SAT

第13回 特定カテゴリの表示や表示件数を制御するquery_postsの使い方

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

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

解説:(有)ムーニーワークス ハヤシユタカ

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

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

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

各ページで表示される記事数を設定できる (▲クリックして拡大)

ループ文の設定については以前の記事でまとめてあります。
※参考:第10回目 WordPressで投稿した記事の内容をループ文を使用して表示させる

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

ページによっては10件以上表示させたい場合や、件数を減らしたい場合などもでてきます。また、今回の参考サイトでは「ニュース」と「製品情報」を投稿で管理しているため、両方の記事が最新順に表示されてしまいます。実際使用する際はTOPページなどはニュースを表示するエリアと製品情報を表示するエリアに分けましょう。

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

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

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

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

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

TOPページではNEWSの領域にスラッグ名「info」と「seminer」の中から最新から5件表示し、PRODUCTSの領域にはスラッグ名「products」の最新4件を表示させています。
それぞれのカテゴリを個別に表示 (▲クリックして拡大)

それぞれのカテゴリを個別に表示 (▲クリックして拡大)

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

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

「表示設定」で設定した20件を表示 (▲クリックして拡大)

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

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

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

query_posts はループによって表示される投稿情報の条件を指定することができます。サンプルのように特定のカテゴリのみ表示したり投稿数や表示順などの変更も可能です。なお、複数のループを扱う場合にその条件が次のループにも影響してしまう場合があるので、ループの終了時に「wp_reset_query()」タグを使い条件をリセットするようにしています。

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

ループ文基本

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

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

NEWSの記事のみを表示させる場合の記述は下記のようになります。記事の出力のループの前に「query_posts( 'category_name=カテゴリースラッグ' );」と記述することで指定したカテゴリのみ表示するようになります。
こちらをループ文に追加して記述してみると、このようになります。
カテゴリのスラッグが「news」の記事のみを表示させる

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

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

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

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

サンプルサイトのカテゴリ作成の考え方についてはこちらをご覧ください。
※参考:第4回目 WordPressでサイト構築前に行う設定をまとめる(カテゴリ・固定ページ編)

query_postsで表示件数を制御する

特定のカテゴリを表示させる制御ができましたが、このままでは表示件数は「表示設定」で行った数値になってしまいます。そこでquery_postsに表示件数を制御する文を追加したいと思います。
トップページにNEWSや製品情報がそれぞれスペースによって表示件数が違っていましたが、「query_posts」を利用することで表示件数も変更することができます。

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

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

表示件数の制御

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

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

今回は以上になります。




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

WordPressは一度用意した記述は何度も使えるので最初は少し難しいと思いますが、そこを乗り越えれば簡単にサイトが作れていきますのでオススメです。

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

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

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



本連載で使用しているサンプルサイトをゼロから作成できる書籍

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス(http://www.moonyworks.com/)を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile:http://jquerymobile-memo.co/

【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

7.27-8.2

MdN BOOKS|デザインの本

Pick upコンテンツ

現在