ミルラク

WordPressでヘッダ(header.php)を分割して取り込む

更新日: 2022-06-07

当サイトはアフィリエイト広告を利用しています。

おすすめ

WordPressでテーマを作成してみたい！という方にぴったりな本です。
テーマの概要や構成はもちろん、プラグインやセキュリティ等の運用面まで幅広く紹介されています。
中でも、充実した学習用のサンプルファイルと付録にあるPHPの基礎解説は初心者必見です！
ぜひ一度手に取ってみてください。

［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書
技術評論社
¥3,058 （2022/06/04 15:46時点 | Amazon調べ）
Amazonで見る
Kindleで見る

実行環境

OSmacOS Big Sur 11.6
WordPress5.8

実行環境がない方は、次の記事を参考に構築してください。

[post_link_internal 1368]

WordPressでヘッダ(header.php)を分割して取り込む

今回は、WordPressでヘッダ(header.php)を分割して取り込む方法をご紹介します。

ヘッダを分割して取り込む手順は次のとおりです。

  1. header.phpを作成する
  2. header.phpを取り込む

また、サンプルとして次のようなテーマを使用します。

使用するサンプルテーマ

使用するテーマのディレクトリの構成とファイルは次のとおりです。

Applications/XAMPP/xamppfiles/htdocs/
　├ wordpress
　│　├ wp-admin
　│　├ wp-content
　│　│　└ themes
　│　│　　└ mytheme
　│　│　　  ├ index.php
　│　│　　  └ style.css
　│　├ wp-includes
　│　└ ...
　└ ...
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_enqueue_style( 'style-sanitize', 'https://unpkg.com/sanitize.css' ); ?>
    <?php wp_enqueue_style( 'style-mytheme', get_template_directory_uri() . '/style.css' ); ?>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <header>
      <div class="header-inner"></div>
    </header>
    <div class="content-wrapper">
      <main>
        <div class="main-inner"></div>
      </main>
      <aside>
        <div class="aside-inner"></div>
      </aside>
    </div>
    <footer>
      <div class="footer-inner"></div>
    </footer>
  <?php wp_footer(); ?>
  </body>
</html>
@charset "UTF-8";

/*
Theme Name: MyTheme
Author: ミルラク
Author URI: https://miruraku.com
Description: ミルラクで使用するサンプルテーマです。
Version: 1.0
*/

body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

@media only screen and (min-width: 576px) {
  body {
    max-width: 540px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    max-width: 720px;
  }
}

@media only screen and (min-width: 992px) {
  body {
    max-width: 960px;
  }
}

@media only screen and (min-width: 1200px) {
  body {
    max-width: 1140px;
  }
}

.header-inner {
  background-color: #f06292;
  min-height: 80px;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media only screen and (min-width: 576px) {
  .content-wrapper {
    grid-template-columns: 2fr 1fr;
  }
}

.main-inner {
  background-color: #4db6ac;
  min-height: 480px;
}

.aside-inner {
  background-color: #fff176;
  min-height: 480px;
}

.footer-inner {
  background-color: #7986cb;
  min-height: 80px;
}

header.phpを作成する

はじめに、header.phpを作成します。

index.phpの<!DOCTYPE html>〜</header>部分を「header.php」に分割します。
wp-content/themes/mytheme/に次のようなheader.phpを作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_enqueue_style( 'style-sanitize', 'https://unpkg.com/sanitize.css' ); ?>
    <?php wp_enqueue_style( 'style-mytheme', get_template_directory_uri() . '/style.css' ); ?>
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <header>
      <div class="header-inner"></div>
    </header>

header.phpを取り込む

header.phpの作成が完了したら、index.phpの<!DOCTYPE html>〜</header>部分を次のように変更します。

<?php get_header(); ?>

<?php get_header(); ?>はテーマのディレクトリ配下にあるheader.phpを読み込むテンプレートタグです。

サイトを表示して、次のように表示されていたらheader.phpの取り込み完了です。

使用するサンプルテーマ

お疲れさまでした

WordPressでヘッダ(header.php)を分割して取り込む方法をご紹介しました。
少しでも参考になれば幸いです。