2026年7月11日

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

カスタマイズ

はじめに

WordPressを使用していると、サイトのアーカイブページを独自のデザインや機能でカスタマイズしたいと思うことがあります。この記事では、WordPressのデフォルトのアーカイブページをカスタマイズするための方法を紹介します。

症状・背景

アーカイブページがサイト全体の統一感から外れている
ユーザーにとって使いやすいアーカイブページを作りたい
特定のカテゴリーの表示をカスタマイズしたい
月別や年別の投稿アーカイブに独自デザインを適用したい

手順・設定方法

ステップ1: アーカイブテンプレートを使用してカスタムデザインを作成する

# WordPressテーマディレクトリに移動します。
cd wp-content/themes/your-theme-name/

# archive.phpファイルをコピーしてカスタマイズ用の新規ファイルを作ります。
cp archive.php custom-archive.php

# custom-archive.phpを開き、テンプレートを編集します。
nano custom-archive.php

ステップ2: アーカイブページに独自のスタイルシートを適用する

# 新しいスタイルシート（custom-styles.css）を作成します。
touch wp-content/themes/your-theme-name/custom-styles.css

# 新しいスタイルシートを開き、カスタムCSSルールを追加します。
nano wp-content/themes/your-theme-name/custom-styles.css

# functions.phpに以下のコードを追加してスタイルシートを呼び出します。
add_action( 'wp_enqueue_scripts', 'enqueue_custom_archive_styles' );
function enqueue_custom_archive_styles() {
    if ( is_post_type_archive('custom-post-type') || is_category('category-slug') ) {
        wp_enqueue_style( 'custom-archive-styles', get_template_directory_uri() . '/custom-styles.css' );
    }
}

ステップ3: アーカイブページのカスタムフックを使用する

# functions.phpに以下のコードを追加して、アーカイブページで特定のフックを使用します。
add_action( 'archive_custom_hook', 'custom_archive_function' );
function custom_archive_function() {
    echo '<div class="custom-archive-hook">カスタムコンテンツ</div>';
}

# アーカイブテンプレート（custom-archive.php）に以下のコードを追加して、フックを呼び出します。
do_action( 'archive_custom_hook' );

ステップ4: メタデータや関連情報を表示する

# custom-archive.phpを開き、必要なメタデータや関連情報を取得して表示します。
while ( have_posts() ) : the_post();
    $custom_meta_value = get_post_meta( get_the_ID(), 'custom-meta-key', true );
    echo '<p>カスタムメタ情報: ' . esc_html($custom_meta_value) . '</p>';
endwhile;

注意事項

カスタマイズを行う前にテーマのバックアップを取ること
テーマが更新された場合、カスタムコードは上書きされる可能性があるため注意が必要
セキュリティ上の考慮点として、ユーザー生成コンテンツに対するエスケープ処理を行うこと
パフォーマンスを最適化するために、必要最小限のクエリのみを使用すること

まとめ

1. アーカイブテンプレート: アーカイブページに独自デザインを適用するためには、archive.phpファイルをカスタマイズまたはオーバーライドします。

2. カスタムスタイルシート: デフォルトのスタイルを上書きせずに独自のカスタムCSSを使用することができます。

3. フックの使用: アーカイブページで特定のコンテンツや機能を追加するためには、WordPressのフックを利用します。

4. メタデータと関連情報: 投稿やページに関連する詳細情報を表示するために、get_post_meta関数を使用します。

Post Views: 16