ループを使って記事一覧を表示させる

ループの仕組み

ループは投稿内容を表示するためにワードプレスで用意された仕組みです。

記事一覧、詳細ページなどと記事内容を出力するページに使用されており、ループ内で指定された条件によって管理画面から投稿内容を出力します

まずは最もシンプルな形のループを作ってみましょう

サンプル

<?php if ( have_posts() ) : ?>
//投稿がある場合にループ前に処理されます。
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
//繰り返し処理されます
<?php endwhile; ?>
//投稿がある場合、ループ後一度のみ処理されます。
<?php else : ?>
//投稿がない場合一度のみ処理される
<?php endif; ?>

<?php if ( have_posts() ) : ?>

基本的な「if文」です。

投稿がある場合は「true」を返し

投稿がない場合は「false」を返します

投稿がある場合は<?php else : ?>までの処理をおこないます。

<?php while ( have_posts() ) : ?>

whileは与えられた条件が「true」である限りは<?php endwhile; ?>までのコードを繰り返し処理します。

<?php the_post(); ?>

ループ内で投稿を順番にセットアップする関数です。

タイトル出力：the_title()

投稿内容出力：the_content()

URL出力：the_permalink()

など様々なものがあります。

これらをループ内で機能させるために

<?php while ( have_posts() ) : ?>
でループを開始した後
<?php the_post(); ?>
を実行させます。

<?php endwhile; ?>

<?php endwhile; ?>でループが終了した後
<?php else : ?>までの間に、ループ後一度だけ処理される。

<?php else : ?>

<?php else : ?>から<?php endif; ?>の間は表示する投稿がない場合一度だけ処理されます。

<?php endif; ?>

「if文の終わり」

閉じ忘れるとエラーが出てページ表示がされなくなる。

記事一覧をループに書き換える

サンプル

<?php if ( have_posts() ) : ?>

<ul class=”archive”>

<?php while ( have_posts() ) : ?>

<?php the_post(); ?>

<li class=”item-archive”>
<div class=”time-and-thumb-archive”>
<time class=”pub-date” datetime=”<?php echo get_the_date( DATE_W3C ); ?>”><?php echo get_the_date(); ?></time>
//投稿日の表示

<div class=”data-archive”>
<p class=”list-categories-archive”><?php the_category( ‘, ‘ ); ?></p>
//カテゴリー
<h2 class=”title-archive”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
//タイトル
<p class=”list-tags-archive”><?php the_tags(); ?></p>
//タグ
</div>
</li>

<?php endwhile; ?>

</ul>

<?php else : ?>

<?php endif; ?>