index.phpに特定カテゴリーの投稿情報を表示する

前回に引き続き、index.phpの作成を進めます。
今回はファーストビューの下「楽しいイベントいっぱいだよ」のセクションを、完成させましょう。

基本ループの復習

WordPressで記事一覧を表示する、基本的なループ処理は以下のように書きます。

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

  <!-- 繰り返し表示したい内容を書く -->

<?php endwhile; ?>

まずは、復習も兼ねてこの基本のループをindex.phpに書いてみましょう。
見本コードを使われている方は、articleタグの上貼り付けてみてください。

index.php

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

保存して、ブラウザでWordPressサイト（トップページ）の表示を確認しましょう。
下図、赤い点線で囲った部分のように、投稿タイトルが複数表示されていたら成功です。　　

【タイトルが複数 表示されない場合】

以下２つのどちらかが原因の場合が多いです。
それぞれご確認ください。

• トップページを表示しているか………管理画面から「サイトを表示」で表示
• 投稿は複数個、公開されているか……管理画面 > 投稿一覧で記事数を確認

WP_Queryで取得する情報の条件をつける

上で書いた基本のループだと、投稿一覧の記事タイトルが全て表示されました。
ですが、今回の「楽しいイベントいっぱいだよ」で表示したいのはカテゴリーが「イベント」になっている投稿だけ。
デザイン上、表示する投稿の数も4つにしたいです。

このように、対象にする投稿、繰り返し表示する投稿数などに条件をつけたい時はWP_Queryという機能（PHPクラス）を使います。

WP_Queryを使った書き方は、以下のようになります。
コメントアウトでは、それぞれ行っていることを簡単に紹介しています。

<?php
  // 取得したい投稿の条件指定
  $args = array(
    'post_type' => 'post', //対象は投稿
    'category_name' => 'event', //カテゴリーのスラッグがevent
    'posts_per_page' => 4, //件数は4件
  );

  // オブジェクト取得
  $event_posts = new WP_Query($args); //変数event_posts はお好きに設定してOK

  // ループの開始
  while ($event_posts->have_posts()): $event_posts->the_post();
?>

  <!-- 表示させたい内容を書く -->
  <?php the_title(); ?>

<?php
  endwhile; //ループ終了
  wp_reset_postdata(); //取得中の投稿情報をリセット
?>

難しく感じますが、こちらの書き方もテンプレートのようなもの。
設定したい条件を$args = array( )の中で設定していることが分かり、条件に応じて変更できれば大丈夫です。

イベントセクションのループを変更する

最初にindex.phpに書いたwhile文を、以下のWP_Queryを使った書き方に変更しましょう。
下記コードは上と同じ内容、大量のコメントアウトを整理したものです。

index.php

<?php
  $args = array( // 取得したい投稿の条件指定
    'post_type' => 'post',
    'category_name' => 'event',
    'posts_per_page' => 4,
  );
  $event_posts = new WP_Query($args);
  while ($event_posts->have_posts()): $event_posts->the_post();
?>

  <?php the_title(); ?>

<?php endwhile; wp_reset_postdata(); ?>

index.phpを上書き保存して、表示を確認しましょう。
指定した条件通り、カテゴリーで“イベント”を設定した記事のタイトルが4つ表示されていれば成功です。

◆ query_postsについて

特定のカテゴリーに属している記事だけを取り出したい時には、query_posts( )を使う方法もあります。

こちらのほうが書き方がシンプルで簡単に思えますが、query_posts( )はメインクエリ（WordPressが自動的に読み込む情報）を書き換える指示です。
以下のようなデメリットがあるため、WordPressのバージョンアップに伴い非推奨の方法として扱われるようになりました。

• ページ表示速度が遅くなる（メインクエリを書き換える際、再度データベースを読み込むため）
• エラーが起きやすくなる（他のページのクエリも書き換わる可能性がある）

bloginfo( 'stylesheet_url' )と同じく、非推奨のコードは後々バージョンアップで廃止される可能性があります。 これから作るサイトはWP_Queryを使った書いたほうが無難でしょう。

繰り返すカードレイアウト部分を作る

ここまででループの設定は出来ましたので、あとは繰り返し表示する部分を作れば完成です。

今<?php the_title(); ?>がある部分に、カードレイアウトのコードを入れます。
素材のhtmlであれば<article> ~ </article>までをループ内に貼り付ければOKです。

WordPressのテンプレートタグに置き換えされる部分を変更していきます。
まず、講座でも登場した以下４つのテンプレートタグを使います。

• カード上部のimgタグ：投稿のアイキャッチを表示する<?php the_post_thumbnail(); ?>
• h3を囲うaタグのリンク先：<?php the_permalink() ?>
• h3タグの中身：投稿タイトルを表示する<?php the_title(); ?>
• <p class="card-description">の中身：投稿の抜粋を表示する<?php the_excerpt(); ?>

index.php

<?php
  $args = array( // 取得したい投稿の条件指定
    'post_type' => 'post',
    'category_name' => 'event',
    'posts_per_page' => 4,
  );
  $event_posts = new WP_Query($args);
  while ($event_posts->have_posts()): $event_posts->the_post();
?>
  <artilce class="card-wrapper">
    <div class="card">
      <?php the_post_thumbnail(); ?>
      <a href="<?php the_permalink() ?>">
        <h3><?php the_title(); ?></h3>
      </a>
      <div class="text-orange">
        ★★★
      </div>
      <p class="card-description">
        <?php the_excerpt(); ?>
      </p>
      <div class="card-footer flex-container flex-all-row">
        <div class="card-author">
          <img src="<?php echo get_template_directory_uri();?>/images/michan.png" width="26" height="26" alt="michan">
          <a href="#">
            michan
          </a> 
        </div>
        <div class="card-date">
          2023/05/16
        </div>
      </div>
    </div>
  </artilce>
<?php endwhile; wp_reset_postdata(); ?>

保存して、ブラウザでWordPressの投稿情報が表示されているか確認してみましょう。

★と抜粋文の間に、妙な間隔が出来ていますね。

検証ツールで見ると、上図のように<p class="card-description">は空で、その下に抜粋部分が入っています。
<?php the_excerpt(); ?>は抜粋を<p>タグで囲った状態で出力しているわけですね。

中にpタグを入れられるよう、<p class="card-description">を<div class="card-description">に変更します。
ついでに、★は5つで固定ということだったので、5つに増やしておきます。

index.php

<div class="text-orange">
    ★★★★★
</div>
<div class="card-description">
    <?php the_excerpt(); ?>
</div>

抜粋文がcard-descriptionクラスの中に入り、文字色も変わりました。

最後に、カード下部。
以下２箇所をWordPressのテンプレートタグに置き換えます。

• 日にち：<?php echo get_the_date(); ?>
• 投稿者名：<?php the_author_posts_link(); ?>

index.php

<artilce class="card-wrapper">
  <div class="card">
    <?php the_post_thumbnail(); ?>
    <a href="<?php the_permalink() ?>">
      <h3><?php the_title(); ?></h3>
    </a>
    <div class="text-orange">
      ★★★★★
    </div>
    <div class="card-description">
      <?php the_excerpt(); ?>
    </div>
    <div class="card-footer flex-container flex-all-row">
      <div class="card-author">
        <img src="<?php echo get_template_directory_uri();?>/images/michan.png" width="26" height="26" alt="michan">
        <?php the_author_posts_link(); ?>
      </div>
      <div class="card-date">
        <?php echo get_the_date(); ?>
      </div>
    </div>
  </div>
</artilce>

　　↓

投稿者名と投稿日に置き換わりました。

これで「楽しいイベントいっぱいだよ」セクションの、コード修正は完了です。
ループの外にある、HTMLで書いた４つのカード（<artilce class="card-wrapper"> ~ </article>）は削除してください。

WordPress管理画面から行う設定

ここまでのコード編集で、WordPressから表示させたい情報を反映させることはできました。
だた、ちょっと思っていた表示と違う……という部分もあると思います。
管理画面側から設定できることもありますので、見ていきましょう。

投稿の表示を変えたい

ここまで作ってきた解説の順序だと、カサ増しで追加した「アライグマの握手会2」が左端に表示されています。

WordPressのループでは、基本的に投稿日時が新しい順に表示されます。
今回のように確認用にダミー投稿を作っていて、順番を変えたい場合は投稿編集画面で公開日を調整すると便利です。

the_excerpt()で表示される抜粋文

投稿の抜粋を取得してくれるテンプレートタグ<?php the_excerpt(); ?>。
このタグでは、投稿作成/編集画面の“抜粋”欄に入力があればそれを、無ければ投稿内容（本文）の冒頭を表示します。

今回は空のままでも構いませんが、デザイン/HTMLサイト通りに作りたい方は抜粋を入力すると良いでしょう。

日にちの表示形式

<?php echo get_the_date(); ?>などのテンプレートタグで表示する日時。

この表示形式はWordPress管理画面の、設定 > 一般設定 から変更ができます。
デザインに合わせた表示形式にするには、“日付形式”の設定でカスタムを選択して「 Y/m/d 」と入力します。

入力欄のすぐ下のプレビューで、表示したい形になっているか確認できます。
問題なければ、ページ下部の「変更を保存」ボタンで保存してください。

日付と時刻で使用するアルファベットと、その意味は公式サポートページをご参照ください。

投稿者名

<?php the_author_posts_link(); ?>で表示させた投稿者名部分。
WordPressインストール時に登録した“ユーザー名”が表示されていると思います。

今はローカル環境。自分以外アクセスできないので問題ありませんが、公開するサイトだと「ログインにも使っているユーザー名」がそのまま表示されるのはちょっと怖いですよね。日本語表記にしたい、Web上の活動名を使いたいなど、などの場合もあるでしょう。

表示する名前の変更は、WordPress管理画面のプロフィール編集から行えます。

最上部に表示されているツールバー（管理バー）の右側「こんにちは、〇〇さん」の文字にカーソルを重ねてください。
表示されるメニューから プロフィールを編集 を開きます。

プロフィール編集画面の半ばに“名前”の項目があります。
「ブログ上の表示名」が<?php the_author_posts_link(); ?>などのテンプレートタグで使われる表記です。
ニックネームを登録すると切り替えられるようになるので、お好きに変更してください。