特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

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

WordPressループという概念を理解することはWordPressでWeb制作をする上でかなり重要です。当記事では理解なしでは実装ができないと言っても過言ではないWordPressの心臓部である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など全てのテンプレートで使います。

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

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

サブループとは

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

上記の記述がサブループの構文になります。

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

パラメータとは

パラメータとは、サブループを自在に制御するためのプログラムのことです。
自在に制御するとは、サブループでデータを出力する際にどう言う条件で絞り込んで出力するかを決めると言うことです。

プログラムは連想配列なので、「キー」と「」で構成されています。

パラメータに関してはとても奥が深く、ご紹介する情報量がとても多いため、後ほど後述してご紹介させていただきます。

get_posts()のサブループ

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

上記の記述が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フォルダを作成しその中に画像を入れていただければと思います。



記述した部分に下記のに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ファイルを用意してもいいです。)に記述してください。

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

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

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

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

表示件数が10件だとしたら最新の10件しか表示されません。

ユーザー目線で考えたら10件だけでなく全件記事を見れた方が使い勝手がいいはずですが、全件表示したとして仮に100件あったとしたらページの長さがとんでもないことになってしまいます。

そこで、ページネーションを設置して最初の10件だけ表示させてあとの90件は別ページで用意してあげた方がページの長さがすっきりしてサイトを閲覧しやすくなります。
ここではページネーションを作成する方法をご説明いたします。

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

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

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

index.phpを作成する

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

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

メインループと違う点はパラメータを使うか使わないかのところです。
サブループではパラメータで条件を絞って一覧を表示させることができます。
表示させる材料に関してはメインループの時と同じです。

ここではパラメータを利用して、特定のカテゴリーに絞ってループさせる方法を紹介いたします。

サブループはメインループと違い1つのページにいくつでも作成することができるので、パラメータをうまく使って今回ご紹介するカテゴリーベースの関連記事一覧や、特定の期間中に投稿された記事のみを一覧で表示させるなど、多くのバリエーションでループさせることができます

下記がサンプルコードになります。index.phpのメインループのページネーションの下に記述してください。

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

これで記事のカテゴリーを基準にした関連一覧を表示させることができます。

どういうプログラムかというと、開いているページの投稿記事のカテゴリーを取得し、そのカテゴリーの記事を一覧表示しています。

カテゴリーベースで関連記事を表示させる際に大変やくにたつプログラムなので、

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

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

・メインループ
functions.phpでアクションフックする

・サブループ
パラメータを指定する

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

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

functions.phpはそもそもWordPressの標準の機能を比較的自由にカスタマイズするためのPHPファイル・プログラムです。

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

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

パラメータとは

パラメータとは、WordPressサブループの検索条件を絞り込むためのプログラムです。

連想配列なので、「キー」と「」で構成されています。
キーに関しては多くの種類があり、その分たくさんの場面で柔軟に条件を絞り込むことが可能となっております。

パラメータは、ページ下に一覧表としてまとめて掲載させていただきます。多くの種類があるので、今の段階全て覚えようとせず「へ〜、そんなのもあるんだ〜」程度にしておき、サブループを実装する際に必要になったら確認して使うようにしましょう。

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

page.phpを作成する

ここで最後に固定ページでループを使って本文を表示させる方法をご紹介したいと思います。

ここでなぜ固定ページ(page.php)でのループの説明をするかというと、WordPress初心者の方でよくあるのが、固定ページを開いても管理画面で入力したはずの本文が表示されないぞ?といった勘違いをしてしまうことがよくあります。筆者も何回も経験しました。

結論からいうと、固定ページの本文が表示されないのはループしていないからです。
WordPressはタイトルや本文などは、プログラミングの概念である「配列」にデータベースのデータが格納されています。

本記事冒頭で少しご説明しましたが、どのプログラミング言語でもデータベースからデータを取り出す時はループ(while文、for文、foreach文など)を使ってデータを出力して表示させます。
つまり、固定ページの本文やタイトルも同じく、WordPressループでループさせて表示させるということになります。

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

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

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

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

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

まとめ

今回はWordPressループについて解説しました。WordPressループはWordPressベースでサイト制作する上でかなり重要な技術です。

とても奥が深くWordPressの心臓部と言っても過言ではないので、逆にいうとWordPressループがわからなければテーマ作成をすることはできません

よろしければ、当記事を活用して繰り返し学習していただくことをおすすめします。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

高沢 翔汰

フロントエンドエンジニアの高澤です。得意領域はWordPressやその他CMSを利用した開発。日々業務をこなす中でつちかったプログラミングやデザインの技術・知識や、自ら学習したことをまとめて皆様に発信してまいります。趣味は技術書を読むこと。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要