タイトル・URLをコピー
記事タイトル初心者必見!WordPressループの使い方とその手順+サンプルコード
記事URLhttps://digitor.jp/textbook/wordpress-loop/
記事タイトル初心者必見!WordPressループの使い方とその手順+サンプルコード
記事URLhttps://digitor.jp/textbook/wordpress-loop/
POINTこの記事をざっくり言うと
WordPressループが理解でき、人に説明できるようになる
テーマカスタマイズで記事一覧や固定ページなどを実装できるようになる
WordPressループで意図した動き通りにカスタマイズすることができる
みなさんこんにちは!エンジニアの高沢です!
今回は、WordPressの心臓部と言っても過言ではない「WordPressループ」の解説したいと思います。
WordPressループという概念は、WordPressのテーマ作成・カスタマイズの際にかなりの確率で使われる技術なので、本記事をご参考にぜひ実践的なスキルを身につけてください。
WordPressループとは
WordPressループとは、PHPのwhile文などのループで記事情報(厳密には管理画面で入力した内容)を表示させるプログラムのことです。
使いどころとしては、よくブログサイトに見られる最新記事一覧などが一番イメージしやすいのではないかと思います。
WordPressループの使いどころ
そもそもWordPressループとはどういった時に使われるのかがイメージできなければわかりづらいと思います。筆者も初めてこの用語を聞いた時は何がなんだかわかりませんでした。
WordPressループとは先述した通り、PHPのwhile文などのループで記事情報を表示させるプログラムのことです。
ではなぜループなのかというと、どのプログラミング言語においても、データベースからデータを取り出す時はループ(while文、for文、foreach文など)を使います。WordPressループでは主にwhile文やforeach文を使います。
ここでデータベースが出てきた理由は、WordPressループで出力する記事データはデータベースに格納されているためです。
基本的に「データ」はデータベースに格納されて保存されているものと思ってください。
このWordPressループがよく使われる場面としては下記があります。
- 新着記事の一覧
- 記事ページ・固定ページの本文表示
- 関連記事の一覧
- 特定の時間内に投稿された記事の一覧(Date_query)
- 任意で選択した記事の一覧(Meta_query)
など、実に多くの場面で使われます。
よって、使い方次第でより高度な実装が可能となり、実装のバリエーションは何通りもあるわけです。
ぜひWordPressループを習得して、自由にテーマを作成しましょう!
WordPressループの種類
WordPressループの種類は大きく2つあります。1つはメインループ、もう1つはサブループといいます。
まずは基本中の基本であるメインループについて解説します。
メインループとは
メインループはURLを下にページに必要なデータベースにあるデータを判別して表示させるループのことです。
主にindex.phpやcategory.php、single.phpなど全てのテンプレートで使います。
メインループの基本的な書き方
|
<?php if(have_posts()): while(have_posts()):the_post(); ?> <!-- ↓↓↓↓↓↓↓↓↓↓ ループ内容 ↓↓↓↓↓↓↓↓↓↓ --> <?php endwhile; endif; ?> |
上記のコードがメインループの書き方になります。
構造としては一番シンプルです。
if文ではまずhave_posts()関数でループさせるデータがあるかどうかを判別し、あればループさせてデータを表示させます。
ちなみに、メインループはサイト1ページにつき1つまでしか使えませんのでご注意ください。
サブループとは
サブループとは、メインループではない方のWordPressループです。
先述しましたが、メインループはサイト1ページにつき1つまでしか使えないので、2つ以上使う場合は必ずサブループを使います。
使いどころは大変多く、例えばサイドバーに関連記事の一覧や新着記事の一覧を表示させる場合などに使用します。
下記がお手本のコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
<?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(); ?> |
上記の記述がget_posts()を使ったサブループの構文になります。
先ほどのサブループの記述と似ており、同じくパラメータを指定して条件を絞ってループします。
WordPressループを使ってindex.phpに記事一覧を表示させてみよう
index.phpを作成する
ここからは実際にWordPressループを使ってindex.phpのトップページに記事一覧を表示させてみましょう!
WordPressループを表示させるために最低限下記の2つが必要になります。
・index.php
・表示させる材料(記事情報)
まず、記事一覧を表示させるための材料が必要です。材料としては、記事のアイキャッチ画像、タイトル、抜粋文、公開日時、カテゴリー、タグ、の6つが必要です。
事前に投稿記事を10記事分ダミーで用意しておきましょう。(つまり、10記事分投稿し公開しておきましょう)
次にindex.phpを作成し、テンプレートの中の記事一覧を表示させたい箇所に下記のプログラムを記述します。
また、サンプルコードを実装するにあたってサンプル画像をご用意いたしましたのでよろしければご活用ください。
サンプルコードではsrc="/image/sample-list-img-noimage.png"の中の/image/の中に画像が存在する前提で解説するので、imageフォルダを作成しその中に画像を入れていただければと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
|
<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> |
記述した部分に下記のに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ファイルを用意してもいいです。)に記述してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
|
<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でレイアウトを整えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
|
<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を作成する
特定のカテゴリーに絞ってループを表示させるために最低限下記の3つが必要になります。
・index.php
・表示させる材料(記事情報)
・パラメータ
メインループと違う点はパラメータを使うか使わないかのところです。
サブループではパラメータで条件を絞って一覧を表示させることができます。
表示させる材料に関してはメインループの時と同じです。
ここではパラメータを利用して、特定のカテゴリーに絞ってループさせる方法を紹介いたします。
サブループはメインループと違い1つのページにいくつでも作成することができるので、パラメータをうまく使って今回ご紹介するカテゴリーベースの関連記事一覧や、特定の期間中に投稿された記事のみを一覧で表示させるなど、多くのバリエーションでループさせることができます。
下記がサンプルコードになります。index.phpのメインループのページネーションの下に記述してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
|
<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> |
次にCSSのレイアウトを整えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
.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> |
これで記事のカテゴリーを基準にした関連一覧を表示させることができます。
どういうプログラムかというと、開いているページの投稿記事のカテゴリーを取得し、そのカテゴリーの記事を一覧表示しています。
カテゴリーベースで関連記事を表示させる際に大変やくにたつプログラムなので、
ループで出力する検索条件を絞り込む方法
出力内容を絞り込む方法は大きく下記の2つのパターンがあります。
・メインループ
→functions.phpでアクションフックする
・サブループ
→パラメータを指定する
それでは、上記2つについて解説して行きます。
「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'); |
上記のコードを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; ?> |
上記のコードをpage.phpの本文を表示させたい箇所に記述することによって、本文を表示させることができます。
もし、固定ページで編集した本文が表示されないということがありましたら、WordPressループしているかどうかを確認していただければと思います。
【今回使用したテンプレートタグ一覧】
the_content() … 投稿管理画面の本文を出力
get_posts()を使ったサブループについて
get_posts()のサブループはwhile文のサブループと同じ
語弊を恐れずにいうと、get_posts()のサブループはwhile文のサブループと同じです。
ただ厳密には違う部分として、クラスなのかテンプレートタグなのかの違いがあるのですが、それ以上の解説となるとプログラマーレベルのお話になってしまうため、割愛させていただきます。
まとめ
今回はWordPressループについて解説しました。WordPressループはWordPressベースでサイト制作する上でかなり重要な技術です。
とても奥が深くWordPressの心臓部と言っても過言ではないので、逆にいうとWordPressループがわからなければテーマ作成をすることはできません。
よろしければ、当記事を活用して繰り返し学習していただくことをおすすめします。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトル初心者必見!WordPressループの使い方とその手順+サンプルコード
記事URLhttps://digitor.jp/textbook/wordpress-loop/
記事タイトル初心者必見!WordPressループの使い方とその手順+サンプルコード
記事URLhttps://digitor.jp/textbook/wordpress-loop/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。