投稿日:2022/06/20 最終更新日:2022/06/26
メインループとサブループの違いと使い方を超簡単に解説
WordPressではメインループのサブループの違い、使う場面、処理内容を理解することで色々な投稿機能を持つWEBサイトを作ることが出来ます。
今回はメインループとサブループの違いを中心に読めばすぐに活用できる解説をしていきます。
メインループとは？
WordPressはデフォルトの状態でループ処理を簡単に機能させることが出来ます。
それをメインループといいます。
例えば、トップページを作るためのfront-page.phpやhome.phpでメインループを使用することで投稿ページの内容を一覧で表示することが出来ます。
一覧で表示するというのは、ブログ記事であれば様々なことについての内容を1つ1つ記事になっていることが多いです。それを、読者が選ぶことが出来るようにタイトルとサムネイルが表示された状態で一覧になっているとわかりやすいですよね。
それで、「お、これおもろしそう！」となったときにタイトルをクリックすると記事を読むページに移動することが出来る流れです。
もし、これをHTMLだけでやるとすると、一覧表を1つ1つコーディングで追加していかなければいけません。
面倒くさいですし、エディターを使える人でないと記事が作れない状態になります。
でも、WordPress、引いていえばPHPであればメインループさえ作っておくことで、あとはWordPress管理画面の「投稿」から記事を作るだけで一覧に追加することが出来るわけです。
これの何より良い点はメインループを作ることで素人でもブログ記事を運用することが出来るようになるということ。
この使い勝手の良さがWordPressの人気なんですね。
PHPの良い所でもあるCGI言語の強みを使って動的(1つ1つコードで追加しない)な処理を作ることが出来ます。
先ほどのように基本的にはメインループはこの「投稿」に書かれた記事をループで表示させるためにある機能になります。
サブループとは？
では、サブループって何？ってなりますよね。
「サブ？サブってことはメインループの中に書くの？」と思うかもしれません。
すごく簡単にいうと、「「投稿」以外のループも作りたいんだ！」って時に使います。
つまり、先ほども登場したfront-page.phpなどのトップページを表示するためのファイルではメインループを作ることで、「投稿」に作った記事をリスト表示することが出来ると言いました。
しかし、「トップページにカテゴリーも一覧にしたいな・・・」とか「タグを一覧にしたいな・・」ってこともあるわけです。
でも、メインループだと「投稿」の記事しか表示できないじゃない・・となる。
そんな時に使うのがサブループなわけです。
これも特に難しくなくて、メインループを少々改造して設定を追加することで「カテゴリーをループさせてね！」とか「タグのループでヨロシク！」と指令をすることが出来ます。
後々、サブループのスニペットを紹介しますが、サブループの書き方を覚えることで色んなページで独自のループを設定し、一覧を表示させることが出来るようになります。
ちなみに、WEB制作をする際には絶対に覚えておかなければいけない内容なので、抑えておきましょう。
【書き方】メインループ
メインループの書き方はとっても簡単です。
<?php if( have_posts() ): ?>
<?php while( have_posts() ) : the_post() ?>
// ループさせる内容
<?php endwhile; ?>
<?php endif; ?>上記のコードを追加するだけです。
メインループの解説
少し解説を入れますね。
<?php if( have_posts() ): ?>
<?php while( have_posts() ) : the_post() ?>まずはこのコードは何を意味しているのか解説していきます。
<?php if( have_posts() ): ?>
↑ もし、投稿された記事があるならば・・<?php if( have_posts() ): ?>
<?php while( have_posts() ) : the_post() ?>
↑ とりあえず全てぐるっと探して ↑ 発見したら表示するよという感じです。
意味が分かれば簡単ですね。
で、「// ループさせる内容」のところにはなにを入れればいいの？ですが、
これは作る場面で違ってきます。
例えば、以下のようなブログサイトを作っているとします。
このような形で記事一覧を作成する場合に、「// ループさせる内容」に入れる要素は、
赤枠になっている箇所です。
つまり、「記事」となっている箇所は他のも合わせて8つあります。
これってループさせれば8つも作らんでもええやん!?となりませんか？
そう、「// ループさせる内容」というのは、ここは同じ形のものがいっぱい出来るからループの内容だ！ととらえてくれればOKです。
【書き方】サブループ
サブループはメインループをちょっと改造した書き方と思って下さい。
<?php
$args = array(
'post_type' => 'ポストタイプ',
'posts_per_page' => 表示数,
'orderby' => 'date', // 作成日で並べる
'order' => 'DESC' // 降順で
// 他にもある
);
$the_query = new WP_Query($args);
if ( $the_query -> have_posts() ) : ?>
<?php while ( $the_query -> have_posts() ) : $the_query -> the_post(); ?>
// ループさせる内容
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>サブループの解説
ちょっと見た目はややこしいですが、意味が分かると簡単です。
まずは最初の部分から、、、
<?php
$args = array(
'post_type' => 'ポストタイプ',
'posts_per_page' => 表示数,
'orderby' => 'date', // 作成日で並べる
'order' => 'DESC' // 降順で
// 他にもある
);
↑ $argsは設定の内容をまとめたもの
$the_query = new WP_Query($args);
↑ $argをループさせるためのWP_Query関数で出力して変数の$the_queryに保存する$argsは変数なので名前はなんでもいいです。$aaaでも$bbbでも。
ただ、$argsは「arguments=引数」のように意味があるので、意味のある変数名として使うことが多いです。
で、array()の中に書かれているのが設定項目です。
「投稿ページじゃなくて何をループさせるのか＝’post_type’」とか「表示数はどれくらいにするか＝’post_per_page’」など他にもたくさんの項目から設定を選ぶことが出来ます。
設定した項目は配列のarray()でひとくくりにして、WP_Query関数の引数に加えます。
WP_Query関数は「選んでくれた設定でループさせるね～」といい感じにしてくれる関数だと思ってください。
それを、変数の$the_queryに格納しています。
もちろん、$the_queryも変数名は何でもいいです。
if ( $the_query -> have_posts() ) : ?>
↑ もし、$the_queryで設定された投稿記事があるならば・・
<?php while ( $the_query -> have_posts() ) : $the_query -> the_post(); ?>
↑ とりあえず$the_queryの記事を全てぐるっと探して ↑ $the_queryの記事を発見したら表示するよこれは先ほどのメインループにそれぞれ$the_query変数が追加されているだけですね。
つまり、そのままだとメインループになってしまうけれどもWP_Query関数を格納した$the_queryを追加することで設定した内容を元にループをしてくれます。
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
↑ サブループはここでおわりだよ！最後にendwhileとendifでループは完了と、、、ってあれ？
なんかありますね、、、
これは、「サブループはここで終わりだよ！」という意味のWordPress関数です。
サブループはWordPressデフォルトの設定で作られたループではありません。
サブループを作った人の設定で出来たループです。
なので、サブループはどこで終わりなのか教えてあげないと、ずっっとその設定をWordPressは頭に入れた状態になってしまいます。
もし、Aサブループの次に別のBサブループを作ったとすると、wp_reset_postdata();を入れてあげなければ「まだAは終わってなかったよね！Aの記事を一覧にするね！えへ」と勘違いをするバグを起こす可能性があります。
そのために、サブループの最後にはwp_reset_postdata();を追加してサブループの終わりを教えてあげましょう。
まとめ
メインループとサブループの違いはわかったでしょうか？
この意味と使い方がしっかり理解出来ていると誰でもブログサイトを自分で作ることが出来るようになります。
ぜひ、この記事を繰り返し読んでみて理解出来たら使ってみてくださいね！
