
14:表示用サブループ設置
公開日:2019年07月14日
更新日:2019年07月17日
メインループとサブループ
アクセスしたページの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(); ?>
サブループ用条件
表示用サブループに置き換え
プロフィールパーツをメインループに置き換えます。
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を表示 |
このページで出てくる関数
WordPress関数は「公式サイトのドキュメント」で確認しましょう。
WordPress関数
表示確認
以下URLにアクセスすると以下の表示になります。
http://localhost/WordPressフォルダ名/
実績のタイトルが投稿の内容に変わります。
おさらい問題
ブログをサブループで表示してみましょう。※アイキャッチ画像を除く
※欠席者対応:lesson06 – lesson07
同じカテゴリーのコンテンツ