2026年5月20日

WordPressのアーカイブページをカスタマイズする方法

テーマ・デザイン

はじめに

WordPressのアーカイブページ（カテゴリー・タグ・日付・著者）は archive.php テンプレートで制御します。pre_get_posts で表示件数・並び順を変更でき、get_the_archive_title() でアーカイブタイトルをカスタマイズできます。

症状・原因

アーカイブページのデザインを変更したい
カテゴリーページの表示件数を変えたい
アーカイブタイトルの「カテゴリー:」というプレフィックスを削除したい
カスタム投稿タイプのアーカイブを有効にしたい

解決手順

ステップ1：アーカイブテンプレートの階層を理解する

WordPressテンプレート階層（優先度高い順）:

カテゴリーアーカイブ:
  category-{slug}.php → category-{id}.php → category.php → archive.php → index.php

タグアーカイブ:
  tag-{slug}.php → tag-{id}.php → tag.php → archive.php → index.php

カスタム分類アーカイブ:
  taxonomy-{tax}-{term}.php → taxonomy-{tax}.php → taxonomy.php → archive.php

著者アーカイブ:
  author-{nicename}.php → author-{id}.php → author.php → archive.php

日付アーカイブ:
  date.php → archive.php → index.php

ステップ2：archive.phpの基本構造を作成する

<?php
// wp-content/themes/my-child-theme/archive.php
get_header();
?>
<main class="archive-page">
    <header class="archive-header">
        <h1 class="archive-title"><?php the_archive_title(); ?></h1>
        <?php the_archive_description('<div class="archive-description">', '</div>'); ?>
    </header>

    <div class="posts-grid">
        <?php if (have_posts()): ?>
            <?php while (have_posts()): the_post(); ?>
                <article class="post-card">
                    <?php if (has_post_thumbnail()): ?>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('medium'); ?>
                        </a>
                    <?php endif; ?>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <time><?php echo get_the_date(); ?></time>
                    <?php the_excerpt(); ?>
                </article>
            <?php endwhile; ?>
            <?php the_posts_pagination(['mid_size' => 2]); ?>
        <?php else: ?>
            <p>記事が見つかりませんでした。</p>
        <?php endif; ?>
    </div>
</main>
<?php get_sidebar(); get_footer(); ?>

ステップ3：アーカイブタイトルからプレフィックスを削除する

// functions.php — 「カテゴリー:」などのプレフィックスを削除
add_filter('get_the_archive_title', function(string $title): string {
    if (is_category()) {
        return single_cat_title('', false);
    } elseif (is_tag()) {
        return single_tag_title('', false);
    } elseif (is_tax()) {
        return single_term_title('', false);
    } elseif (is_author()) {
        return get_the_author();
    } elseif (is_year()) {
        return get_the_date('Y年');
    } elseif (is_month()) {
        return get_the_date('Y年n月');
    }
    return $title;
});

ステップ4：pre_get_postsでアーカイブをカスタマイズする

// functions.php
add_action('pre_get_posts', function(WP_Query $query): void {
    if (is_admin() || !$query->is_main_query()) return;

    // カテゴリーアーカイブの表示件数を変更
    if ($query->is_category()) {
        $query->set('posts_per_page', 12);
        $query->set('orderby', 'date');
        $query->set('order', 'DESC');
    }

    // タグアーカイブも同様
    if ($query->is_tag()) {
        $query->set('posts_per_page', 12);
    }

    // 著者アーカイブで特定の投稿タイプのみ表示
    if ($query->is_author()) {
        $query->set('post_type', ['post']);
    }
});

ステップ5：カスタム投稿タイプのアーカイブを有効にする

// functions.php — カスタム投稿タイプにアーカイブを追加
add_action('init', function(): void {
    register_post_type('news', [
        'label'       => 'ニュース',
        'public'      => true,
        'has_archive' => true,          // アーカイブを有効化
        'rewrite'     => ['slug' => 'news'],
        'show_in_rest'=> true,
    ]);
});

# カスタム投稿タイプのアーカイブURLを確認
wp eval "echo get_post_type_archive_link('news') . PHP_EOL;"

# パーマリンクを更新（アーカイブ追加後は必須）
wp rewrite flush --hard

# アーカイブの設定を確認
wp post-type get news --fields=has_archive --format=table

ステップ6：アーカイブページのCSSを調整する

/* グリッドレイアウト */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.post-card:hover {
    transform: translateY(-4px);
}

.post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.archive-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

注意事項

テンプレート階層を活用すると、特定のカテゴリーだけ異なるレイアウトを使うことができます（category-{slug}.php）
has_archive => true を設定したカスタム投稿タイプは wp rewrite flush を実行しないとアーカイブページが404になります
the_archive_description() はカテゴリーの説明文を表示します。管理画面でカテゴリーの説明を入力しておく必要があります

まとめ

アーカイブページは archive.php でデザインし、pre_get_posts で表示件数・並び順を制御します。get_the_archive_title フィルターでプレフィックスを削除し、カスタム投稿タイプには has_archive => true を設定して wp rewrite flush を実行してください。

Post Views: 13