ZeroPlus Gateについて

\ シェア /

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

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

Web制作

2022/07/20

2023/05/08

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

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

この記事で身につく内容
  • メインループを使用して投稿を表示する方法

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?

  • またゼロからやり直さないといけないの?
  • 本当にフリーランスになれるの?

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!

\お申し込みは30秒で終わります。/

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか?

投稿を表示する仕組み

投稿機能とは

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

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

  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制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

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

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

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

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

詳しくはこちらから

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

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

詳しくはこちらから