【WordPress実践編】メインクエリとサブクエリについて解説!

メインクエリとサブクエリとは?

※このブログはアフィリエイト広告を利用しています

こんにちはー!キャメルコードブログのしゅんです^^

今回はWordPressのメインクエリサブクエリについて解説をしていきます!

そもそもクエリってなに…?

という方も心配いりません。初心者の方でも理解できるように、基本から丁寧に解説するのでご安心ください^^

WordPressのテーマ開発をしていく上で欠かせない内容なので、ぜひ最後まで読んで理解してもらえたらと思います!

この記事でできるようになること
  • メインクエリについて理解できる
  • サブクエリについて理解できる
  • メインクエリとサブクエリの違いを理解して使えるようになる
目次

クエリとは?

クエリ(query) を直訳すると「問い合わせ」です。

主にIT分野で使われる用語ですが、「データベースに対してどんな条件で情報を取ってくるか」を指定する仕組みのことです。

WordPressでは「どの投稿を取得するか」を決める仕組みと理解してください。

メインクエリとは?

WordPressがそのページに表示するべき情報をURLに基づいて自動で取得する仕組みメインクエリと呼びます。

前回の記事で解説したループ、実は以下のコードはメインクエリで取得したデータを処理するための基本構文で、メインループと呼んだりします。

-- PHP --

<?php if (have_posts()): ?> //もし投稿があれば
  <?php while (have_posts()): the_post(); ?> //投稿がある間、その投稿を繰り返しセットします
    ------------------------------------
        この間に必要なコードを書いていく
    ------------------------------------
  <?php endwhile; ?>
<?php endif; ?>

下図のようなイメージを持っておきましょう。

メインクエリのイメージ図

今はよく分からないかもしれませんが、一旦このことを頭に入れて読み進めてください。

ループ処理について忘れてしまった方はこちらの記事で復習してくださいね^^

メインクエリ:URLに基づいてWordPressが自動で取得する

表示設定とメインクエリの関係を理解しよう

実際に作りながら解説をしていきます!

最新の投稿のパターン

前回のループの記事の復習にもなります^^

サイドバーの「設定>表示設定」を開いて、「ホームページの表示」の最新の投稿にチェックを入れます。

この状態で「front-page.php」に以下のようにメインループの処理を書きます。

-- front-page.php --

 <?php if(have_posts()): ?>
   <?php while(have_posts()): the_post(); ?>
     <h2><?php the_title(); ?></h2>
     <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
  <?php endwhile; ?>
<?php endif; ?>

そうすると投稿記事の一覧が表示されましたね。

つまり、「最新の投稿」にチェックをした場合、トップページ(front-page.php)のメインクエリはデフォルトの投稿一覧を取得するということになります。

固定ページのパターン

次に、固定ページを選択するパターンも見てみましょう。

まずは「トップ」と「お知らせ一覧」という固定ページを作ります。

「トップ」には以下のように内容を入力しておきましょう。

お知らせ一覧のスラッグは「news」としておきましょう。

ページを作ったらサイドバーの「設定>表示設定」を開いて、「ホームページの表示」の固定ページにチェックを入れます。

そして先程作ったトップお知らせ一覧を選択します。

この設定により、トップページ(front-page.php)のメインクエリは、固定ページ「トップ」の内容を取得するようになります。

では、この状態で「front-page.php」にメインループを書くとどうなるでしょうか?

-- front-page.php --

 <?php if(have_posts()): ?>
   <?php while(have_posts()): the_post(); ?>
     <h2><?php the_title(); ?></h2>
     <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
  <?php endwhile; ?>
<?php endif; ?>

先程「最新の投稿」にチェックをした場合には、記事の一覧が取得されましたが、今回はこうなります。

「トップ」の内容が取得されましたね^^

じゃあ、投稿一覧はどうやって取得するの?

それが以下の赤枠部分です。

「投稿ページ」で選択したページ(今回は「お知らせ一覧」ページ)のメインクエリとして投稿一覧を取得します。

この「投稿ページ:お知らせ一覧」を表示するためのテンプレートがhome.phpです。

home.phpにメインループを書いてみましょう。

-- home.php --

 <?php if(have_posts()): ?>
   <?php while(have_posts()): the_post(); ?>
     <h2><?php the_title(); ?></h2>
     <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
  <?php endwhile; ?>
<?php endif; ?>

そしてこの状態で、「お知らせ一覧」ページにアクセスします。お知らせ一覧のスラッグはnewsで指定したので、URLは「https://~~~/news」ですね。

表示を確認すると、

記事一覧が取得できてますね。

最初は頭が混乱するかと思いますが、何度も読み返して理解を深めてください^^

サブクエリとは

メインクエリはURLに基づいて自動でデータベースから情報を取得する仕組みのことでしたね。

それに対して、サブクエリ任意の条件で情報を取得することができます。

以下の条件のまま、front-page.phpで投稿一覧を取得してみましょう。

サブクエリのループ処理は以下のように書きます。サブループと呼んだりします。

-- front-page.php --

<?php 
  $args = [
    'post_type' => 'post',
    'post_per_page' => 3
  ];
  $the_query = new WP_Query($args);
?>
<?php if($the_query -> have_posts()): ?>
  <?php while($the_query -> have_posts()): $the_query -> the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

コードを一つ一つ解説していきます。

新たなオブジェクトを生成

以下のコードで新たなオブジェクトを生成します。生成したオブジェクトを$the_queryという変数に代入してます。

-- front-page.php --

  $the_query = new WP_Query($args);
?>

$the_queryと$argsは任意の名前でOK

取得するデータの条件を指定

生成したオブジェクトの条件を指定します。

-- front-page.php --

<?php 
  $args = [
    'post_type' => 'post',
    'post_per_page' => 3
  ];
  $the_query = new WP_Query($args);
?>
  • ‘post_type’ => ‘post’ → デフォルトの投稿を取得
  • ‘posts_per_page’ => 3 → 最新の投稿3件取得

新たに生成したオブジェクトをループで回す

-- front-page.php --

<?php if($the_query -> have_posts()): ?>
  <?php while($the_query -> have_posts()): $the_query -> the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <a href="<?php the_permalink(); ?>"><?php the_content(); ?></a>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

メインループとの違いとして、$the_queryが追加されているのが分かるかと思います。

「$the_queryのデータを使ってループを回すよ!」という意味ですね^^

-- front-page.php --

  <?php wp_reset_postdata(); ?>
<?php endif; ?>

サブクエリを実行後は必ずリセットします。これを書かないと、その後のメインループやテンプレートタグに影響する可能性があります。

  • wp_reset_postdata()でリセットする
  • WP_Query()とwp_reset_postdata()はセットで使う

さて、これでトップページを見てみましょう!

記事の一覧が取得できていますね^^

サブクエリ:任意の条件で取得する

まとめ: メインクエリとサブクエリを理解して自由にデータを取得できるようになろう

今回の記事では、WordPressのメインクエリとサブクエリについて解説しました。

メインクエリとサブクエリを使って様々な条件で自由に情報を取得して表示させることが可能です。

  • メインクエリ:URLに基づいてWordPressが自動で取得する
  • サブクエリ:任意の条件で取得する
-- メインループの基礎構文 --

 <?php if(have_posts()): ?>
   <?php while(have_posts()): the_post(); ?>
     
   <?php endwhile; ?>
<?php endif; ?>
-- サブループの基礎構文 --

<?php 
  $args = [
    'post_type' => 'post',
    'post_per_page' => 3
  ];
  $the_query = new WP_Query($args);
?>
<?php if($the_query -> have_posts()): ?>
  <?php while($the_query -> have_posts()): $the_query -> the_post(); ?>
  
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>
<?php endif; ?>

オリジナルテーマ開発で必ず役に立つ基礎なので、まずは今回の記事を参考に実践してみてください。

それではまた次の記事でお会いしましょう^^

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次