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

公開日:2019年07月13日更新日:2019年07月19日

WordPress

オリジナルテーマ作成

表示用メインループ

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を表示