header.phpを実装しよう

本章では、これまでに作成した front-page.php から、各ページ共通のレイアウトになるヘッダー部分のパーツを部品化する手順を学んでいきます。

共通化とは？

HTMLテンプレートをコーディングした際に、

  • newsページ
  • recruitページ
  • フロントページ

これら全てのファイルにヘッダーやフッターを配置したかと思います。

さて、もしこのヘッダーの部分の一部を変更したい！と思ったとき、newsページ、recruitページ、フロントページのすべてを修正しなければいけません。

そうならないように、newsページ、recruitページ、フロントページに共通する部分のコードを、別のファイルに切り出してまとめて、そのファイルをそれぞれのページから呼び出していくのがプログラミングの基本です。

この、共通するコードを一つにまとめることを、共通化といいます。

今回は、ヘッダーを共通化していきます。

共通化の手順

ヘッダー部分の共通化は難しくないので、以下の流れで実装できれば OK です。

  1. header.php として切り出す部分のコードを確認
  2. 共通レイアウトのコードを front-page.php から header.php へ切り出す
  3. front-page.php から共通化したヘッダー部分を呼び出す
  4. アドミンバーを表示するテンプレートタグを記述する
  5. サイトを表示して、アドミンバーが表示されることを確認する

header.php として切り出す共通レイアウトのコードを確認

それでは早速、header.php として切り出していく、共通レイアウトのコードを確認していきましょう。

front-page.php をテキストエディタで開き、ヘッダー部分の実装を確認します。

TODO

  1. front-page.phpをひらいてください
  2. 下記のheader.phpに移行する部分のソースコードを確認してください

front-page.php

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <!-- Theme CSS -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <title>Indieverse</title>
</head>

<body>
  <header class="header" id="header">
    <div class="navbar-wrap"></div>
    <nav class="navbar fixed-top-sm navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="./index.html">
        Indieverse
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-flex-sm" id="navbarLight">
        <ul class="navbar-nav ml-auto bg-white">
          <li class="nav-item active">
            <a class="nav-link" href="#service">サービス <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#company">企業概要</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./news/news.html">ニュース</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./recruit/writter.html">採用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </nav><!-- nav -->
  </header><!-- header -->

header.php として切り出す部分は、上記コードになります。

header.php に切り出すコードは、HTML タグの <header> タグだけではなく、HTML の開始タグ部分から全てが共通化するコードの対象になります。

HTML タグの <header> タグだけを共通化するのは間違いなので、勘違いしないように気をつけましょう。

共通レイアウトのコードを front-page.php から header.php へ切り出す

共通化するパーツが確認できたら、実際に header.php を作成してヘッダー部分のコードを切り出していきます。

TODO
- テキストエディタから新規ファイル header.php を作成してください。

結果：
- indieverseフォルダに、header.phpが新規作成されている

 

header.phpを新規作成

次に、front-page.php から先程確認した共通ヘッダー部分のコードを切り出して、header.php を実装します。

TODO
- front-page.phpのheader部分を、header.phpにファイルをコピーしてください
- front-page.phpから、header部分を削除してください。

答え

現時点の header.php と front-page.php のコードは以下のようになります。

header.php

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <!-- Theme CSS -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <title>Indieverse</title>
</head>

<body>
  <header class="header" id="header">
    <div class="navbar-wrap"></div>
    <nav class="navbar fixed-top-sm navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="./index.html">
        Indieverse
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-flex-sm" id="navbarLight">
        <ul class="navbar-nav ml-auto bg-white">
          <li class="nav-item active">
            <a class="nav-link" href="#service">サービス <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#company">企業概要</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./news/news.html">ニュース</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./recruit/writter.html">採用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </nav><!-- nav -->
  </header><!-- header -->
    ```

<p><br></p>

<p><code>front-page.php</code></p>

```php
<article id="main">
  <section class="kv ly-section bg-gray topanime">
    <div class="container-fluid kv-container">
      <div class="row">
        <div class="kv-left col-md-7 col-lg-6">
          <div class="jumbotron bg-gray">
            <h1 class="kv-message h2">届くべき価値を<br>届くべき人へ届ける</h1>
            <p class="cl-light-gray">Indieverse.inc</p>
            <a class="btn btn-grey mt-5 d-none d-lg-block" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
          </div>
        </div><!-- .kv-left -->
        <div class="kv-right col-md-5 col-lg-6">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">
        </div><!-- .kv-right -->
      </div>
      <div class="row justify-content-center d-lg-none">
        <div class="col-11">
          <a class="btn btn-block btn-grey mb-5" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
        </div>
      </div>
    </div>
  </section><!-- .kv -->

  <section class="mission ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Why Indieverse?
            </h2>
            <p class="cl-light-gray">
              インディバースの理念
            </p>
          </div><!-- .section-ttl-block -->
          <div class="mission-txt text-center mb-5 scrollanime updown">
            <p>
              いいサービスでも、ユーザーに届かないことが多々あります。<br>
              <br class="d-sm-none">
              インディバースは、本当に必要とされるサービスを、<br>
              本当に必要な人に届ける仕組みづくりをお手伝いします。

            </p>
          </div><!-- .mission-txt -->
        </div>
      </div>
    </div>
  </section><!-- .mission -->

  <section class="service ly-section bg-gray" id="service">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Services
            </h2>
            <p class="cl-light-gray">
              サービス一覧
            </p>
          </div><!-- .section-ttl-block -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media1.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">メディア事業</h3>
              <p class="card-text pt-3 pb-5">
                IT系のキャリアを歩みたい方向けの、<br class="d-none d-sm-block">ライフスタイルメディアDAINOTEを運営しています。
                <br><br>
                フリーランス、パラレルキャリアなどのテーマを、実体験やインタビューをもとに綴っています。
              </p>
              <a href="https://dividable.net/" class="btn btn-block btn-grey">詳細はこちら</a>
            </div>
          </div><!-- .card -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media2.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">Webコンサルティング事業</h3>
              <p class="card-text pt-3 pb-5">
                マーケティング戦略の立案から、Web制作、マーケティングの実行支援まで、トータルでサポートいたします。
                <br><br>
                弊社は特に、サービスの立ち上げ時期のサポートが強みです。<br>
                お気軽にお問い合わせくださいませ。
              </p>
              <a href="#contact" class="btn btn-block btn-grey">お問い合わせはこちら</a>
            </div>
          </div><!-- .card -->
        </div>
      </div>
    </div>
  </section><!-- .service -->

  <section class="recruit ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Recruit
            </h2>
            <p class="cl-light-gray">
              採用情報
            </p>
          </div><!-- .section-ttl-block -->
          <div class="recruit-txt-block scrollanime updown">
            <p>
              インディバースには、オフィスはありません。完全フルリモートのチームです。<br>
              <br class="d-sm-none">
              地方からのご応募もお待ちしております。現在は以下の職種を募集しています。
            </p>
          </div><!-- .recruit-txt-block -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/writter.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/writer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/writter.html">Webライター</a></h3>
                  <p>
                    IT・転職領域のライターを募集しています。独自の研修制度もあり。ライターとしてスキル…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/director.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/drector.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/director.html">ディレクター</a></h3>
                  <p>
                    メディアディレクションを募集しています。データに基づいた意思決定…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/designer.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/designer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/designer.html">Webデザイナー</a></h3>
                  <p>
                    Webサイトのデザイン、コーディングを担当できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/movie.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/movie.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/movie.html">動画編集者</a></h3>
                  <p>
                    Youtubeで動画を制作できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
        </div>
      </div>
    </div>
  </section><!-- .recruit -->

  <section class="comapany ly-section bg-gray" id="company">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Company
            </h2>
            <p class="cl-light-gray">
              会社情報
            </p>
          </div><!-- .section-ttl-block -->
          <dl class="row mb-5">
            <dt class="col-4">設立</dt>
            <dd class="col-8">2019年7月</dd>

            <dt class="col-4">代表者</dt>
            <dd class="col-8">河合大</dd>

            <dt class="col-4">従業員数</dt>
            <dd class="col-8">5人(アルバイト含む)</dd>

            <dt class="col-4 text-truncate">所在地</dt>
            <dd class="col-8">〒180-0004 東京都武蔵野市吉祥寺本町２丁目８−４ コスモス吉祥寺ビル 2F</dd>
          </dl><!-- .row -->
          <div class="embed-responsive embed-responsive-16by9">

            <!-- Googleマップ埋め込み -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.820519434199!2d139.57576761562848!3d35.7060340801885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48b9fc4283%3A0x426961ceba42dc6a!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yY4oiS77yUIOOCs-OCueODouOCueWQieelpeWvuuODk-ODqyAyRg!5e0!3m2!1sja!2sjp!4v1597983975220!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

          </div><!-- .embed-responsive -->
        </div>
      </div>
    </div>
  </section><!-- .comapany -->

  <section class="contact ly-section" id="contact">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8 text-center">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Contact
            </h2>
            <p class="cl-light-gray">
              お問い合わせ
            </p>
          </div><!-- .section-ttl-block -->
          <div class="contact-txt-box mb-5">
            <p>お問い合わせは、こちらからよろしくお願いいたします。</p>
          </div><!-- .contact-txt-box -->

          <!-- Googleフォーム埋め込み -->
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfa0aFcPLtY0Ib3LlQLTKFZzGzkcKhigLplFwbOMaDdrRMzMQ/viewform?embedded=true" width="100%" height="1082" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

        </div>
      </div>
    </div>
  </section><!-- .contact -->

</article><!-- #main -->

<footer class="footer bg-grey cl-white pt-4" id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-lg-4 mb-2 mb-sm-0 text-left">
        <div class="footer-brand">
          <a href="./index.html">Indieverse</a>
        </div>
      </div>
      <div class="col-md-9 col-lg-8 text-right">
        <ul class="list-inline d-none d-sm-block">
          <li class="list-inline-item"><a href="#service">サービス</a></li>
          <li class="list-inline-item"><a href="#company">企業概要</a></li>
          <li class="list-inline-item"><a href="./news/news.html">ニュース</a></li>
          <li class="list-inline-item"><a href="./recruit/writter.html">採用</a></li>
          <li class="list-inline-item"><a href="#contact">お問い合わせ</a></li>
        </ul>
        <ul class="d-sm-none text-left">
          <li><a href="#service">サービス</a></li>
          <li><a href="#company">企業概要</a></li>
          <li><a href="./news/news.html">ニュース</a></li>
          <li><a href="./recruit/writter.html">採用</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="footer-hr">
  <div class="footer-copyright text-center pb-3">©2020
    <a href="http://indieverse.jp/"> Indieverse.inc</a>
  </div>
</footer><!-- footer -->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Theme JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
</body>

</html>

 

ここまでで、front-page.php に実装されていた共通ヘッダー部分のコードが header.php に切り出せていたら OK です。

まだ、この状態ではサイトの表示結果が意図しないレイアウトになるので、パーツ化したヘッダー部分を front-page.php から読み込むように修正していきます。

ちなみに、header.php に切り出した共通ヘッダーを front-page.php から読み込む前の状態では、サイトのレイアウトは以下のように崩れた状態で表示されます。

TODO

  1. トップページをひらいて、ヘッダー部分が反映されていないことを確認してください

header.phpを読み込む前の表示結果

 

front-page.php から共通化したヘッダー部分を呼び出す

共通化した header.php を別のテンプレートファイルから読み込むためには、get_header関数というテンプレートタグを利用します。

使い方は簡単で、以下のコードを front-page.php の一番頭の部分に埋め込みます。

<?php get_header(); ?>

get_header() のテンプレートタグを実装した front-page.php は以下のようになります。

TODO

- front-page.phpから、get_header関数を利用して、header.phpを呼び出してください。
- トップページをリロードして、ヘッダーが呼び出せているか確認してください。

答え

front-page.php

<?php get_header(); ?>

<article id="main">
  <section class="kv ly-section bg-gray topanime">
    <div class="container-fluid kv-container">
      <div class="row">
        <div class="kv-left col-md-7 col-lg-6">
          <div class="jumbotron bg-gray">
            <h1 class="kv-message h2">届くべき価値を<br>届くべき人へ届ける</h1>
            <p class="cl-light-gray">Indieverse.inc</p>
            <a class="btn btn-grey mt-5 d-none d-lg-block" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
          </div>
        </div><!-- .kv-left -->
        <div class="kv-right col-md-5 col-lg-6">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">
        </div><!-- .kv-right -->
      </div>
      <div class="row justify-content-center d-lg-none">
        <div class="col-11">
          <a class="btn btn-block btn-grey mb-5" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
        </div>
      </div>
    </div>
  </section><!-- .kv -->

  <section class="mission ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Why Indieverse?
            </h2>
            <p class="cl-light-gray">
              インディバースの理念
            </p>
          </div><!-- .section-ttl-block -->
          <div class="mission-txt text-center mb-5 scrollanime updown">
            <p>
              いいサービスでも、ユーザーに届かないことが多々あります。<br>
              <br class="d-sm-none">
              インディバースは、本当に必要とされるサービスを、<br>
              本当に必要な人に届ける仕組みづくりをお手伝いします。

            </p>
          </div><!-- .mission-txt -->
        </div>
      </div>
    </div>
  </section><!-- .mission -->

  <section class="service ly-section bg-gray" id="service">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Services
            </h2>
            <p class="cl-light-gray">
              サービス一覧
            </p>
          </div><!-- .section-ttl-block -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media1.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">メディア事業</h3>
              <p class="card-text pt-3 pb-5">
                IT系のキャリアを歩みたい方向けの、<br class="d-none d-sm-block">ライフスタイルメディアDAINOTEを運営しています。
                <br><br>
                フリーランス、パラレルキャリアなどのテーマを、実体験やインタビューをもとに綴っています。
              </p>
              <a href="https://dividable.net/" class="btn btn-block btn-grey">詳細はこちら</a>
            </div>
          </div><!-- .card -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media2.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">Webコンサルティング事業</h3>
              <p class="card-text pt-3 pb-5">
                マーケティング戦略の立案から、Web制作、マーケティングの実行支援まで、トータルでサポートいたします。
                <br><br>
                弊社は特に、サービスの立ち上げ時期のサポートが強みです。<br>
                お気軽にお問い合わせくださいませ。
              </p>
              <a href="#contact" class="btn btn-block btn-grey">お問い合わせはこちら</a>
            </div>
          </div><!-- .card -->
        </div>
      </div>
    </div>
  </section><!-- .service -->

  <section class="recruit ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Recruit
            </h2>
            <p class="cl-light-gray">
              採用情報
            </p>
          </div><!-- .section-ttl-block -->
          <div class="recruit-txt-block scrollanime updown">
            <p>
              インディバースには、オフィスはありません。完全フルリモートのチームです。<br>
              <br class="d-sm-none">
              地方からのご応募もお待ちしております。現在は以下の職種を募集しています。
            </p>
          </div><!-- .recruit-txt-block -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/writter.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/writer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/writter.html">Webライター</a></h3>
                  <p>
                    IT・転職領域のライターを募集しています。独自の研修制度もあり。ライターとしてスキル…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/director.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/drector.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/director.html">ディレクター</a></h3>
                  <p>
                    メディアディレクションを募集しています。データに基づいた意思決定…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/designer.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/designer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/designer.html">Webデザイナー</a></h3>
                  <p>
                    Webサイトのデザイン、コーディングを担当できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/movie.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/movie.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/movie.html">動画編集者</a></h3>
                  <p>
                    Youtubeで動画を制作できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
        </div>
      </div>
    </div>
  </section><!-- .recruit -->

  <section class="comapany ly-section bg-gray" id="company">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Company
            </h2>
            <p class="cl-light-gray">
              会社情報
            </p>
          </div><!-- .section-ttl-block -->
          <dl class="row mb-5">
            <dt class="col-4">設立</dt>
            <dd class="col-8">2019年7月</dd>

            <dt class="col-4">代表者</dt>
            <dd class="col-8">河合大</dd>

            <dt class="col-4">従業員数</dt>
            <dd class="col-8">5人(アルバイト含む)</dd>

            <dt class="col-4 text-truncate">所在地</dt>
            <dd class="col-8">〒180-0004 東京都武蔵野市吉祥寺本町２丁目８−４ コスモス吉祥寺ビル 2F</dd>
          </dl><!-- .row -->
          <div class="embed-responsive embed-responsive-16by9">

            <!-- Googleマップ埋め込み -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.820519434199!2d139.57576761562848!3d35.7060340801885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48b9fc4283%3A0x426961ceba42dc6a!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yY4oiS77yUIOOCs-OCueODouOCueWQieelpeWvuuODk-ODqyAyRg!5e0!3m2!1sja!2sjp!4v1597983975220!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

          </div><!-- .embed-responsive -->
        </div>
      </div>
    </div>
  </section><!-- .comapany -->

  <section class="contact ly-section" id="contact">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8 text-center">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Contact
            </h2>
            <p class="cl-light-gray">
              お問い合わせ
            </p>
          </div><!-- .section-ttl-block -->
          <div class="contact-txt-box mb-5">
            <p>お問い合わせは、こちらからよろしくお願いいたします。</p>
          </div><!-- .contact-txt-box -->

          <!-- Googleフォーム埋め込み -->
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfa0aFcPLtY0Ib3LlQLTKFZzGzkcKhigLplFwbOMaDdrRMzMQ/viewform?embedded=true" width="100%" height="1082" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

        </div>
      </div>
    </div>
  </section><!-- .contact -->

</article><!-- #main -->

<footer class="footer bg-grey cl-white pt-4" id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-lg-4 mb-2 mb-sm-0 text-left">
        <div class="footer-brand">
          <a href="./index.html">Indieverse</a>
        </div>
      </div>
      <div class="col-md-9 col-lg-8 text-right">
        <ul class="list-inline d-none d-sm-block">
          <li class="list-inline-item"><a href="#service">サービス</a></li>
          <li class="list-inline-item"><a href="#company">企業概要</a></li>
          <li class="list-inline-item"><a href="./news/news.html">ニュース</a></li>
          <li class="list-inline-item"><a href="./recruit/writter.html">採用</a></li>
          <li class="list-inline-item"><a href="#contact">お問い合わせ</a></li>
        </ul>
        <ul class="d-sm-none text-left">
          <li><a href="#service">サービス</a></li>
          <li><a href="#company">企業概要</a></li>
          <li><a href="./news/news.html">ニュース</a></li>
          <li><a href="./recruit/writter.html">採用</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="footer-hr">
  <div class="footer-copyright text-center pb-3">©2020
    <a href="http://indieverse.jp/"> Indieverse.inc</a>
  </div>
</footer><!-- footer -->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Theme JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
</body>

</html>

 

結果：

この状態でサイトの表示結果を確認してみましょう。

以下のように、レイアウトが崩れることなく表示されていれば OK です。

header.phpを読み込んだ状態の表示結果

 

アドミンバーを表示するテンプレートタグを記述する

ここまで、特に説明することはなかったのですが、現状のテーマには大きな欠陥があります。

それは、WordPress にログインした状態であってもサイトの表示画面でアドミンバー（管理メニューにアクセスできる黒いメニューバー）が表示されていないことです。

アドミンバーが表示された状態

アドミンバーを表示するためには wp_head() と wp_footer() というテンプレートタグを実装する必要があります。

wp_head関数は、WordPressにheaderの位置を教えるためのタグです。

header.php には、HTML タグの </head> タグの直前に以下のコードを実装します。

<?php wp_head(); ?>

wp_head関数とは

wp_footer関数は、WordPressにfooterの位置を教えるためのタグです。

front-page.php には、HTML タグの </body> タグの直前に以下のコードを実装します。

<?php wp_footer(); ?>

wp_footer関数とは

これらのタグが存在しないと、WordPressのプラグインが、うまく利用できなくなってしまうのです。

それぞれ、header.php と front-page.php にこのテンプレートタグを実装していきましょう。

 

TODO
- header.phpにwp_header関数を実装してください
- front-page.phpにwp_footer関数を実装してください

答え

header.php

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <!-- Theme CSS -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <title>Indieverse</title>
  <?php wp_head(); ?>
</head>

<body>
  <header class="header" id="header">
    <div class="navbar-wrap"></div>
    <nav class="navbar fixed-top-sm navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="./index.html">
        Indieverse
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-flex-sm" id="navbarLight">
        <ul class="navbar-nav ml-auto bg-white">
          <li class="nav-item active">
            <a class="nav-link" href="#service">サービス <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#company">企業概要</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./news/news.html">ニュース</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./recruit/writter.html">採用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </nav><!-- nav -->
  </header><!-- header -->

 

front-page.php

<?php get_header(); ?>

<article id="main">
  <section class="kv ly-section bg-gray topanime">
    <div class="container-fluid kv-container">
      <div class="row">
        <div class="kv-left col-md-7 col-lg-6">
          <div class="jumbotron bg-gray">
            <h1 class="kv-message h2">届くべき価値を<br>届くべき人へ届ける</h1>
            <p class="cl-light-gray">Indieverse.inc</p>
            <a class="btn btn-grey mt-5 d-none d-lg-block" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
          </div>
        </div><!-- .kv-left -->
        <div class="kv-right col-md-5 col-lg-6">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
          <img src="<?php echo get_template_directory_uri(); ?>/images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">
        </div><!-- .kv-right -->
      </div>
      <div class="row justify-content-center d-lg-none">
        <div class="col-11">
          <a class="btn btn-block btn-grey mb-5" href="#contact" role="button">ご相談・お問い合わせはこちら</a>
        </div>
      </div>
    </div>
  </section><!-- .kv -->

  <section class="mission ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Why Indieverse?
            </h2>
            <p class="cl-light-gray">
              インディバースの理念
            </p>
          </div><!-- .section-ttl-block -->
          <div class="mission-txt text-center mb-5 scrollanime updown">
            <p>
              いいサービスでも、ユーザーに届かないことが多々あります。<br>
              <br class="d-sm-none">
              インディバースは、本当に必要とされるサービスを、<br>
              本当に必要な人に届ける仕組みづくりをお手伝いします。

            </p>
          </div><!-- .mission-txt -->
        </div>
      </div>
    </div>
  </section><!-- .mission -->

  <section class="service ly-section bg-gray" id="service">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Services
            </h2>
            <p class="cl-light-gray">
              サービス一覧
            </p>
          </div><!-- .section-ttl-block -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media1.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">メディア事業</h3>
              <p class="card-text pt-3 pb-5">
                IT系のキャリアを歩みたい方向けの、<br class="d-none d-sm-block">ライフスタイルメディアDAINOTEを運営しています。
                <br><br>
                フリーランス、パラレルキャリアなどのテーマを、実体験やインタビューをもとに綴っています。
              </p>
              <a href="https://dividable.net/" class="btn btn-block btn-grey">詳細はこちら</a>
            </div>
          </div><!-- .card -->
          <div class="card card-border-none text-center card-mb-10 scrollanime updown">
            <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/media2.png" alt="Card image cap">
            <div class="card-body py-5">
              <h3 class="card-title py-2">Webコンサルティング事業</h3>
              <p class="card-text pt-3 pb-5">
                マーケティング戦略の立案から、Web制作、マーケティングの実行支援まで、トータルでサポートいたします。
                <br><br>
                弊社は特に、サービスの立ち上げ時期のサポートが強みです。<br>
                お気軽にお問い合わせくださいませ。
              </p>
              <a href="#contact" class="btn btn-block btn-grey">お問い合わせはこちら</a>
            </div>
          </div><!-- .card -->
        </div>
      </div>
    </div>
  </section><!-- .service -->

  <section class="recruit ly-section">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Recruit
            </h2>
            <p class="cl-light-gray">
              採用情報
            </p>
          </div><!-- .section-ttl-block -->
          <div class="recruit-txt-block scrollanime updown">
            <p>
              インディバースには、オフィスはありません。完全フルリモートのチームです。<br>
              <br class="d-sm-none">
              地方からのご応募もお待ちしております。現在は以下の職種を募集しています。
            </p>
          </div><!-- .recruit-txt-block -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/writter.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/writer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/writter.html">Webライター</a></h3>
                  <p>
                    IT・転職領域のライターを募集しています。独自の研修制度もあり。ライターとしてスキル…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/director.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/drector.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/director.html">ディレクター</a></h3>
                  <p>
                    メディアディレクションを募集しています。データに基づいた意思決定…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
          <div class="row scrollanime updown">
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/designer.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/designer.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/designer.html">Webデザイナー</a></h3>
                  <p>
                    Webサイトのデザイン、コーディングを担当できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
            <div class="col-sm-6">
              <div class="card mb-5 card-border-none">
                <a href="./recruit/movie.html">
                  <img class="card-img-top" src="<?php echo get_template_directory_uri(); ?>/images/movie.png" alt="Card image cap">
                </a>
                <div class="card-body">
                  <h3 class="card-title h5 mb-4"><a href="./recruit/movie.html">動画編集者</a></h3>
                  <p>
                    Youtubeで動画を制作できる方を募集しています…
                  </p>
                </div>
              </div><!-- .card -->
            </div>
          </div><!-- .row -->
        </div>
      </div>
    </div>
  </section><!-- .recruit -->

  <section class="comapany ly-section bg-gray" id="company">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Company
            </h2>
            <p class="cl-light-gray">
              会社情報
            </p>
          </div><!-- .section-ttl-block -->
          <dl class="row mb-5">
            <dt class="col-4">設立</dt>
            <dd class="col-8">2019年7月</dd>

            <dt class="col-4">代表者</dt>
            <dd class="col-8">河合大</dd>

            <dt class="col-4">従業員数</dt>
            <dd class="col-8">5人(アルバイト含む)</dd>

            <dt class="col-4 text-truncate">所在地</dt>
            <dd class="col-8">〒180-0004 東京都武蔵野市吉祥寺本町２丁目８−４ コスモス吉祥寺ビル 2F</dd>
          </dl><!-- .row -->
          <div class="embed-responsive embed-responsive-16by9">

            <!-- Googleマップ埋め込み -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.820519434199!2d139.57576761562848!3d35.7060340801885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee48b9fc4283%3A0x426961ceba42dc6a!2z44CSMTgwLTAwMDQg5p2x5Lqs6YO95q2m6JS16YeO5biC5ZCJ56Wl5a-65pys55S677yS5LiB55uu77yY4oiS77yUIOOCs-OCueODouOCueWQieelpeWvuuODk-ODqyAyRg!5e0!3m2!1sja!2sjp!4v1597983975220!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

          </div><!-- .embed-responsive -->
        </div>
      </div>
    </div>
  </section><!-- .comapany -->

  <section class="contact ly-section" id="contact">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8 text-center">
          <div class="section-ttl-block scrollanime updown">
            <h2>
              Contact
            </h2>
            <p class="cl-light-gray">
              お問い合わせ
            </p>
          </div><!-- .section-ttl-block -->
          <div class="contact-txt-box mb-5">
            <p>お問い合わせは、こちらからよろしくお願いいたします。</p>
          </div><!-- .contact-txt-box -->

          <!-- Googleフォーム埋め込み -->
          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfa0aFcPLtY0Ib3LlQLTKFZzGzkcKhigLplFwbOMaDdrRMzMQ/viewform?embedded=true" width="100%" height="1082" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

        </div>
      </div>
    </div>
  </section><!-- .contact -->

</article><!-- #main -->

<footer class="footer bg-grey cl-white pt-4" id="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-lg-4 mb-2 mb-sm-0 text-left">
        <div class="footer-brand">
          <a href="./index.html">Indieverse</a>
        </div>
      </div>
      <div class="col-md-9 col-lg-8 text-right">
        <ul class="list-inline d-none d-sm-block">
          <li class="list-inline-item"><a href="#service">サービス</a></li>
          <li class="list-inline-item"><a href="#company">企業概要</a></li>
          <li class="list-inline-item"><a href="./news/news.html">ニュース</a></li>
          <li class="list-inline-item"><a href="./recruit/writter.html">採用</a></li>
          <li class="list-inline-item"><a href="#contact">お問い合わせ</a></li>
        </ul>
        <ul class="d-sm-none text-left">
          <li><a href="#service">サービス</a></li>
          <li><a href="#company">企業概要</a></li>
          <li><a href="./news/news.html">ニュース</a></li>
          <li><a href="./recruit/writter.html">採用</a></li>
          <li><a href="#contact">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr class="footer-hr">
  <div class="footer-copyright text-center pb-3">©2020
    <a href="http://indieverse.jp/"> Indieverse.inc</a>
  </div>
</footer><!-- footer -->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Theme JavaScript -->
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
<?php wp_footer(); ?>
</body>

</html>

 

サイトを表示して、アドミンバーが表示されることを確認する

最後に、WordPress にログインした状態でサイトを表示してみましょう。

サイトの上部にアドミンバーが表示されていれば OK です。

アドミンバーが表示された状態

アドミンバーの「テンプレートファイル」にカーソルを当てると、現在適用されているテンプレートファイルが front-page.php であり、その中には header.php が組み込まれていることが確認できると思います。

 

まとめ

この章では、WordPress テーマにおいて共通ヘッダーを作成する手順を学びました。

また、WordPress テーマに必ず導入するテンプレートタグ wp_head() と wp_footer() の使い方がでてきました。このテンプレートタグを実装し忘れると、意図しないテーマの動きになってしまうため、必ず実装するようにしましょう。

次章では、フッター部分を共通テンプレートに切り出す手法を学びます。

 

【参考リンク】

WordPress Codex - 関数リファレンス/get header

WordPress Codex - 関数リファレンス/wp head

WordPress Codex - テンプレートタグ/wp footer

次のレッスン：footer.phpを実装しよう