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

2022/06/07WordPress

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか？
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく！

CodeCamp

実行環境

OS	macOS Big Sur 11.6
WordPress	5.8

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

XAMPPのローカル環境にWordPressをインストールする方法

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

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

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

header.phpを作成する
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)を分割して取り込む方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！

目次

実行環境

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

header.phpを作成する

header.phpを取り込む

お疲れさまでした

どんな記事が読みたいですか？