Learning site for website creation

22:トップページ専用テンプレートにサブループを追加

  • 投稿日:2018年11月05日
  • 更新日:2018年11月06日

「先頭に固定表示」に指定した投稿をサブループで一覧表示

「front-page.php」の任意の位置に以下のコードを記述します。

条件の記述法

<?php /***** サブループ条件 *****/ ?>
<?php // 先頭固定表示 ?>
<?php
$sticky = get_option( 'sticky_posts' );
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 3,
    'post__in' => $sticky,
    'orderby' => 'id',
    'order' => 'DESC'
);
$the_query = new WP_Query($args);
?>
<?php /***** サブループ開始 *****/ ?>
<?php if($the_query->have_posts()) :?>
<div class="sub-loop">
  <div class="inner">
    <h1>先頭に固定表示最新記事</h1>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <a class="post-link" href="<?php the_permalink(); ?>">
      <h2 class="title"><?php the_title(); ?></h2>
    </a>
<?php endwhile; ?>
  </div><!-- /.inner -->
</div><!-- /.sub-loop -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php /***** サブループ終了 *****/ ?>

カテゴリーを絞ってサブループで一覧表示

「front-page.php」の任意の位置に以下のコードを記述します。

条件の記述法

<?php /***** サブループ条件 *****/ ?>
<?php // その他記事 ?>
<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5,
  'category_name' => '未分類',
  'ignore_sticky_posts' => 1,
  'orderby' => 'id',
  'order' => 'DESC'
);
$the_query = new WP_Query($args);
?>
<?php /***** サブループ開始 *****/ ?>
<?php if($the_query->have_posts()) : ?>
<div class="sub-loop">
  <div class="inner">
    <h1>その他最新記事</h1>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <a class="post-link" href="<?php the_permalink(); ?>">
      <h2 class="title"><?php the_title(); ?></h2>
    </a>
<?php endwhile; ?>
  </div><!-- /.inner -->
</div><!-- /.sub-loop -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php /***** サブループ終了 *****/ ?>

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

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

WordPressコンストラクタ

new WP_Query()

WordPressメソッド

WP_Queryインスタンス->have_posts()

WP_Queryインスタンス->the_post()

WP_Queryインスタンス->have_posts()

WP_Queryインスタンス->have_posts()

WordPress関数

get_option()

the_permalink()

the_title()

wp_reset_postdata()

 

欠席者対応:wireframe07