WordPressの下層ページでヘッダーを変更する方法 | 【福岡】LP・ランディングページ・ホームページ制作|セルピー

WordPressの下層ページでヘッダーを変更する方法

WordPressでは、投稿や固定ページ、カスタムポストタイプなど、異なるページに応じてヘッダーファイルを切り替えることが可能です。この記事では、特定の条件に基づいてヘッダーを変更する手順を分かりやすく解説します。


1. ヘッダーファイルを作成する

まず、変更したいヘッダーファイルをテーマフォルダ内に作成します。

  1. テーマディレクトリに「header-{slug}.php」形式でファイルを追加
    • 例:header-post.phpheader-page.phpheader-custom.php
  2. 作成したファイルに、特定のデザインや機能を反映させたHTMLやPHPコードを記述します。

2. header.phpに条件分岐を追加する

WordPressのデフォルトのヘッダーを管理しているheader.phpに条件分岐を追加して、適切なヘッダーファイルを読み込むように設定します。

<?php
if (is_singular('post')) {
    get_header('post'); // 投稿ページ用のheader-post.phpを読み込む
} elseif (is_page()) {
    get_header('page'); // 固定ページ用のheader-page.phpを読み込む
} else {
    get_header(); // デフォルトのheader.phpを読み込む
}
?>

3. 条件分岐を拡張する

カスタムポストタイプやカテゴリ、カスタムテンプレートなど、さらに細かい条件でヘッダーを切り替える場合も、header.phpに条件分岐を追加することで対応可能です。

<?php
if (is_singular('post') && in_category('news')) {
    get_header('news'); // カテゴリ「news」の投稿用
} elseif (is_singular('post')) {
    get_header('post'); // 投稿ページ用
} elseif (is_page_template('custom-template.php')) {
    get_header('custom'); // カスタムテンプレート用
} else {
    get_header();
}
?>

4. カスタムヘッダーを作成して確認する

  1. 必要なカスタムヘッダーファイルを作成します。
    • 例:header-post.php<header> <h1>投稿ページ専用のヘッダー</h1> </header>
  2. header.phpに条件分岐を追加した後、ブラウザで各ページを開いて正しく切り替わっているか確認してください。

5. 注意点と補足

  • キャッシュのクリア
    • 条件分岐を追加した後は、キャッシュプラグインを使用している場合、キャッシュをクリアしてください。
  • テンプレート階層を理解する
    • WordPressのテンプレート階層を理解しておくと、条件分岐の設計がスムーズになります。
  • カスタムフィールドとの連携
    • Advanced Custom Fields(ACF)などを使用して、カスタムフィールドを基にヘッダーを切り替えることも可能です。

これらの手順を参考に、下層ページごとに異なるヘッダーを実装してみてください。柔軟にカスタマイズすることで、サイトの個性を引き出すデザインが実現します。