【自作サイト制作入門03】WordPressで使う category.php、tag.php、single.phpすぐに使えるコード紹介「コピペでOK」

WordPressは柔軟でパワフルなテーマ構築システムを提供しており、その中でも特に重要なファイルがcategory.php、tag.php、そしてsingle.phpです。これらのテンプレートファイルは、カテゴリーページ、タグページ、そしてシングル（個別の投稿）ページの表示を管理しています。本記事では、これらのファイルの基本的な構造と役割について、具体的なコード例を交えながら解説します。

`category.php`: カテゴリーページのテンプレート

役割と基本構造

category.phpは、特定のカテゴリーに属する投稿一覧を表示するためのテンプレートファイルです。ユーザーがカテゴリーをクリックした際に表示されるページを制御します。

基本的な構造

以下に、シンプルなcategory.phpのサンプルコードを示します。

<?php get_header(); ?>

<main id="category">
    <header class="archive-header">
        <h1 class="archive-title">
            <?php single_cat_title(); ?> <!-- カテゴリー名を表示 -->
        </h1>
        <div class="archive-description">
            <?php echo category_description(); ?> <!-- カテゴリーの説明を表示 -->
        </div>
    </header>

    <?php if (have_posts()) : ?>
        <div class="post-list">
            <?php while (have_posts()) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="post-meta">
                        <span class="post-date"><?php the_time('Y年m月d日'); ?></span>
                        <span class="post-author"><?php the_author(); ?></span>
                    </div>
                    <div class="post-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        </div>
        <div class="pagination">
            <?php the_posts_pagination(); ?> <!-- ページネーションを表示 -->
        </div>
    <?php else : ?>
        <p>このカテゴリーにはまだ投稿がありません。</p>
    <?php endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

解説

get_header() と get_footer():
- get_header()はヘッダー部分のテンプレートを呼び出します。header.phpが挿入されます。同様に、get_footer()はフッター部分を呼び出します。
single_cat_title():
- 現在表示しているカテゴリーの名前を出力します。これにより、カテゴリーごとに異なるタイトルを表示できます。
category_description():
- カテゴリーに設定された説明文を表示します。これは、カテゴリーの管理画面で設定することができます。
have_posts() と the_post():
- have_posts()は、表示する投稿があるかどうかをチェックし、the_post()は投稿データを取得します。これらをループ内で使うことで、複数の投稿をリスト形式で表示できます。
the_posts_pagination():
- 複数ページにわたる投稿リストがある場合に、ページナビゲーションを表示します。

`tag.php`: タグページのテンプレート

役割と基本構造

tag.phpは、特定のタグに関連する投稿一覧を表示するためのテンプレートです。ユーザーがタグをクリックした際に表示されるページを制御します。category.phpと似た構造を持っていますが、タグに関連する情報を扱います。

基本的な構造

以下に、シンプルなtag.phpのサンプルコードを示します。

<?php get_header(); ?>

<main id="tag">
    <header class="archive-header">
        <h1 class="archive-title">
            タグ: <?php single_tag_title(); ?> <!-- タグ名を表示 -->
        </h1>
        <div class="archive-description">
            <?php echo tag_description(); ?> <!-- タグの説明を表示 -->
        </div>
    </header>

    <?php if (have_posts()) : ?>
        <div class="post-list">
            <?php while (have_posts()) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="post-meta">
                        <span class="post-date"><?php the_time('Y年m月d日'); ?></span>
                        <span class="post-author"><?php the_author(); ?></span>
                    </div>
                    <div class="post-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        </div>
        <div class="pagination">
            <?php the_posts_pagination(); ?> <!-- ページネーションを表示 -->
        </div>
    <?php else : ?>
        <p>このタグにはまだ投稿がありません。</p>
    <?php endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

解説

single_tag_title():
- 現在表示しているタグの名前を出力します。これにより、タグごとに異なるタイトルを表示できます。
tag_description():
- タグに設定された説明文を表示します。カテゴリーと同様、タグの管理画面で設定することができます。
その他:
- 基本的にはcategory.phpと同様の構造ですが、タグに関連する投稿を表示するためのテンプレートです。

`single.php`: 個別投稿ページのテンプレート

役割と基本構造

single.phpは、個別の投稿ページを表示するためのテンプレートファイルです。ユーザーが投稿のタイトルをクリックした際に、その投稿の内容を表示します。

基本的な構造

以下に、シンプルなsingle.phpのサンプルコードを示します。

<?php get_header(); ?>

<main id="single">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="post-header">
                <h1 class="post-title"><?php the_title(); ?></h1> <!-- 投稿タイトルを表示 -->
                <div class="post-meta">
                    <span class="post-date"><?php the_time('Y年m月d日'); ?></span>
                    <span class="post-author"><?php the_author(); ?></span>
                    <span class="post-category"><?php the_category(', '); ?></span>
                    <span class="post-tags"><?php the_tags('', ', '); ?></span>
                </div>
            </header>
            <div class="post-content">
                <?php the_content(); ?> <!-- 投稿内容を表示 -->
            </div>
            <footer class="post-footer">
                <nav class="post-navigation">
                    <div class="nav-previous"><?php previous_post_link('%link', '前の記事へ'); ?></div>
                    <div class="nav-next"><?php next_post_link('%link', '次の記事へ'); ?></div>
                </nav>
            </footer>
        </article>
    <?php endwhile; else : ?>
        <p>投稿が見つかりません。</p>
    <?php endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

解説

the_title():
- 投稿のタイトルを表示します。個別ページではタイトルが非常に重要な要素であり、ユーザーが訪問した理由の一部です。
the_content():
- 投稿の内容を表示します。the_content()は投稿の本文全体を出力するための関数です。
previous_post_link() と next_post_link():
- 現在表示している投稿の前後にある投稿へのリンクを表示します。これにより、ユーザーが簡単に他の投稿に移動できます。
the_category() と the_tags():
- 現在の投稿が属するカテゴリーとタグを表示します。これにより、関連する投稿を探しやすくします。

まとめ

category.php、tag.php、そしてsingle.phpは、WordPressテーマの中で重要な役割を果たします。これらのファイルを適切にカスタマイズすることで、訪問者にとって見やすく、使いやすいサイトを構築することができます。各ファイルの役割を理解し、適切なコードを組み込むことで、あなたのWordPressサイトをさらに魅力的にすることができるでしょう。