固定ページを使わずにトップページのヘッダー下にピックアップコンテンツを表示するカスタマイズ
Web制作の現場において、クライアントから「トップページのヘッダー直下に、特定の記事やキャンペーンへの導線を設けたい」という要望は非常に頻繁に発生します。多くのエンジニアは、WordPressの「固定ページ」を作成してテンプレートを割り当てる手法を採りますが、これは管理画面のページ一覧を不必要に肥大化させ、クライアントの運用負荷を高める原因となります。
本記事では、固定ページを一切使用せず、カスタム投稿タイプやWordPressの「投稿」を柔軟に活用し、トップページのヘッダー直下にピックアップコンテンツを動的に表示させる、プロフェッショナルな実装手法を詳細に解説します。
なぜ固定ページを使わない方が良いのか
WordPressの運用において、最も避けるべきは「管理画面の複雑化」です。固定ページは本来、会社概要やプライバシーポリシーなど、階層構造を持つ静的なコンテンツのために存在します。
しかし、ピックアップコンテンツは通常、季節ごとのキャンペーンや注目の新着記事など、定期的に差し替えが発生する流動的なものです。これらを固定ページで作成すると、以下のデメリットが生じます。
1. ページ一覧の可読性が低下する
2. 誤って削除・編集されるリスクが高まる
3. テンプレートファイル（page-slug.phpなど）が量産され、保守性が下がる
これに対し、カスタム投稿タイプやカテゴリー機能を活用した実装を行えば、管理者は「いつもの投稿画面」で更新作業を行うことができ、エンジニアはテーマファイル側で一元管理が可能になります。
実装の全体設計
今回の実装では、以下のステップで進めます。
1. カスタム投稿タイプ「pickup」の定義（または既存のカテゴリー活用）
2. 投稿に「ピックアップ指定」のフラグを持たせる（カスタムフィールドまたはカテゴリー）
3. トップページテンプレート（front-page.php）への出力処理の実装
4. CSSによるレイアウト制御
詳細な実装プロセス
まずは、functions.phpにカスタム投稿タイプを定義し、管理画面からピックアップコンテンツを独立して管理できるようにします。もし既存の「投稿」を使いたい場合は、カスタムタクソノミーで「ピックアップ」という分類を作成するのも有効です。
// functions.php に記載
function register_pickup_post_type() {
register_post_type('pickup', [
'labels' => [
'name' => 'ピックアップ',
'singular_name' => 'ピックアップ',
],
'public' => true,
'has_archive' => false,
'menu_icon' => 'dashicons-star-filled',
'supports' => ['title', 'thumbnail', 'excerpt', 'custom-fields'],
'rewrite' => ['slug' => 'pickup'],
]);
}
add_action('init', 'register_pickup_post_type');
次に、フロントページ（front-page.php）でこのカスタム投稿を取得するWP_Queryを記述します。ここでは、最新の3件を表示する設定にします。
// front-page.php のヘッダー直下
<?php
$args = [
'post_type' => 'pickup',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
];
$pickup_query = new WP_Query($args);
if ($pickup_query->have_posts()) : ?>
<section class="pickup-area">
<div class="container">
<ul class="pickup-list">
<?php while ($pickup_query->have_posts()) : $pickup_query->the_post(); ?>
<li class="pickup-item">
<a href="<?php echo get_post_meta(get_the_ID(), 'link_url', true); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium'); ?>
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</a>
</li>
<?php endwhile; ?>
</ul>
</div>
</section>
<?php endif;
wp_reset_postdata(); ?>
CSSによるスタイリングのポイント
ピックアップエリアは、ユーザーが最初に目にする場所であるため、レスポンシブ対応が必須です。特にモバイル環境では、横並びから縦並びへスムーズに切り替わるFlexboxまたはGridレイアウトを採用します。
.pickup-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
padding: 0;
}
@media (max-width: 768px) {
.pickup-list {
grid-template-columns: 1fr;
}
}
.pickup-item a {
display: block;
text-decoration: none;
transition: opacity 0.3s;
}
.pickup-item a:hover {
opacity: 0.8;
}
実務におけるアドバイス
プロフェッショナルな現場でこの機能を実装する際、以下の3点に注意してください。
1. **キャッシュの考慮**:
ピックアップコンテンツは頻繁に変更される可能性があります。WP_Queryを使用する場合、キャッシュプラグインが正しく動作するように、コンテンツ更新時にキャッシュがクリアされる仕組み（またはキャッシュの除外設定）を検討してください。
2. **リンク先の柔軟性**:
ピックアップコンテンツのリンク先が、必ずしも投稿詳細ページであるとは限りません。外部サイトや他の固定ページに飛ばすケースが多いため、カスタムフィールド（Advanced Custom Fieldsなど）を使用して、「リンク先URL」を入力するフィールドを設けるのがベストプラクティスです。
3. **バリデーションとフォールバック**:
画像が設定されていない場合や、タイトルが空の場合にデザインが崩れないよう、PHP側で条件分岐（if文）を徹底しましょう。また、投稿数が0件の場合にHTMLタグそのものを出力しないように制御することで、DOMツリーを綺麗に保つことができます。
まとめ
固定ページを使わずにトップページのヘッダー下にピックアップコンテンツを実装することは、単に管理画面を整理するだけでなく、サイトの保守性と拡張性を飛躍的に高める手法です。
カスタム投稿タイプを活用することで、クライアントは直感的な操作でキャンペーン情報を更新でき、エンジニアはテーマファイルで一括して表示ロジックを管理できます。このような「運用のしやすさ」まで考慮した設計こそが、プロのWebデザイナー・エンジニアに求められるスキルセットです。
今回紹介したコードをベースに、プロジェクトの要件に合わせてACF（Advanced Custom Fields）での入力項目追加や、スライダーライブラリ（Swiperなど）との連携を行うことで、よりリッチなUIを提供することが可能になります。ぜひ、次回の案件から取り入れてみてください。
コメント