【WP】ループの使い方を初心者向けにわかりやすく解説

2021/2/2

2021/10/18

1085 views

ループの基本的な使い方

ワードプレスのテーマを自作する上では使いこなしが必須となる”ループ(関数)“。
今回は、ループについて初級者の方でも分かりやすいように解説をしていこうと思います。

覚えるループは3種類でOK!

ワードプレスのループは、いくつか記述方法があります。
しかし、覚えるべきループの種類は以下の3つでOKです!

1.「the_post()」(ざ ぽすと)

2.「WP_Query」(だびゅるぴー くえり)

3.「get_posts()」(げっと ぽすとす)

これだけ覚えておけばOKです。
「query_posts」というのもあるのですがこれは非推奨ということで省きます。
以下では順番に特性と使い方を解説していきます。

「the_post()」の特性と記述方法は?

the_post()の記述方法

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo get_the_date(); ?></p>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
<?php endif; ?>

もっとも見慣れている基本的なループコードです。
if分で格納されたページのデータ(クエリ)があるかどうかを判別し、あるならそれを取得してきます。

the_post()の要点

メインループを利用する

1ページ内に使うのは基本1回

表示中投稿のコンテンツを表示するときに使う

whileで回し、クエリのリセットは不要

詳しい解説

ワードプレスではインデックスページやアーカイブページなどのテンプレートでは読み込みの際にメインループと呼ばれる投稿のループデータを自動で取得しています。
このメインループのデータを使い表示させる方法になります。

主な使用箇所

「index.php」や「archive.php」、「category.php」などのアーカイブテンプレートで使います。
また、「single.php」など投稿ページでタイトルやコンテンツの表示にも用います。

「WP_Query」の特性と記述方法は?

WP_Queryの記述方法

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 20,
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo get_the_date(); ?></p>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>

the_post()となんとなく似ています。

WP_Queryの要点

サブループというものです

関連記事などのループはこれでもほぼOK

細かい条件指定やデータの抽出も可能

whileで回し、wp_reset_postdata()でリセットさせる

詳しい解説

ワードプレスがアーカイブテンプレートなどで自動でデータを取得するメインループとは違い、テンプレートに関係なく指定した条件でサブループと呼ばれる新たなループを生成するものになります。

主な使用箇所

記事下の関連記事の一覧や、サイドバーの人気記事の一覧などに使えます。

「get_posts()」の特性と記述方法は?

get_posts()の記述方法

<?php
$args = array (
    'post_type' => 'post',
    'posts_per_page' => 20,
);
$myposts = get_posts( $args );
?>
<?php foreach( $myposts as $post ): setup_postdata($post); ?>
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo get_the_date(); ?></p>
<div><?php the_content(); ?></div>
<?php endforeach ;?>
<?php wp_reset_postdata(); ?>

whileの代わりにforeachを使っているのが特徴です。

get_posts()の要点

サブループというものです

WP_Queryとほとんど同じ兄弟分

WP_Queryより簡易な内容のループに最適

・foreachで回し、wp_reset_postdata()でリセットする

詳しい解説

「WP_Query」と同じサブループを生成するものになります。
ただ、WP_Queryより細かいデータ取得条件の設定ができないものになり、タイトルの一覧だけを表示するようなシンプルなループに適しています。

主な使用箇所

フッターに表示させるお知らせの一覧など。

おまけ)「pre_get_posts」というアクションフックもある

ループの種類の解説は以上なのですが、「pre_get_posts(ぷれ げっと ぽすと)」というアクションフックの存在も覚えておくとさらに上級者へと近づきます。

アクションフックとは?

アクションフックとは、メインループのデータをデータベースに取りにいく段階であれこれ指示のするようなものです。

pre_get_postsって何してくれるの?

「pre_get_posts」は、メインループにアクションフックを付けられます。
つまり、上記で紹介した「the_post()」をカスタムできるものと思ってください。
サブループの「WP_Query」と「get_posts()」は関係ありません。

pre_get_postsはどんな時に使う?

では、「pre_get_posts」はどんなときに使うのでしょうか?
それは、メインループを箇所によって違う指示を与えたいときです。
使われるケースの事例などでいえば、「記事一覧は最大表示20件だけどカテゴリー一覧ページでは最大表示を10件にしたい」や、「検索結果ページで特定のカテゴリーの記事を除外したい」場合などです。

pre_get_postsの使い方と記述方法

重要なのが、pre_get_postsは「function.php」に記述するということです。
以下は、function.phpの記述例です。

/* メインクエリの書き換え(各ページのループ) */
function custom_query($query) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }
    //カテゴリーアーカイブページへのフック
    if ( $query->is_category()) {
        $query->set('posts_per_page', 10); // 最大表示を10件に
        $query->set('orderby', 'date'); // 日付で並び替える
    }
    // 検索結果ページへのフック
    if ( $query->is_search() ) {
        $query->set('cat', -5); // カテゴリーID5に属する記事を除外
    }
}
add_action('pre_get_posts', 'custom_query');

後は、category.phpなどのテンプレートファイルでthe_post()を実行したときに反映されます。

<?php if (have_posts()): ?>
<?php while (have_posts()) : the_post(); ?>
<p><?php echo get_the_title(); ?></p>
<p><?php echo get_the_date(); ?></p>
<?php endwhile; ?>
<?php endif; ?>

なぜpre_get_postsを使うのか?

function.phpをいじってまで、なぜわざわざpre_get_postsを使うのか?これを理解すれば頭が整理できると思います。
「the_post()」より詳細なループを生成したい場合など、サブループの「WP_Query」を使うことでも実現ができます。
しかし、アーカイブのテンプレートファイルを読み込む際には、ワードプレスが自動でメインループのデータ(クエリ)を1回読み込んできます
なので、これらのページでサブループを使うとわざわざ取ってきたデータを無駄にして、さらにもう一回データベースを読み込む作業をさせることになります。
このことはサーバーへ負荷をかけるだけでなく、サイト表示も遅延させます
それらを避け、メインループを使うことを前提で各ページに詳細な指示を実現させるのが「pre_get_posts」を使う理由になります。

まとめ

以上、ループの種類や特性、記述方法のざっくりした解説でした。
もしかしたら間違っていることもありますので、何かお気づきのことがあればお気軽にコメントください。
またご質問などもお気軽にコメントください。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



このサイトの表示速度はどうですか?

当サイトはレンタルサーバーにConoHa WING(コノハウイング)を使っていますよ。

ページの先頭に戻る