WordPressで投稿やカスタム投稿タイプを一覧表示するためのテンプレートを作成すると、ユーザーにとって見やすく便利なページが構築できます。また、SEO対策としても効果的で、検索エンジンからの評価を高めることが可能です。この記事では、一覧ページテンプレートの作成手順を、具体的なソースコードとともに詳しく解説します。初心者でもわかりやすいよう、各ステップを丁寧に説明しますので、ぜひ参考にしてください。
一覧ページテンプレートとは？
一覧ページテンプレートは、WordPressサイトで複数の投稿やカスタム投稿タイプをリスト形式で表示するための専用テンプレートです。このテンプレートを利用することで、投稿や記事の一覧を簡単に整えることができます。
主な活用例
• ブログ投稿一覧ページ
• カスタム投稿タイプ（例：作品集、ポートフォリオ、イベント一覧）の表示
• 商品カタログや製品リスト
SEO的なメリット
• 構造化されたデータにより、検索エンジンがページ内容を正確に理解しやすくなります。
• サイト内の回遊性を向上させ、直帰率を低減します。
• 適切なメタ情報とコンテンツを配置することで、検索順位の向上を期待できます。
一覧ページは単なるコンテンツのリストではなく、ユーザーエクスペリエンスを向上させる重要な役割を果たします。
テンプレートファイルの作成方法
一覧ページテンプレートを作成するための最初のステップは、新しいテンプレートファイルを用意することです。以下の手順に従ってください。
1. テーマフォルダにアクセス
WordPressテーマは次のディレクトリに保存されています。
wp-content/themes/your-theme-name/
ここにアクセスして、新しいテンプレートファイルを作成します。
2. 新しいテンプレートファイルを作成
投稿一覧用には「archive.php」、カスタム投稿タイプには「archive-{post_type}.php」という形式でファイルを作成します。
例：カスタム投稿タイプ「works」の場合
archive-works.phpという名前で新しいファイルを作成します。このファイルにコードを追加していきます。
投稿を一覧表示するためのループ処理
次に、テンプレートファイルにループ処理を追加します。ループ処理は、WordPressで投稿やカスタム投稿タイプを表示するための基本的な仕組みです。
基本的なループ処理のコード例：
<?php
get_header(); // ヘッダーを読み込みます
?>
<div class="post-list">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article class="post-item">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
</div>
<?php endif; ?>
<div class="post-excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</div>
<?php
get_footer(); // フッターを読み込みます
?>コードのポイント
• get_header() と get_footer() でテーマのヘッダーとフッターを読み込みます。
• the_title() で投稿のタイトルを表示し、the_permalink() でリンクを設定します。
• has_post_thumbnail() と the_post_thumbnail() でサムネイル画像を表示します。
• the_excerpt() で投稿の抜粋を表示します。
HTMLとCSSで一覧ページを美しく整形
一覧ページを見栄えよくするために、HTMLの構造を整理し、CSSを追加してデザインを調整します。
HTML出力の例：
ループ処理を通じて出力されるHTMLの例は以下のようになります。
<div class="post-list">
<article class="post-item">
<h2><a href="sample-post-link">投稿タイトル1</a></h2>
<div class="post-thumbnail">
<a href="sample-post-link"><img src="sample-image.jpg" alt="サムネイル"></a>
</div>
<div class="post-excerpt">投稿の抜粋がここに表示されます。</div>
</article>
<!-- 他の投稿も同様に表示されます -->
</div>
CSSの例：
.post-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.post-item {
width: 30%;
background: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post-thumbnail img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.post-excerpt {
font-size: 1rem;
color: #555;
}ページネーションの追加で使いやすさを向上
投稿数が多い場合、ページネーションを追加することでユーザーは簡単に次のページに移動できます。以下はページネーションを実装するためのコードです。
ページネーションのコード：
<div class="pagination">
<?php
echo paginate_links(array(
'total' => $wp_query->max_num_pages,
'current' => max(1, get_query_var('paged')),
'prev_text' => '« 前へ',
'next_text' => '次へ »',
));
?>
</div>
CSSスタイル：
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination a, .pagination span {
display: inline-block;
margin: 0 5px;
padding: 8px 12px;
background: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 3px;
}
.pagination a:hover {
background: #005177;
}カスタム投稿タイプの登録方法
カスタム投稿タイプを使用する場合は、functions.phpに以下のコードを追加します。これにより、カスタム投稿タイプとアーカイブページが設定されます。
カスタム投稿タイプの登録コード：
add_action('init', 'create_custom_post_type');
function create_custom_post_type() {
register_post_type('works', // 投稿タイプスラッグ
array(
'labels' => array(
'name' => __('Works'),
'singular_name' => __('Work')
),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
)
);
}まとめ
WordPressで一覧ページテンプレートを作成することで、投稿やカスタム投稿タイプを効率的に管理し、美しく表示することが可能になります。また、SEO効果やユーザーエクスペリエンスの向上も期待できます。本記事の手順を参考に、自分のサイトに最適な一覧ページを作成し、訪問者にとって魅力的なサイトを構築してみてください。