14：表示用サブループ設置

公開日:2019年07月14日更新日:2019年07月17日

WordPress

メインループとサブループ

アクセスしたページのURLからページ情報を取得したデータを使うループをメインループと呼びます。

サブループはテーマ制作者が任意の条件で表示する為に追加したループを指します。

表示用サブループ

連想配列で指定した条件をもとにデータベースから情報を取得します。

条件用連想配列と情報取得

<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 6,
  'category_name' => 'works',
);
$the_query = new WP_Query($args);
?>

ループ開始

<?php /***** サブループ開始 *****/ ?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : ?>
<?php $the_query->the_post(); ?>

ループ終了

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php /***** サブループ終了 *****/ ?>

制御構文

<?php
// 条件を連想配列で指定
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 6,
  'category_name' => 'works',
);
// データベースから条件に応じたページ情報を取得して変数に代入（サブループデータ）
$the_query = new WP_Query($args);

// サブループデータがページ情報をもっているか確認
if ($the_query->have_posts()) {
  // サブループデータがページ情報をもっている分だけ繰返し処理
  while ($the_query->have_posts()) {
    // サブループデータから1件分のページ情報を$post変数にセット
    $the_query->the_post();

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

  }
}
// サブループデータによって上書きされた$postをメインループの$postの状態に復元
wp_reset_postdata();
?>

サブループ用条件

WordPressで記事一覧取得時に使う条件

表示用サブループに置き換え

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

front-page.php

変更前のコード

<div class="works">
  <div class="inner">
    <h2 class="title">Works</h2>
    <div class="subtitle">実績</div>
    <div class="flex">
      <div class="flex-item">
        <a href="#">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="実績タイトル">
          </div>
          <div class="item-title">おすすめ店舗サイト</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="#">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="実績タイトル">
          </div>
          <div class="item-title">おすすめ店舗サイト</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="#">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="実績タイトル">
          </div>
          <div class="item-title">おすすめ店舗サイト</div>
        </a>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
    <div class="link">
      <a href="#">実績一覧 ></a>
    </div><!-- .link -->
  </div><!-- .inner -->
</div><!-- .works -->

変更後コード

1件分の表示HTMLを囲むように「サブループ条件とサブループ開始」と「サブループ終了」を配置します。

また1件分の表示HTMLのリンク部分でthe_permalink関数呼び出し、タイトル部分でthe_title関数を呼び出してデータベースから取得したページ情報を表示します。

<div class="works">
  <div class="inner">
    <h2 class="title">Works</h2>
    <div class="subtitle">実績</div>
    <div class="flex">

<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 6,
  'category_name' => 'works',
);
$the_query = new WP_Query($args);
?>
<?php /***** サブループ開始 *****/ ?>
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : ?>
<?php $the_query->the_post(); ?>

      <div class="flex-item">
        <a href="<?php the_permalink(); ?>">
          <div class="image">
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/thumbnail.jpg" alt="実績タイトル">
          </div>
          <div class="item-title"><?php the_title(); ?></div>
        </a>
      </div><!-- .flex-item -->

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php /***** サブループ終了 *****/ ?>

    </div><!-- .flex -->
    <div class="link">
      <a href="#">実績一覧 ></a>
    </div><!-- .link -->
  </div><!-- .inner -->
</div><!-- .works -->

ページ情報表示用関数

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