MENU

get_header()

get_header は、WordPress のテーマファイル内でヘッダー部分のテンプレート(通常は header.php)を読み込むためのテンプレートタグです。このタグを使うことで、ヘッダー部分のデザインや構成を他のテンプレートファイル(例: index.php, single.php, page.php など)に共通で適用できます。

目次

機能の説明

基本的に WordPress テーマの全ページに共通するヘッダー部分(ナビゲーションバー、ロゴ、メニューなど)を一箇所にまとめ、再利用するためのものです。

使い方の解説

get_header を使うことで、ページごとに異なるヘッダー部分を個別にコーディングする手間が省けます。通常、header.php 内には以下の要素が含まれます。

  • DOCTYPE宣言やHTMLタグの開始
  • WordPressのヘッダー情報(wp_head()を含む)
  • サイトのロゴやナビゲーションバー
  • グローバルメニュー

また、get_header は引数を取ることができ、カスタムヘッダーを読み込むために役立ちます。例えば、特定のページや投稿タイプで異なるヘッダーを使いたい場合、get_header('custom') とすることで header-custom.php というファイルを読み込むことができます。

使用例

基本的な使い方(デフォルトのヘッダー)

header.php を呼び出して、ヘッダー部分を読み込みます。通常は、index.php, single.php, page.php などのテンプレートファイル内で使用されます。

<?php get_header(); ?>

カスタムヘッダーを読み込む例

header-custom.php というファイルを読み込みます。例えば、特定のページや投稿タイプでヘッダーレイアウトを変更したい場合に使います。header-custom.phpwp-content/themes/your-theme/ ディレクトリに配置されている必要があります。

<?php get_header('custom'); ?>

一緒に使うことが多い関連タグ

get_footer()

ページのフッター部分を読み込むためのタグ。footer.php を呼び出して、ヘッダー同様、共通部分としてフッターを管理します。

使用例

ページの冒頭で get_header() を使い、ページの終了時に get_footer() を使ってフッターを読み込みます。これにより、全ページで統一感のあるデザインが維持できます。

<?php
get_header();  // ヘッダーを読み込み
?>

<!-- ページのコンテンツ部分 -->
<div class="content">
    <h1><?php the_title(); ?></h1>
    <p><?php the_content(); ?></p>
</div>

<?php
get_footer();  // フッターを読み込み
?>

get_sidebar()

サイドバー部分を読み込むためのタグ。sidebar.php を呼び出して、サイドバーのデザインや内容を共通化します。

wp_head()

ヘッダー内にWordPressが必要とするスクリプトやメタ情報を挿入する関数で、header.php の中で必ず呼び出されるべきものです。テーマの機能性に影響するため、header.php 内に忘れずに追加する必要があります。

wp_head() を使った header.php の例

wp_head() header.php<head> タグ内で使用され、テーマに必要なスクリプトやスタイルシートが正しく挿入されるようにします。また、body_class()<body> タグにクラスを追加し、ページごとのスタイルを設定することが可能です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <?php wp_head(); // WordPressのヘッダーに必要な情報を追加 ?>
</head>

<body <?php body_class(); ?>>

    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
        </nav>
    </header>

body_class()

<body> タグ内に追加して、現在表示しているページや条件に応じたクラスを自動的に付与する関数です。これにより、特定のページに対してカスタムCSSを簡単に適用することができます。

get_template_part()

ヘッダーの一部を get_template_part() を使って分割し、管理しやすくすることも可能です。

<?php get_template_part('template-parts/header', 'custom'); ?>

追加情報で取得したい場合

現在使用中のヘッダーファイルを取得する

現在使用されているテンプレートファイルを確認するには、get_template_part()debug_backtrace() を使う方法があります。

<?php
global $template;
echo basename($template);
?>

使用する事で想定されるトラブル

header.php が存在しないエラー

テーマ内に header.php ファイルが存在しない場合、get_header() がエラーを引き起こす可能性があります。この場合、正しいテーマディレクトリに header.php を作成する必要があります。

wp_head() の呼び出し忘れ

wp_head()header.php で呼び出していないと、WordPressプラグインやテーマの重要なスクリプト、メタタグ、CSSが正しく動作しない場合があります。

カスタムヘッダーが読み込まれない

get_header('custom') を使用した場合に、header-custom.php が正しい場所(テーマディレクトリ)に存在しないと、標準の header.php が読み込まれてしまう可能性があります。

ページ固有のスタイルやスクリプトの不具合

body_class() が適切に使われていないと、特定のページで正しいスタイルやスクリプトが適用されないことがあります。

Q&A

get_header() はどこで使うべきですか?

get_header() は通常、WordPressテーマのテンプレートファイル(index.php, single.php, page.php, archive.php など)の冒頭に使われます。これにより、サイト全体で一貫したヘッダーデザインを適用できます。

ページごとに異なるヘッダーを表示したい場合はどうすれば良いですか?

ページごとに異なるヘッダーを表示したい場合、get_header() の引数を使ってカスタムヘッダーを作成できます。例えば、特定のページで get_header('custom') を使用することで、header-custom.php を呼び出すことができます。

wp_head() を使わないとどうなりますか?

wp_head() を使わないと、プラグインやテーマが必要とするJavaScript、CSS、メタ情報がヘッダーに追加されません。これにより、ページのスタイルや機能が正しく表示されない可能性があります。

ヘッダーに動的な内容を追加したい場合はどうすれば良いですか?

ヘッダー内で wp_nav_menu() を使ってナビゲーションメニューを追加したり、bloginfo()the_custom_logo() を使ってサイトの情報やロゴを表示することができます。また、header.php にPHPコードを記述することで、動的なコンテンツを表示できます。

ヘッダーを条件分岐で切り替えられますか?

is_page() などを使って特定のページで異なるヘッダーを読み込めます。

if (is_page('about')) {
    get_header('about');
} else {
    get_header();
}

まとめ

get_header() は WordPress テーマ開発の基本的なテンプレートタグで、全ページに共通するヘッダーを読み込むために使われます。カスタマイズや動的な内容の追加が容易であり、特定の条件下で異なるヘッダーを読み込むことも可能です。 wp_head() get_footer() などと組み合わせて、ページ全体の統一感を維持しながら、柔軟なレイアウトを構築するための重要なタグです。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.

目次