初心者必見！WordPressループの使い方とその手順+サンプルコード

みなさんこんにちは！エンジニアの高沢です！
今回は、WordPressの心臓部と言っても過言ではない「WordPressループ」の解説したいと思います。
WordPressループという概念は、WordPressのテーマ作成・カスタマイズの際にかなりの確率で使われる技術なので、本記事をご参考にぜひ実践的なスキルを身につけてください。

1 WordPressループとは
2 WordPressループの使いどころ
3 WordPressループの種類
- 3.1 メインループとは
4 WordPressループを使ってindex.phpに記事一覧を表示させてみよう
5 サブループで特定のカテゴリーに絞って関連記事一覧を表示させる方法
- 5.1 index.phpを作成する
6 ループで出力する検索条件を絞り込む方法
- 6.1 「functions.phpでアクションフックする」とは
- 6.2 パラメータとは
7 固定ページの本文を表示させる方法
- 7.1 page.phpを作成する
8 get_posts()を使ったサブループについて
- 8.1 get_posts()のサブループはwhile文のサブループと同じ
9 まとめ

WordPressループとは

WordPressループとは、PHPのwhile文などのループで記事情報(厳密には管理画面で入力した内容)を表示させるプログラムのことです。使いどころとしては、よくブログサイトに見られる最新記事一覧などが一番イメージしやすいのではないかと思います。

WordPressループの使いどころ

そもそもWordPressループとはどういった時に使われるのかがイメージできなければわかりづらいと思います。筆者も初めてこの用語を聞いた時は何がなんだかわかりませんでした。
WordPressループとは先述した通り、PHPのwhile文などのループで記事情報を表示させるプログラムのことです。
ではなぜループなのかというと、どのプログラミング言語においても、データベースからデータを取り出す時はループ（while文、for文、foreach文など）を使います。WordPressループでは主にwhile文やforeach文を使います。

ここでデータベースが出てきた理由は、WordPressループで出力する記事データはデータベースに格納されているためです。 基本的に「データ」はデータベースに格納されて保存されているものと思ってください。
このWordPressループがよく使われる場面としては下記があります。

新着記事の一覧
記事ページ・固定ページの本文表示
関連記事の一覧
特定の時間内に投稿された記事の一覧（Date_query）
任意で選択した記事の一覧(Meta_query)

など、実に多くの場面で使われます。よって、使い方次第でより高度な実装が可能となり、実装のバリエーションは何通りもあるわけです。ぜひWordPressループを習得して、自由にテーマを作成しましょう！

WordPressループの種類

WordPressループの種類は大きく２つあります。１つはメインループ、もう１つはサブループといいます。まずは基本中の基本であるメインループについて解説します。

メインループとは

メインループはURLを下にページに必要なデータベースにあるデータを判別して表示させるループのことです。主にindex.phpやcategory.php、single.phpなど全てのテンプレートで使います。

メインループの基本的な書き方

<?php
if(have_posts()):
   while(have_posts()):the_post();
?>
   <!-- ↓↓↓↓↓↓↓↓↓↓　ループ内容　↓↓↓↓↓↓↓↓↓↓ -->
<?php
   endwhile;
endif;
?>

<?php

if(have_posts()):

while(have_posts()):the_post();

<?php

endwhile;

endif;

上記のコードがメインループの書き方になります。構造としては一番シンプルです。 if文ではまずhave_posts()関数でループさせるデータがあるかどうかを判別し、あればループさせてデータを表示させます。ちなみに、メインループはサイト１ページにつき１つまでしか使えませんのでご注意ください。

サブループとは

サブループとは、メインループではない方のWordPressループです。先述しましたが、メインループはサイト１ページにつき１つまでしか使えないので、２つ以上使う場合は必ずサブループを使います。使いどころは大変多く、例えばサイドバーに関連記事の一覧や新着記事の一覧を表示させる場合などに使用します。下記がお手本のコードになります。

<?php
// パラメータの設定
$args = array(
　　'posts_per_page' => 5,
   'post_status' => 'publish',
   'post_type' => 'post',
   'orderby' => 'date',
);
// WP_Queryインスタンスの生成
$my_query = new WP_Query($args);
if($my_query->have_posts()):
   while($my_query->have_posts()):$my_query->the_post();
?>
   <!-- ↓↓↓↓↓↓↓↓↓↓　ループ内容　↓↓↓↓↓↓↓↓↓↓ -->
<?php
   endwhile;
endif;
wp_reset_postdata();
?>

<?php

// パラメータの設定

$args = array(

　　'posts_per_page' => 5,

'post_status' => 'publish',

'post_type' => 'post',

'orderby' => 'date',

);

// WP_Queryインスタンスの生成

$my_query = new WP_Query($args);

if($my_query->have_posts()):

while($my_query->have_posts()):$my_query->the_post();

<?php

endwhile;

endif;

wp_reset_postdata();

上記の記述がサブループの構文になります。
while文の前にパラメータを設定しています。パラメータとは、簡単にいうとループさせて出力する投稿データの種類の条件を絞るためのプログラムです。

パラメータとは

パラメータとは、サブループを自在に制御するためのプログラムのことです。自在に制御するとは、サブループでデータを出力する際にどう言う条件で絞り込んで出力するかを決めると言うことです。
プログラムは連想配列なので、「キー」と「値」で構成されています。
パラメータに関してはとても奥が深く、ご紹介する情報量がとても多いため、後ほど後述してご紹介させていただきます。

get_posts()のサブループ

ここまで解説した2つのWordPressループいずれもwhile文を使ったループでした。 get_posts()でのサブループは、foreach文を使います。

<?php
$args = array(
   'posts_per_page' => 5,
   'post_status' => 'publish',
   'post_type' => 'post',
   'orderby' => 'date',
);
$posts = get_posts($args);
foreach($posts as $post):
   setup_postdata($post);
?>
   <!-- ↓↓↓↓↓↓↓↓↓↓　ループ内容　↓↓↓↓↓↓↓↓↓↓ -->
<?php
endforeach;
wp_reset_postdata();
?>

<?php

$args = array(

'posts_per_page' => 5,

'post_status' => 'publish',

'post_type' => 'post',

'orderby' => 'date',

);

$posts = get_posts($args);

foreach($posts as $post):

setup_postdata($post);

<?php

endforeach;

wp_reset_postdata();

上記の記述がget_posts()を使ったサブループの構文になります。先ほどのサブループの記述と似ており、同じくパラメータを指定して条件を絞ってループします。

WordPressループを使ってindex.phpに記事一覧を表示させてみよう

index.phpを作成する

ここからは実際にWordPressループを使ってindex.phpのトップページに記事一覧を表示させてみましょう！
WordPressループを表示させるために最低限下記の２つが必要になります。

・index.php ・表示させる材料（記事情報）

まず、記事一覧を表示させるための材料が必要です。材料としては、記事のアイキャッチ画像、タイトル、抜粋文、公開日時、カテゴリー、タグ、の６つが必要です。
事前に投稿記事を10記事分ダミーで用意しておきましょう。（つまり、10記事分投稿し公開しておきましょう）次にindex.phpを作成し、テンプレートの中の記事一覧を表示させたい箇所に下記のプログラムを記述します。
また、サンプルコードを実装するにあたってサンプル画像をご用意いたしましたのでよろしければご活用ください。

サンプルコードではsrc="/image/sample-list-img-noimage.png"の中の/image/の中に画像が存在する前提で解説するので、imageフォルダを作成しその中に画像を入れていただければと思います。

<div class="list-box">
 <ul>
     <?php
     if(have_posts()):
         while(have_posts()):the_post();
     ?>
         <li>
             <a href="<?php the_permalink(); ?>">
                 <div class="list-box-left">
                     <?php
                     if(has_post_thumbnail()):
                         the_post_thumbnail();
                     else:
                     ?>
                         <img src="<?php echo get_template_directory_uri(); ?>/image/sample-list-img-noimage.png" alt="">
                     <?php
                     endif;
                     ?>
                 </div>
                 <div class="list-box-right">
                     <h2><?php the_title(); ?></h2>
                     <p class="list-box-right-text">
                         <?php echo wp_html_excerpt(get_the_excerpt(),58,'...'); ?>
                     </p>
                     <div class="list-box-meta">
                         <span class="list-box-date"><?php the_time(get_option('date_format')); ?></span>
                         <span class="list-box-cat">
                             <?php
                             $terms = get_the_terms($post->ID,'category');
                             if(is_array($terms)):
                                 foreach($terms as $term):
                                     echo $term->name;
                                 endforeach;
                             endif;
                             ?>
                         </span>
                         <span class="list-box-tag">
                             <?php
                             $terms_tag = get_the_terms($post->ID,'post_tag');
                             if(is_array($terms_tag)):
                                 foreach($terms_tag as $term_tag):
                                     echo $term_tag->name;
                                 endforeach;
                             endif;
                             ?>
                         </span>
                     </div>
                 </div>
             </a>
         </li>
     <?php
         endwhile;
     else:
     ?>
         <p>現在準備中です。</p>
     <?php
     endif;
     ?>
 </ul>
</div>

<ul>

<?php

if(have_posts()):

while(have_posts()):the_post();

<li>

<?php

if(has_post_thumbnail()):

the_post_thumbnail();

else:

<img src="<?php echo get_template_directory_uri(); ?>/image/sample-list-img-noimage.png" alt="">

<?php

endif;

</div>

<?php echo wp_html_excerpt(get_the_excerpt(),58,'...'); ?>

</p>

<?php

$terms = get_the_terms($post->ID,'category');

if(is_array($terms)):

foreach($terms as $term):

echo $term->name;

endforeach;

endif;

</span>

<?php

$terms_tag = get_the_terms($post->ID,'post_tag');

if(is_array($terms_tag)):

foreach($terms_tag as $term_tag):

echo $term_tag->name;

endforeach;

endif;

</span>

</div>

</a>

</li>

<?php

endwhile;

else:

<p>現在準備中です。</p>

<?php

endif;

</ul>

</div>

記述した部分に下記のに10記事分のアイキャッチ画像、タイトル、抜粋、公開時刻、カテゴリー、タグがそれぞれ表示されているのがわかります。記事の数だけ投稿データの要素を出力し、それぞれの内容を出力するためにテンプレートタグを記述しています。

【今回使用したテンプレートタグ一覧】 the_permalink() … 投稿記事のページリンクを出力 has_post_thumbnail() … 投稿記事にサムネイル画像が設定されているかどうかを判定（条件分岐） the_post_thumbnail() … 投稿記事のサムネイル画像を表示 get_template_directory_uri() … 今作成しているテーマのディレクトリURLを取得する（親テーマで使用可能） the_title() … 投稿記事のタイトルを表示 the_excerpt() … 投稿記事の抜粋文を表示

ループの内容として「the_…」のように冒頭にtheがつくテンプレートタグ（WordPress専用の関数）は基本的にループ内で使うためのテンプレートタグだと思っていただいていいと思います。

CSSでレイアウトを整える

下記のCSSをindex.phpの適当な箇所（もしくはstyle.cssなど個別のCSSファイルを用意してもいいです。）に記述してください。

<style>
.list-box ul li{
   margin-bottom:15px;
}
.list-box ul li a{
   display:flex;
   padding:20px;
   background:#fff;
   box-shadow:0 2px 3px #999;
   border-radius:3px;
}
.list-box-left{
   width:200px;
}
.list-box-right{
   width:400px;
   padding-left:20px;
}
.list-box-right h2{
   margin-top:15px;
   margin-bottom:15px;
   font-size:24px;
   color:#69a4db;
   font-weight:bold;
   line-height:2;
}
.list-box-right-text{
   margin-bottom:20px;
   line-height:1.6;
   color:#333;
}
.list-box-meta{
   font-size:14px;
}
.list-box-date{
   margin-right:20px;
   color:#333;
}
.list-box-cat{
   margin-right:20px;
   color:#69a4db;
}
.list-box-tag{
   color:#69a4db;
}
</style>

<style>

.list-box ul li{

margin-bottom:15px;

}

.list-box ul li a{

display:flex;

padding:20px;

background:#fff;

box-shadow:0 2px 3px #999;

border-radius:3px;

}

.list-box-left{

width:200px;

}

.list-box-right{

width:400px;

padding-left:20px;

}

.list-box-right h2{

margin-top:15px;

margin-bottom:15px;

font-size:24px;

color:#69a4db;

font-weight:bold;

line-height:2;

}

.list-box-right-text{

margin-bottom:20px;

line-height:1.6;

color:#333;

}

.list-box-meta{

font-size:14px;

}

.list-box-date{

margin-right:20px;

color:#333;

}

.list-box-cat{

margin-right:20px;

color:#69a4db;

}

.list-box-tag{

color:#69a4db;

}

</style>

上記のCSSできれいなレイアウトが実装できたかと思います。ここまでで無事WordPressループの基本中の基本であるindex.phpで記事一覧を表示させることができました！

メインループの表示件数を変える

メインループの表示件数は管理画面のメニューから「設定」→「表示設定」→「1ページに表示する最大投稿数」を変えることができます。最初は10件で設定してあるので、数値を変えたらその数値分表示されます。

ページネーションを表示させる

表示件数が10件だとしたら最新の10件しか表示されません。
ユーザー目線で考えたら10件だけでなく全件記事を見れた方が使い勝手がいいはずですが、全件表示したとして仮に100件あったとしたらページの長さがとんでもないことになってしまいます。
そこで、ページネーションを設置して最初の10件だけ表示させてあとの90件は別ページで用意してあげた方がページの長さがすっきりしてサイトを閲覧しやすくなります。ここではページネーションを作成する方法をご説明いたします。

次にCSSでレイアウトを整えます。

<style>
.pagination{
   margin:40px 0 0;
}
.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:20px;
   padding:20px 25px;
   color:#333;
   border-radius:3px;
   box-shadow:0 3px 3px #999;
   background:#fff;
}
.pagination .current{
   padding:20px 25px;
   background:#69a4db;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#69a4db;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}
</style>

<style>

.pagination{

margin:40px 0 0;

}

.nav-links{

display:flex;

}

.pagination .page-numbers{

display:inline-block;

margin-right:20px;

padding:20px 25px;

color:#333;

border-radius:3px;

box-shadow:0 3px 3px #999;

background:#fff;

}

.pagination .current{

padding:20px 25px;

background:#69a4db;

color:#fff;

}

.pagination .prev,

.pagination .next{

background:transparent;

box-shadow:none;

color:#69a4db;

}

.pagination .dots{

background:transparent;

box-shadow:none;

}

</style>

これでページネーションを無事設置できたかと思います。

サブループで特定のカテゴリーに絞って関連記事一覧を表示させる方法

index.phpを作成する

特定のカテゴリーに絞ってループを表示させるために最低限下記の３つが必要になります。

・index.php ・表示させる材料（記事情報）・パラメータ

メインループと違う点はパラメータを使うか使わないかのところです。サブループではパラメータで条件を絞って一覧を表示させることができます。表示させる材料に関してはメインループの時と同じです。
ここではパラメータを利用して、特定のカテゴリーに絞ってループさせる方法を紹介いたします。
サブループはメインループと違い１つのページにいくつでも作成することができるので、パラメータをうまく使って今回ご紹介するカテゴリーベースの関連記事一覧や、特定の期間中に投稿された記事のみを一覧で表示させるなど、多くのバリエーションでループさせることができます。
下記がサンプルコードになります。index.phpのメインループのページネーションの下に記述してください。

<div class="related">
 <h2 class="related--title">関連記事一覧<h2>
 <ul class="related-post">
 <?php
 if(has_category()):
     $categories = get_the_category();
     $categories_keywords = array();
     foreach($categories as $category):
         $categories_keywords[] = $category->term_id;
     endforeach;
 endif;
 $args = array(
     'post_type' => 'post',
     'post__not_in' => array($post->ID),
     'category__in' => $categories_keywords,
     'posts_per_page' => '5',
 );
 $cat_query = new WP_Query($args);
 if($cat_query->have_posts()):
     while($cat_query->have_posts()):$cat_query->the_post();
 ?>
   <li class="related-post__items">
     <a href="<?php the_permalink() ?>" class="related-post__items--link">
       <div class="related-post__items--left">
         <?php
         if(has_post_thumbnail()):
           the_post_thumbnail();
         else:
         ?>
           <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png">
         <?php
         endif;
         ?>
       </div>
       <div class="related-post__items--right">
         <h2 class="related-post__items--title"><?php the_title(); ?></h2>
         <p class="related-post__items--description"><?php echo wp_html_excerpt(get_the_excerpt(),100,'...'); ?></p>
       </div>
     </a>
   </li>
 <?php
     endwhile;
 endif;
 wp_reset_postdata();
 ?>
 </ul>
</div>

<h2 class="related--title">関連記事一覧<h2>

<?php

if(has_category()):

$categories = get_the_category();

$categories_keywords = array();

foreach($categories as $category):

$categories_keywords[] = $category->term_id;

endforeach;

endif;

$args = array(

'post_type' => 'post',

'post__not_in' => array($post->ID),

'category__in' => $categories_keywords,

'posts_per_page' => '5',

);

$cat_query = new WP_Query($args);

if($cat_query->have_posts()):

while($cat_query->have_posts()):$cat_query->the_post();

<a href="<?php the_permalink() ?>" class="related-post__items--link">

<?php

if(has_post_thumbnail()):

the_post_thumbnail();

else:

<img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png">

<?php

endif;

</div>

</div>

</a>

</li>

<?php

endwhile;

endif;

wp_reset_postdata();

</ul>

</div>

次にCSSのレイアウトを整えます。

.related{
 margin:26px 0;
}
.related--title{
 font-size: 18px;
 margin-top: 50px;
 margin-bottom: 20px;
}
.related-post{
 
}
.related-post__items{
 margin-bottom:20px;
}
.related-post__items--link{
 display:flex;
}
.related-post__items--left{
 width:80px;
}
.related-post__items--right{
 width:600px;
 padding-top:4px;
 padding-left:10px;
}
.related-post__items--title{
 color: #333;
 margin-bottom: 10px;
}
.related-post__items--description{
 font-size: 14px;
 color: #777;
 line-height:1.2;
}
</style>

.related{

margin:26px 0;

}

.related--title{

font-size: 18px;

margin-top: 50px;

margin-bottom: 20px;

}

.related-post{

}

.related-post__items{

margin-bottom:20px;

}

.related-post__items--link{

display:flex;

}

.related-post__items--left{

width:80px;

}

.related-post__items--right{

width:600px;

padding-top:4px;

padding-left:10px;

}

.related-post__items--title{

color: #333;

margin-bottom: 10px;

}

.related-post__items--description{

font-size: 14px;

color: #777;

line-height:1.2;

}

</style>

これで記事のカテゴリーを基準にした関連一覧を表示させることができます。
どういうプログラムかというと、開いているページの投稿記事のカテゴリーを取得し、そのカテゴリーの記事を一覧表示しています。
カテゴリーベースで関連記事を表示させる際に大変やくにたつプログラムなので、

ループで出力する検索条件を絞り込む方法

出力内容を絞り込む方法は大きく下記の２つのパターンがあります。

・メインループ →functions.phpでアクションフックする
・サブループ →パラメータを指定する

それでは、上記２つについて解説して行きます。

「functions.phpでアクションフックする」とは

functions.phpはそもそもWordPressの標準の機能を比較的自由にカスタマイズするためのPHPファイル・プログラムです。
このfunctions.phpにメインループの標準の機能をカスタマイズするためのプログラムを記述すると、サブループのパラメータのように自由に条件を絞ることができます。下記のプログラムがメインループのアクションフックのプログラムです。

function custom_main_query($query){
 if(is_admin() || !$query->is_main_query()):
   return;
 endif;
 if($query->is_home()):
   $query->set('posts_per_page','3');
 endif;
}
add_action('pre_get_posts','custom_main_query');

function custom_main_query($query){

if(is_admin() || !$query->is_main_query()):

return;

endif;

if($query->is_home()):

$query->set('posts_per_page','3');

endif;

}

add_action('pre_get_posts','custom_main_query');

上記のコードをfunctions.phpの適当な箇所に記述し、メインループをカスタマイズしてみましょう。

パラメータとは

パラメータとは、WordPressサブループの検索条件を絞り込むためのプログラムです。
連想配列なので、「キー」と「値」で構成されています。キーに関しては多くの種類があり、その分たくさんの場面で柔軟に条件を絞り込むことが可能となっております。
パラメータは、ページ下に一覧表としてまとめて掲載させていただきます。多くの種類があるので、今の段階全て覚えようとせず「へ〜、そんなのもあるんだ〜」程度にしておき、サブループを実装する際に必要になったら確認して使うようにしましょう。

固定ページの本文を表示させる方法

page.phpを作成する

ここで最後に固定ページでループを使って本文を表示させる方法をご紹介したいと思います。
ここでなぜ固定ページ（page.php）でのループの説明をするかというと、WordPress初心者の方でよくあるのが、固定ページを開いても管理画面で入力したはずの本文が表示されないぞ？といった勘違いをしてしまうことがよくあります。筆者も何回も経験しました。
結論からいうと、固定ページの本文が表示されないのはループしていないからです。 WordPressはタイトルや本文などは、プログラミングの概念である「配列」にデータベースのデータが格納されています。
本記事冒頭で少しご説明しましたが、どのプログラミング言語でもデータベースからデータを取り出す時はループ（while文、for文、foreach文など）を使ってデータを出力して表示させます。つまり、固定ページの本文やタイトルも同じく、WordPressループでループさせて表示させるということになります。

<?php
if(have_posts()):
 while(have_posts()):the_post();
   the_content();
 endwhile;
else:
 print '現在このページは存在しておりません。';
endif;
?>

<?php

if(have_posts()):

while(have_posts()):the_post();

the_content();

endwhile;

else:

print '現在このページは存在しておりません。';

endif;

上記のコードをpage.phpの本文を表示させたい箇所に記述することによって、本文を表示させることができます。 もし、固定ページで編集した本文が表示されないということがありましたら、WordPressループしているかどうかを確認していただければと思います。

【今回使用したテンプレートタグ一覧】 the_content() … 投稿管理画面の本文を出力

get_posts()を使ったサブループについて

get_posts()のサブループはwhile文のサブループと同じ

語弊を恐れずにいうと、get_posts()のサブループはwhile文のサブループと同じです。ただ厳密には違う部分として、クラスなのかテンプレートタグなのかの違いがあるのですが、それ以上の解説となるとプログラマーレベルのお話になってしまうため、割愛させていただきます。

まとめ

今回はWordPressループについて解説しました。WordPressループはWordPressベースでサイト制作する上でかなり重要な技術です。
とても奥が深くWordPressの心臓部と言っても過言ではないので、逆にいうとWordPressループがわからなければテーマ作成をすることはできません。
よろしければ、当記事を活用して繰り返し学習していただくことをおすすめします。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。