プログラミングで人生を豊かに楽しく

【WordPress】一覧ページ(archive.php)の作り方

みやしも Wordpress

今回は、WordPressのテーマ制作における「一覧ページ(archive.php)」の作り方を解説してゆきます。

オリジナルテーマを制作中の方は必見の内容です!

▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスのみやしもです。WEB制作・システム開発などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

WordPressの「一覧ページ」について

WordPressの「一覧ページ」について



WordPressの一覧ページとは、「投稿」で作成した記事の一覧を表示する画面のことです。ゼロからテーマを自作する場合は次のステップで作成できます。



▼一覧ページの作り方

  1. 一覧ページのテンプレートファイル(archive.php)を作成する
  2. テンプレートファイルにアクセスできる様にする
  3. テンプレートファイルにHTMLを移設する
  4. テンプレートファイルを編集する
WordPressテーマにはほぼ必須ともいえるテンプレートファイルとなっています!

投稿ページのデザインサンプル

今回の記事では、次のようなデザインのHTMLファイルを使用して解説をすすめてゆきます。



一覧ページ・投稿ページのデザインサンプル

デザインサンプル

投稿ページのもとになるHTMLファイルを用意してから作業にかかりましょう!

STEP1. テンプレートファイルを作成する

STEP1. カスタム投稿タイプの「テンプレートファイル」を準備する



それでは解説をスタートしてゆきます。まずは「一覧ページ」のテンプレートファイルから作成してゆきましょう。

「一覧ページ」のテンプレートファイルの作り方

テンプレートファイルとは、WordPressの機能を利用するためテーマ専用のファイルのことで、あらかじめ決められた役割・名前にしたがって作成する必要があります。



「一覧ページ」のテンプレートファイルを用意する場合は、テーマフォルダの直下に次の命名規則でファイルを作成します。

▼「一覧ページ」のテンプレートファイル
/wp-content/themes/<テーマ名>/archive.php

STEP2. テンプレートファイルにアクセスできる様にする

STEP2. テンプレートファイルにアクセスできる様にする



続けて、用意したテンプレートファイルにアクセスできる様にする設定を行います。



また今回は”WEBサイト型”のWordPressテーマ制作で役立つTOPページとは別に記事の一覧ページを作成する方法を紹介します。



具体的には次のURLで「一覧ページ」にアクセス出来る様にしてゆきます。

▼一覧ページのURL
http://localhost:80/blog/
※ドメイン部分は作業中の環境に置き変えて下さい

パーマリンクを設定する

まずはパーマリンクの設定を行います。パーマリンクとはWEBページ毎に設定されるURLのことですが、WordPressでは「設定⇒パーマリンク設定」でURLのフォーマットが変更できます。



今回は、パーマリンクに「投稿名」を設定した状態を前提として解説をすすめてゆきます。



WordPressのパーマリンク設定

サイトの構造を検索エンジンに適切に伝えることができる、SEO対策にも効果があるとされるおススメの設定です!
今回の内容ではパーマリンク初期設定の「日付と投稿名」でもOKですが、設定によっては「/blog/」で一覧ページにアクセス出来なくなりますのでご注意ください。

「functions.php」にコードを追加する

一覧ページのテンプレートファイル「archive.php」にアクセスできる様にするために「functions.php」に次のコードを追加します。



▼PHPコード

// 投稿のアーカイブページを作成する
function post_has_archive($args, $post_type)
{
    if ('post' == $post_type) {
        $args['rewrite'] = true; // リライトを有効にする
        $args['has_archive'] = 'blog'; // 任意のスラッグ名
    }
    return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);
archive.phpのデフォルト状態では、単純な記事の一覧を表示することが出来ない仕様となっているため、上記のコードでカスタマイズする必要があります。また”任意のスラッグ名"とコメントされた行の内容を変えれば「/blog/」以外のURLでアクセスできる様にすることも出来ます。

以上2つの作業が完了したら、次のステップに進みましょう。

STEP3.テンプレートファイルにHTMLを移設する

テンプレートファイルにHTMLを移設する



テンプレートファイルの作成ができたら、続けてファイル内に一覧ページ用のHTMLファイルを移設してゆきます。

HTMLを移設する方法は?【最初はコピペでOK】

テンプレートファイルにHTMLを移設する方法ですが、基本的には対象とするページのHTMLファイルの内容をそのままコピペすればOKです。



HTMLの移設イメージ

HTMLの移設イメージ

細かなコーディングは後ほど行います。ひとまずページの下地になるHTMLを貼り付けてしまいましょう!

WEBブラウザでページの状態を確認する

ここで一度、WEBブラウザでページの状態を確認してみましょう。「一覧ページ」には次のURLでアクセス出来ます。

▼テンプレートファイルのURL
http://localhost:80/blog/
※ドメイン部分は作業中の環境に置き変えて下さい

実際にアクセスしたWEBページの状態は次の様になります。



一覧ページにアクセスした状態

一覧ページにアクセスした状態

この時点では、あくまでHTMLを貼り付けただけの状態でページが表示されます。表示崩れや画像のリンク切れが起きていると思いますが、いずれも次の作業で改善できます。
ページを動作させるためにも、引き続き作業を進めてゆきましょう!

STEP.3 テンプレートファイルを編集する

STEP.2 テンプレートファイルを編集する



ここからは、テンプレートファイルを「一覧ページ」として動作させるために、PHPのコードを追加してゆきます。

ページの表示崩れの改善をする

まずはページの表示崩れの改善をするために、追加したテンプレートファイルに次のPHPコードを埋め込んでゆきましょう。



▼PHPコード

  • get_header()・・・ヘッダー部分(header.php)の内容を呼び出す。HTML上部のヘッダー部分をこの関数に置き換える。
  • get_footer()・・・フッター部分(footer.php)の内容を呼び出す。HTML下部のヘッダー部分をこの関数に置き換える。
  • get_stylesheet_directory_uri()・・・テーマ内のディレクトリを参照する関数。HTML内の画像パスに追加する。



いずれもテンプレートファイル作成における基本作業ですので、ここでの細かな解説は省略します。

ここまで行うと、CSS・JavaScript・画像のパスが正しく通り、追加したテンプレートファイルの表示崩れが改善できると思います。

これらの作業を知っている・すでに済ませてある。といった方は次の作業に進みましょう。よく分からない・デザイン崩れが改善しない場合はつぎの記事が参考になります。

記事の一覧を表示するPHPコードを追加する

続けて「投稿」で作成した記事を一覧表示するPHPコードを埋め込んでゆきましょう。今回のサンプルにPHPコード追加すると次のようになります。



▼PHPコード

<?php // ブログの一覧を表示する start ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article class="blog-list__list-item">
        <a href="<?php the_permalink(); ?>" class="blog-item">
            <?php // アイキャッチを表示させる start ?>    
            <div class="blog-item__thumbnail">
                <?php if(has_post_thumbnail()): ?>
                <img class="blog-item__thumbnail-image" src="<?php the_post_thumbnail_url('large'); ?>">
                <?php endif; ?>
            </div>
            <?php // アイキャッチを表示させる end ?>
            <div class="blog-item__content">
                <?php // タイトルを表示させる start ?>
                <h3 class="blog-item__title"><?php the_title(); ?></h3>
                <?php // タイトルを表示させる end ?>
                <?php // 抜粋を表示させる start ?>
                <h3 class="blog-item__read"><?php the_excerpt(); ?></h3>
                <?php // 抜粋を表示させる end ?>
                <div class="blog-item__button">
                    <span class="blog-item__button-more">記事を読む</span>
                </div>
            </div>
        </a>
    </article>
<?php endwhile; endif; ?>
<?php // ブログの一覧を表示する end ?>
結論として、上記を参考にテンプレートファイルにPHPコードを組み込んでゆけば「一覧ページ」が実装できます。
引き続き、PHPコードの詳しい解説をしてゆきます!

PHPコードの詳しい解説

PHPコードの詳しい解説



ここからは、先に紹介したPHPコードの詳しい解説をしてゆきます。

記事を表示させるループ処理について

記事の情報をあつかう「一覧ページ」や「投稿ページ」では、基本的には「have_posts()」関数でループを回して、ループ内で記事の内容を表示する処理を実行します。



▼ループ処理のPHPコード

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

    :この中でループ処理を行う

<?php endwhile; endif; ?>



ループ処理についてですが、最初のif文で「have_posts()」関数を実行して「ページ内で表示する記事があるか?」の確認行います。記事がある場合は次のwhile文に処理を進めます。



while文では再び「have_posts()」関数を実行して存在する記事の分だけループ処理を行います。また、「the_post()」関数で1記事分の情報をループ内にセットしています。

WordPressのデータベースから取得した記事データを表示するための基本形とも言える処理です。一覧ページ・投稿ページなどの違いを問わず、基本的には同じ方法で実装できます。

記事のリンクを表示させる方法

一覧表示では、投稿ページに遷移させるためのリンクを出力する必要があると思いますが、リンクの部分は次のPHPコードで実装しています。



▼リンクのPHPコード

<a href="<?php the_permalink(); ?>" class="blog-item">

    :ここにリンクの内容を記述する

</a>
WordPressの「the_permalink()」関数を使用すると、ループ内で扱っている投稿ページのURL(パーマリンク)が取得できます。上記では<a>タグのhref要素内に埋め込めむ形でリンクを実装しています。

▼Codex日本語版

テンプレートタグ/the permalink

記事の「タイトル」を表示させる方法

タイトルの表示部分は次のPHPコードで実装できます。



▼タイトルを表示させるPHPコード

<?php // タイトルを表示させる start ?>
<h3 class="blog-item__title"><?php the_title(); ?></h3>
<?php // タイトルを表示させる end ?>



WordPressの「the_title()」関数を使用すると、ループ内に設定された記事のタイトルが出力できます。



▼Codex日本語版

テンプレートタグ/the title

記事の「アイキャッチ」を表示させる方法

アイキャッチ(サムネイル画像)の表示部分は、次のPHPコードで実装できます。



▼アイキャッチを表示させるPHPコード

<?php // アイキャッチを表示させる start ?>    
<div class="blog-item__thumbnail">
    <?php if(has_post_thumbnail()): ?>
    <img class="blog-item__thumbnail-image" src="<?php the_post_thumbnail_url('large'); ?>">
    <?php endif; ?>
</div>
<?php // アイキャッチを表示させる end ?>



WordPressの「has_post_thumbnail()」関数を使用すると「その記事にアイキャッチが登録されているか?」をチェックできます。



また「the_post_thumbnail_url()」関数を使用するとアイキャッチ画像のURLが取得できるので、<img>タグのsrc属性に埋め込むことで画像が出力できます。

結果として「その記事にアイキャッチが登録されている場合のみ、画像を表示させる」といった様に動作します。

▼Codex日本語版

関数リファレンス/has post thumbnail


▼WordPress|Code Reference

the_post_thumbnail_url()

記事の「抜粋」の表示について

抜粋の表示部分は次のPHPコードで実装しています。



▼抜粋を表示させるPHPコード

<?php // 抜粋を表示させる start ?>
<h3 class="blog-item__read"><?php the_excerpt(); ?></h3>
<?php // 抜粋を表示させる end ?>



WordPressの「the_excerpt()」関数を使用すると、ループ内に設定された記事の抜粋が出力できます。



▼Codex日本語版

テンプレートタグ/the excerpt

この記事のまとめ

今回は、WordPressのテーマ制作における「一覧ページ(archive.php)」の作り方を解説してゆきました。



▼一覧ページの作り方

  1. 一覧ページのテンプレートファイル(archive.php)を作成する
  2. テンプレートファイルにアクセスできる様にする
  3. テンプレートファイルにHTMLを移設する
  4. テンプレートファイルを編集する



オリジナルテーマを自作する際には、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WordPressの情報を多く掲載しています。あわせてご活用ください。



WordPressの記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事