index.phpにブログ一覧を表示する

今回からは、index.php、ブログの一覧表示を作り込んでいきましょう。

1.index.phpを整理する

現在のinde.phpで記事カード部分は、htmlファイルそのままですね。 記事の抜粋とリンクを兼ねたカードが４つ並んでいるはずです。

しかしループ（php while～を使っての繰り返し処理）内に入れ込む場合は、カードが繰り返し呼び出されることになるので１つで足ります。

紛らわしいので、index.phpの２枚目以降のカード部分はコメントアウトするか削除してしまいましょう。下図ではコメントアウトして畳んでいます。

2.ループタグを入れる

一枚だけ残したカード部分<section>～</section>をループ内に入れ込みましょう。 WORDPRESS基礎講座【前編】でも使った、記事一覧を表示してくれるループタグでカード部分を挟みます。

<?php while (have_posts() ): the_post(); ?>
 <!-- 繰り返し表示させたい部分をいれる -->
<?php endwhile; ?>

保存してブラウザをリロードしてみましょう。 ループ処理によって同じカードが何件か並んで表示されるはずです。

「エラーは出ていないのに一件しか表示されない」という場合は、管理画面>設定>表示設定で下図のポイントを確認してください。

3.インクルードタグに置き換える

ループさせているカードの中身を、それぞれ投稿のものが表示されるようにインクルードタグに変えていきましょう。

1.アイキャッチ画像部分

アイキャッチ画像を呼び出し、それぞれの投稿記事へのリンクで囲みます。 使用するWordPressタグは、下記２つです。

●投稿ページのURLを取得する

<?php the_permalink(); ?>

●アイキャッチ画像のURLを取得する

<?php the_post_thumbnail_url('post-thumbnails'); ?> 

画像部分をWordPressタグに置き換えてみましょう。 どちらもURLを呼び出すタグですので、hrefとsrcの" "内に書きます。

index.php

ブラウザで確認してみましょう。 アイキャッチ画像が入り、記事ページへのリンクが出来ています。

……が、上図の場合ですと一番上の記事には画像が出ていません。 これは投稿画面でアイキャッチを設定していない投稿です。画像が無いのでaタグのリンクも効いておらず、不便ですよね。

ブログを書く時にアイキャッチを登録すれば良いのですが、忘れてしまうこともあるかもしれません。 アイキャッチ画像がなくてもレイアウトが崩れないよう、設定を加えましょう。

条件分岐を使う

画像が無い場合に表示する「No Image」用の画像を用意し、テンプレートディレクトリの画像フォルダに入れてください。 下にあるのがデモで使用しているEC designさんの画像です。 こちらを右クリックで保存し、ファイル名を変更して使用して頂いても良いです。

アイキャッチ画像の有無を判定するために、WordPressで用意されているタグを使って条件分岐を作ります。

<?php if ( has_post_thumbnail() ) : //アイキャッチ画像あり ?>
   // ここに画像があった時の処理を書く
<?php else: //アイキャッチ画像なし ?>
   // ここに画像がない時の処理を書く
<?php endif; ?>

参考：has_post_thumbnail() – Function | Developer.WordPress.org

画像フォルダのあるテーマディレクトリパスを<?php echo get_template_directory_uri(); ?>で取得し、imgフォルダ内のnoimage.jpg（※名前は任意）を呼び出します。

ブラウザで表示を確認してみましょう。

アイキャッチ無しの記事にはNo Image画像が表示されました。 No Image画像に記事ページへのリンクも付いています。

2.タイトルと記事内容を表示する

続いて記事タイトル、記事内容抜粋部分をWordPressタグに置き換えます。

記事タイトルの呼び出しはWordPress基礎講座でも使いましたね。 記事内容の部分は抜粋を呼び出すthe_excerpt()を使用します。

aタグ部分もWordPressタグに置き換えて、ブラウザで表示を確認してください。

タイトルが変わり、別々のURLへリンクされていれば完了です。

3.投稿者、投稿時間を表示する

最後にカード部分の下に投稿者や投稿時間を反映させます。

まず簡単な所から行きましょう。 それぞれ、以下のWordPressタグを入れるだけで取得・表示してくれます。

●投稿日時

<?php the_time('Y/m/d'); ?>

●投稿者名

<?php the_author(); ?>

「Morgan Freeman」と「10 min」を上記のWordPressタグに置き換えて下さい。

同じ日に複数の記事を投稿している場合、投稿日が表示されないこともあります。

投稿者の画像はアバター画像のsrc部分に下記のコードを入れて下さい。

<?php echo get_avatar_url($post->post_author); ?>

変更を保存→ブラウザをリロードします。 投稿者名・プロフィール画像・投稿時間、変更した３箇所が表示されていることか確認してください。

投稿者アーカイブページ

最後に投稿者名とプロフィール画像を囲う、投稿者アーカイブページへのリンクを作ります。

投稿者アーカイブへのリンクはWordPress Codex-get author posts url記載のインクルードタグをそのまま使います。

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">

ブラウザで確認し、投稿者名のところに「http://localhost/○○○/author/admin/」というような、投稿者アーカイブURLへのリンクができているかを確認してみましょう。

これでindex.phpの記事ループ設定は終了です。 ２枚目以降のカード部分をコメントアウトしていた方は、削除しておいて下さい。