Learning site for website creation

09:表示用メインループ設置

  • 投稿日:2019年07月13日
  • 更新日:2019年07月19日

表示用メインループ

WordPressはURL内のスラッグ(ページ固有のキーワード)から対象のページを特定してデータベースから情報を取得します。

タイトルや本文などページ内容を表示するには表示用ループを記述します。

スラッグから取得したデータを表示するループをメインループと呼びます。

ループ開始

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

ループ終了

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

制御構文

<?php
// スラッグ(URL)をもとにデータベースから条件に応じたページ情報を取得(メインループデータ:暗黙データ)
// メインループデータがページ情報をもっているか確認
if (have_posts()) {
  // メインループデータがページ情報をもっている分だけ繰返し処理
  while (have_posts()) {
    // メインループデータから1件分のページ情報を$post変数にセット
    the_post();

    // WordPress関数でページ内容を表示

  }
}
?>

表示用メインループに置き換え

プロフィールパーツをメインループに置き換えます。

front-page.php

変更前のコード

<div id="profile" class="profile">
  <div class="inner">
    <h2 class="title">Profile</h2>
    <div class="subtitle">人物</div>
    <div class="flex">
      <div class="flex-item photo">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/human.png" alt="YourName">
      </div><!-- .flex-item -->
      <div class="flex-item text">
        <div class="name">YourName</div>
        <div class="item-text">
          <p>
          ウェブに特化したデザイナーです。
          SEOを踏まえた正しい文法でコーディングします。お客様にはショップオーナー様、企業のホームページ担当者様、また制作会社様など様々です。
          </p>
          <p>
          ウェブサイトに関することはお気軽にご相談ください。
          </p>
        </div><!-- .item-text -->
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .profile -->

変更後コード

<div id="profile" class="profile">
  <div class="inner">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

  </div><!-- .inner --> 
</div><!-- .profile -->

ページ情報表示用関数

関数名 内容
the_title() タイトル表示
the_excerpt() 抜粋文表示
the_content() 本文表示
the_time('Y年m月d日') 投稿日表示
the_permalink() ページのURLを表示

WordPressよく使う関数

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

have_posts()

the_post()

the_content()

表示確認

以下URLにアクセスすると以下の表示になります。

http://localhost/WordPressフォルダ名/

※欠席者対応:lesson04 - lesson05