2.トップページに新着記事の一覧を表示する【30DAYSトライアル】

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

2ndステップであるこの記事では、トップページに新着記事の一覧を表示し、ページネーションを追加していきます。

1. プラグイン『Show Current Template』で表示中のテンプレートを確認できるようにする

ここから本格的にテンプレートのカスタマイズを始めていきます。

今後の開発を楽にするため、管理バーに現在表示中のテンプレートを表示してくれるプラグイン『Show Current Template』をインストールしましょう。

有効化したらトップページを確認してください。

ページ上部の管理バーに、現在表示してるテンプレート『index.php』が表示されているはずです。

前回記事にも書きましたが、WordPressにはテンプレート階層というものがあり、「基本は〇〇.phpを表示するけど、△△.phpがあればそちらを表示する」という表示の優先順位が決まっています。

初心者のうちは「△△.phpを表示してるつもりで編集してるのに、表示が全然変わらない…。（実は☆☆.phpが表示された）」といったイージーなミスでハマりがち。

ですのでShow Current Templeteでどのファイルが表示されているのかハッキリさせておきましょう。

表示中のテンプレートで読み込んでいるテンプレートまで表示されるので、ファイル修正もしやすくなります。

2. パーマネントリンクの設定を投稿名に変更する

記事を追加するにあたり、URLを投稿名に修正します。

ここで詳しい説明は省きますが、URLはシンプルかつ意味のある言葉で構成されたものにすべきとGoogle公式 でも明言されています。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で（可能な場合は ID ではなく意味のある単語を使用して）URL を構成できるよう、コンテンツを分類します。

というわけで、URLは『http://ドメイン/投稿名』のシンプルな構造にしておきましょう。

3. タイトル・本文・アイキャッチを入れてテスト記事を1つ作成

こちらは特に解説ありません。

WordPressの投稿の仕方がわからない方は、まず一通り普通の使い方を調べてくださいね。

4. 記事複製用プラグイン『Duplicate Post』を入れる

サイト制作によく使うプラグインをもう一つ紹介しておきます。

これから記事一覧を作るに当たって、ちゃんと一覧表示できるか、動作確認のためにテスト記事を複数作る必要があります。

でもただのテスト記事を手動でいくつも作るのはめんどくさいですよね。

ここで活躍するのが、記事複製用プラグイン『Duplicate Post』です👍

有効化すると、投稿一覧に『複製』ボタンが追加されるので、あとはポチポチ記事を増やすだけ。

とりあえず5記事くらい複製すればOKです。

増やした記事は『下書き』として保存されるので、「一括操作 > 編集 > ステータスを公開済みに変更 >  更新」で公開しましょう。

手動で作ると数分かかる作業が、30秒で済みました。

サイト制作の実務においても、表示確認のためにテスト記事を作る場面は多々ありますので、ぜひ『Duplicate Post』を覚えておいてください。

5. index.phpで記事の一覧を表示する

それでは準備が整ったので、投稿データを取得して記事一覧のパーツを作っていきます。

5-1. 記事データを取得するためのループを作成する

メインクエリを使って、記事のループを作ります。

キーワードを書いておくので、codexで調べてください👍

<!– entry-item –>が記事パーツですので、それを１つだけ残して記事数ぶんループさせるように記述します。

コピー
<!-- primary -->
<main id="primary">

<?php
//記事があればentriesブロック以下を表示
if (have_posts() ) : ?>

<!-- entries -->
<div class="entries">
<?php
//記事数ぶんループ
while ( have_posts() ) :
the_post(); ?>

<!-- entry-item -->
<a href="#" class="entry-item">
<!-- entry-item-img -->
<div class="entry-item-img">
<img src="<?php echo get_template_directory_uri() ?>/img/entry1.png" alt="">
</div><!-- /entry-item-img -->
<!-- entry-item-body -->
<div class="entry-item-body">
<div class="entry-item-meta">
<div class="entry-item-tag">カテゴリ名</div><!-- /entry-item-tag -->
<time class="entry-item-published" datetime="2019-01-01">2019/1/1</time><!-- /entry-item-published -->
</div><!-- /entry-item-meta -->
<h2 class="entry-item-title">記事のタイトルが入ります記事のタイトルが入ります記事のタイトルが入ります</h2><!-- /entry-item-title -->
<div class="entry-item-excerpt">
<p>文章の一部が入ります文章の一部が入ります文章の一部が入ります文章の一部が入ります文章の一部が入…</p>
</div><!-- /entry-item-excerpt -->
</div><!-- /entry-item-body -->
</a><!-- /entry-item -->

<?php
endwhile;
?>
</div><!-- /entries -->
<?php endif; ?>

<!-- pagenation -->
<div class="pagenation">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="#">2</a>
<a class="page-numbers" href="#">3</a>
<a class="next page-numbers" href="#"><i class="fas fa-angle-right"></i></a>
</div><!-- /pagenation -->

</main><!-- /primary -->

<?php get_sidebar(); ?>

反映させたら、index.phpを表示してみてください。

先ほどテスト投稿を5記事作ったので、5記事ぶん表示されていればOKです。

5-2. リンク・アイキャッチ・タイトルなどを動的にする

5-1で投稿データを一括取得し、投稿数ぶんのループまで作りました。

記事の中身は、まだ静的なHTMLのままです。

すでに投稿データは取得できてますので

• 記事へのリンク
• アイキャッチ
• 所属カテゴリー
• 公開日時
• タイトル
• 抜粋

これらを実際の記事データに置き換えていきます。

コピー
<!-- entry-item -->
<a href="<?php the_permalink(); //記事のリンクを表示 ?>" class="entry-item">
<!-- entry-item-img -->
<div class="entry-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば大サイズで表示
the_post_thumbnail('large');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div><!-- /entry-item-img -->

<!-- entry-item-body -->
<div class="entry-item-body">
<div class="entry-item-meta">
<?php
// カテゴリー１つ目の名前を表示
$category = get_the_category();
if ($category[0] ) {
echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div><!-- /entry-item-tag -->';
}
?>
<!-- 公開日時を動的に表示する -->
<time class="entry-item-published" datetime="<?php the_time('c'); ?>"><?php the_time('Y/n/j'); ?></time><!-- /entry-item-published -->
</div><!-- /entry-item-meta -->
<h2 class="entry-item-title"><?php the_title(); //タイトルを表示 ?></h2><!-- /entry-item-title -->
<div class="entry-item-excerpt">
<?php the_excerpt(); //抜粋を表示 ?>
</div><!-- /entry-item-excerpt -->
</div><!-- /entry-item-body -->
</a><!-- /entry-item -->

ページをリロードすると、実際の投稿データが表示できているはずです！

念のため、アイキャッチや抜粋のテキストを変更して、変更が正しく反映されるかチェックしてください。

5-3. ページネーションを作る

記事一覧ページの仕上げに、ページネーションを動的にします。

コピー
<?php if (paginate_links() ) : //ページが1ページ以上あれば以下を表示 ?>
<!-- pagenation -->
<div class="pagenation">
<?php
echo
paginate_links(
array(
'end_size' => 0,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '<i class="fas fa-angle-left"></i>',
'next_text' => '<i class="fas fa-angle-right"></i>',
)
);
?>
</div><!-- /pagenation -->
<?php endif; ?>

WordPressの初期設定では、1ページに表示される投稿の件数は10件です。

つまり、11件以上の投稿がないとページネーションは表示できません。

サクッと見た目だけ確認したいので、『設定』から表示する投稿数を1にします。

すると記事は5記事あるので、5ページ目までのページネーションが表示されてるはず！

動作確認のため、ページ番号をクリックするとちゃんと2ページ目、3ページ目と表示が切り替わるかもチェックしてください👍

表示が変わってたらOKです！

これでトップページに一覧表示が完了しました！

次回はヘッダーメニュー・フッターメニューを動的化していきます。

お疲れ様でした😀