【WordPress】記事一覧を表示するにはループを覚えよう！

公開日2022/03/08 最終更新日2022/03/08

WordPressでブログサイトを作るときはHTMLのでコーディングしたサイトをPHPを使ってWordPress化しますよね！

そこでまず最初の鬼門はWordPressで書いた記事を出力（表示）する方法だと思います。
記事を出力するにはループという処理を記述することで書いた記事が出力できますが、これがなかなか理解できない…

というよりコードを調べてコピペでもいいんだけど、書いてあることが全く意味がわからない。わからなければカスタマイズすることもできませんよね。

そんなあなたのためにループの記述について詳しく解説していきます。

Contents

記事を出力するのがループ処理

そもそもループとは、記事があれば記事がある分だけ繰り返し処理をするというコードです。

<?php (have_posts()) : 
the_post(); ?>

//処理の内容（表示したい内容）

<?php endwhile; ?>

実際にこのサイトのトップページの記事一覧はこのループ処理の中に表示させたい内容を記述し、CSSでデザインをしています。
まずはこのループの型を一覧表示させたいところに記述しましょう。

ループの中身

このサイトのトップページを例にすると、記事のカテゴリー、アイキャッチ画像、タイトル、投稿日、更新日、抜粋を表示しています。

カテゴリーを取得・出力する

<?php
   $category = get_the_category(); //WordPress独自テンプレートタグ カテゴリーを取得
   if ($category[0]) {
   echo '<div class="###-item-tag">' . $category[0]->cat_name .'</div>';
   //カテゴリーが複数ある場合はカテゴリーの0番目を取得し、表示する（0番目は1番目ということ）
   }                                         
?>

カテゴリーは基本記事に対して１つだと思いますが、もし複数ある場合は１つ目のカテゴリーを取得し表示するという意味です。複数カテゴリーを付けるのであれば「タグ」をつけた方がいいかもしれませんね！

アイキャッチ画像の出力する

<?php
if (has_post_thumbnail()){
//もしアイキャッチ画像が設定されていれば
    the_post_thumbnail('large');
//大サイズで表示する
}else{
//設定されていなければ
    echo '<img src="' .esc_url(get_template_directory_uri()) . '/画像フォルダ/画像ファイル名.拡張子" alt="">'; 
//この画像を表示する（noimageなどの画像を用意しておく）
}
?>

タイトルを出力する

<?php the_title(); ?> //WordPress独自テンプレートタグ

投稿日、更新日を出力する

<time class="###" datetime="<?php the_time('c'); ?>">
//タイムゾーンの設定
公開日<?php the_time("Y/m/d"); ?></time>
//年/月/日の形で表示

<?php the_time(‘c’); ?> でタイムゾーンを設定しています。
日本の場合、協定標準時より9時間早いのでプラス9時間しなければいけません。
そこで便利なのがパラメータ。(‘c’)とすれば自動でプラス9時間で取得してくれます。

<?php the_time(“Y/m/d”); ?> は取得した日付の表示方法で、20##/#/##のように表示されます。/を-に変えればそのように変更されます。

抜粋の表示

<?php the_excerpt(); ?> //WordPress独自のテンプレートタグ

抜粋とは記事の一部を表示するということです。

記事の冒頭部分の一部を表示するということですね。

このサイトの一覧記事のコード

上記のコードを組み合わせることで記事のリンクを作っていきます。
実際にこのページのコードを紹介しますね。

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

<ul class="###-item-list">
 <div class="###">
   <li>
     <a class="###-item" href="<?php the_permalink(); ?>">
       <div class="###-item-img">
       <?php
       if (has_post_thumbnail()) {
          the_post_thumbnail('large');
      　　} else {
       echo '<img src="' . esc_url(get_template_directory_uri()) . '/###/###.png" alt="">';
     　　　　}
      　?>
　</div>

<div class="###-item-body">
  <div class="###-item-meta">
  <?php
  　　$category = get_the_category();
   if ($category[0]) {
   echo '<div class="###-item-tag">' . $category[0]->cat_name . '</div>';
   }
   ?>
<time class="###-item-published" datetime="<?php the_time('c'); ?>">公開日<?php the_time("Y/m/d"); ?></time>
<time class="###-updated" datetime="<?php the_modified_time('c'); ?>">最終更新日<?php　　the_modified_time('Y/m/d'); ?></time>
</div>
<h2 class="###-item-title"><?php the_title(); ?></h2>
<div class="###-item-excerpt">
  <p><?php the_excerpt(); ?></p>
</div>
</div>
</a>
</li>
</div>
</ul>
<?php endwhile; ?>

あとはそれぞれのクラスにCSSでデザインを当てていけば完了です。