WordPressでは、投稿や固定ページ、カスタムポストタイプなど、異なるページに応じてヘッダーファイルを切り替えることが可能です。この記事では、特定の条件に基づいてヘッダーを変更する手順を分かりやすく解説します。
1. ヘッダーファイルを作成する
まず、変更したいヘッダーファイルをテーマフォルダ内に作成します。
- テーマディレクトリに「
header-{slug}.php
」形式でファイルを追加- 例:
header-post.php
、header-page.php
、header-custom.php
- 例:
- 作成したファイルに、特定のデザインや機能を反映させた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. カスタムヘッダーを作成して確認する
- 必要なカスタムヘッダーファイルを作成します。
- 例:
header-post.php
<header> <h1>投稿ページ専用のヘッダー</h1> </header>
- 例:
header.php
に条件分岐を追加した後、ブラウザで各ページを開いて正しく切り替わっているか確認してください。
5. 注意点と補足
- キャッシュのクリア
- 条件分岐を追加した後は、キャッシュプラグインを使用している場合、キャッシュをクリアしてください。
- テンプレート階層を理解する
- WordPressのテンプレート階層を理解しておくと、条件分岐の設計がスムーズになります。
- カスタムフィールドとの連携
- Advanced Custom Fields(ACF)などを使用して、カスタムフィールドを基にヘッダーを切り替えることも可能です。
これらの手順を参考に、下層ページごとに異なるヘッダーを実装してみてください。柔軟にカスタマイズすることで、サイトの個性を引き出すデザインが実現します。