\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > L_WordPress > Step2 > メインループを使って投稿を表示しよう
メインループを使って投稿を表示しよう

メインループを使って投稿を表示しよう

2022/07/14

2022/07/14

今回は、WordPressのオハコである、投稿機能を中心に、ループについて説明していきます。

投稿を表示する仕組み

投稿機能とは

まずは、投稿機能を考えていきます。

投稿機能は、次のように、管理画面から記事やお知らせを作成することができます。

  1. 管理画面から項目を入力する。

  2. サイトに反映される。

    また、記事ページも自動で作られる。

投稿機能で行いたいこととしては、

  • 管理画面から入力された内容が反映される
  • 投稿の数だけ、同じスタイルのついた要素を繰り返す

この2つです。

例えば、新しく投稿を行うと、タイトルや本文などのスタイルが同じ状態のものが、入力した中身を変えて繰り返されます

この、「スタイルが同じ状態のものが、入力した中身を変えて繰り返される」仕様を「ループ」という処理によって行います。

メインループとサブループの違い

今出てきたループですが、「メインループ」と「サブループ」と言う2種類に分けられます。

メインループ

メインループは、投稿機能を一番標準的な形で実行するループとなります。

こちらは、一つのページにつき使用できるメインループは一度で、投稿の細かい挙動を管理画面から設定 or できないものとなっています。

例えば、メインループで1ページに表示させる投稿の数などを管理画面で設定することができます。


サブループ

対してサブループは、それ以外のループです。

こちらは、一つのページの中で何度でも使用することが可能です。

メインループとの明確な差として、投稿の数や並べる順番を指定したり、標準の投稿以外の投稿(カスタム投稿と言います)を使用する際に使われます。


メインループとサブループの厳密な違い

イメージとしては、上記の内容をつかんでいただければ問題ないです。

こちらはあくまで補足ですが、処理の上でのメインループとサブループも解説します。

その違いに、クエリと言うものが大きく関わっています。

ワードプレスにおけるクエリとは、「データベースに投稿データ取得の要求を行うこと」です。

データベースについては、こちらで軽く触れていますが、管理画面から入力した内容を置いておく引き出しだと思ってください。投稿で入力した内容も、データベースに保管されるのですが、表示する際に、「この投稿の情報をちょうだい」と言う感じで要求が実行されます。

このクエリが、「メインクエリ」と「サブクエリ」の二つに分けられます。

メインクエリの特徴として、

  • メインクエリはワードプレス によって自動的に作成 / 発行される
  • メインクエリは URL に基づいて作成される
  • メインクエリはワードプレス起動直後に発行される

の3つが挙げられます。

逆に、このメインクエリ以外のクエリをサブクエリと呼びます。クエリに関してより詳しい内容は、次の記事を参考にしてください。

そして、メインクエリを使っているのがメインループ、サブクエリを使っているのがサブループと言うのが厳密な違いです。

繰り返しますが、クエリに関する説明は、理解するよりも、聞き馴染みを持ってもらうくらいの感覚で捉えていただければ問題ありません。

メインループを書く

メインループを作成するコードの説明をしていきます。

書き方と解説

メインループは次のような記述をしていきます。

<?php 
if (have_posts()) : // 投稿があれば処理に入る
  while (have_posts()) : // 投稿の数だけ繰り返す
    the_post(); // 回数に応じた投稿の情報を取得
?>
<!-- ループさせる投稿の型 -->
<?php
  endwhile;
else:
?>
<!-- 投稿がない時に表示させるもの -->
<?php endif; ?>

それぞれ詳しくみていきます。

前述したように、投稿で行いたい機能と照らし合わせてみましょう。

投稿機能で行いたいこと

  • 管理画面から入力された内容が反映される
  • 投稿の数だけ、同じスタイルのついた要素を繰り返す


if (have_posts()) :

まずは、if (have_posts()) :で投稿があるかどうかを確認します。なければelse:endif;の間の処理に進みます。投稿があれば、次の処理に進みます。

while (have_posts()) :

while (have_posts()) :からendwhile;を使って投稿を繰り返しています。while文は条件式にあるhave_posts()は、投稿がある限り、trueを返します。

つまり、ここのwhile文で、「投稿機能で行いたいこと」の「投稿の数だけ、同じスタイルのついた要素を繰り返す」の処理を実行しています。


the_post();

さらに、the_post();がとても重要で、回数に応じて、投稿のデータを取得しています。

例えば、一回目のループでは一つ目の記事のデータを、二回目のループでは二つ目の記事のデータを、と言うように、繰り返す中で自動的に表示する投稿の番号ごとにデータをセットし直してくれる関数です。

メインループは基本的にこの記述を使って投稿を表示させます。

ループ内で使用できる関数

ループでは次の関数を使用することができます。


the_permalink();

その投稿の記事本体のURLを表示します。次のように、href属性内に記述することが多いです。

<a href="<?php the_permalink(); ?>"></a>


the_post_thumbnail();

その投稿に設定された「アイキャッチ画像」を表示します。画像へのパスではなく、imgタグごと生成されます。

引数を設定することで、生成されるimgタグにclass属性などを付与することができます。


the_time();

その投稿の公開された時間を表示します。

引数を設定することで、表示される時間の形式を選択することができます。


the_title();

その投稿のタイトルの表示をします。

これらはthe_post();でセットされたデータを使用しているので、これらの関数を使う場合は、the_post();を書く必要があります。

ちなみに、このようなWordPress専用の関数をテンプレートタグと呼びます。

まとめ

今回はループとループの中で使えるテンプレートタグについて扱ってきました。

WordPressの醍醐味とも言える投稿機能ですが、記事を読むだけではしっくりこない部分もあると思うので、後の演習で触れていきましょう。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから