front-page.phpの作り方を理解しよう

この章からは、WordPress の実践的なテーマ開発に入っていきます。

本章では、

  • 制作するコーポレートサイトの完成イメージの確認
  • WordPress 化する HTML テンプレートのダウンロード
  • 実際の front-page.php の実装

この３点を実践していきます。

本チュートリアルでは HTML コーディングは既に完了している前提として、完成した HTML モックから WordPress 化する手順を学んでいきます。

 

コーポレートサイトを確認しよう

まず、本チュートリアルで制作するコーポレートサイトの完成版をリンク先から確認してみましょう。

Indieverse - 届くべき価値を届くべき人へ届ける

サイトの構成としては、以下のようになります。

 

 

  • TOP ページ
    • メインビジュアル
    • 企業理念
    • サービス
    • 採用情報
    • 採用詳細
    • 会社情報
    • お問い合わせ
  • ニュース一覧
    • ニュース詳細

 

 

 

▼ TOP ページの画面イメージ

file

 

HTML テンプレートをダウンロード

完成版のイメージができたら、次に HTML テンプレートをダウンロードしていきます。

HTMLテンプレートをダウンロードする

ダウンロードしたファイルを解凍すると、html_templateというフォルダがあります。このフォルダの中身を確認してみましょう。

file

 

HTML テンプレートの構成は、以下のようになっています。

ファイル・フォルダ名 内容
index.html トップページの HTML ファイル
404.html 404 ページの HTML ファイル
news ニュースページの HTML ファイルを格納したフォルダ
recruit 採用詳細ページの HTML ファイルを格納したフォルダ
images 画像ファイルを格納したフォルダ
css CSS ファイルを格納したフォルダ
js JavaScript ファイルを格納したフォルダ
screenshot.png WordPress テーマのスクリーンショット画像

 

index.html から front-page.php を実装する

HTML テンプレートが用意できたら、フロントページの実装を進めていきましょう。

フロントページの WordPress 化は以下の手順で進めていきます。

 

【HTML テンプレートからフロントページを WordPress 化する手順】

  1. htdocs\indieverse\wp-content\themes\indieverseの中に、html_templateの中身をコピーする
  2. front-page.phpを新規で作成する
  3. index.html の内容を front-page.php にコピーする
  4. テーマを有効化して表示結果を確認する（画像・CSS ファイルが未反映）
  5. index.php の中身を修正して、画像 / CSS / JS ファイルが読み込まれるようにする

 

htdocs\indieverse\wp-content\themes\indieverseの中に、html_templateの中身をコピーする

現状では、テーマディレクトリに「index.php」と「style.css」の２つのファイルがある状態です。

file

ここに、HTML テンプレートのファイル群をすべてコピーします。

TODO

- htdocs\indieverse\wp-content\themes\indieverseを開いてください

- ダウンロードしたhtml_templateフォルダを開いてください

- html_templateのファイルの中身を、 htdocs\indieverse\wp-content\themes\indieverseの中にすべてコピーしてください

結果

- indieverseフォルダ内は以下のようになります。

file

 

front-page.phpを新規で作成する

次に、空のfront-page.phpを新規で作成します。

TODO：

- vscode上でファイルを新規作成してください

- front-page.phpというファイルで、からのファイルを保存してください。

結果：

- indieverseフォルダ内に、front-page.phpのファイルが追加されます。

index.html の内容を front-page.php にコピーする

それでは次に、index.html の内容を front-page.php にコピーします。

TODO

- htdocs\indieverse\wp-content\themes\indieverse\index.html を開いてください

- front-page.phpの中に、index.htmlの中身をコピーしてください

結果：

最終的に front-page.php の内容が、index.html の内容と一致していれば OK です。

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="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 -->

  <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="./images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">
            <img src="./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="./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="./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="./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="./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="./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="./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="./js/common.js"></script>
</body>

</html>

 

テーマを有効化して表示結果を確認する（画像・CSS ファイルが未反映）

この状態では、まだ WordPress のテーマとしては不十分な状態ですが、一旦テーマを有効化して表示内容を確認してみましょう。

TODO

- 管理画面(http://localhost/indieverse/wp-login.php)にアクセスして、ログインしてください。

- 「ダッシュボード > 外観 > テーマ」から、テーマの変更画面に遷移して、オリジナルテーマ「Indieverse」を有効化してください

- 再度 http://localhost/indieverse/ にアクセスしてください。

file

テーマが有効化できたら、「サイトを表示」のリンクを押下して現状の表示内容を確認してください。

 

file

file

結果：

サイトの表示結果を確認すると、以下のように画像と CSS が読み込まれていない状態で、レイアウトが崩れているのが分かるかと思います。

file

 

まだ中途半端な状態ですが、ここから WordPress の環境に合わせてリンク修正などを行っていくので、現状ではこれで OK です。

front-page.php の中身を修正して、画像 / CSS / JS ファイルが読み込まれるようにする

それでは次に、WordPress 環境で画像 / CSS / JS ファイルの読み込み設定をしていきます。

以下の画像を見ると、画像 / CSS / JSが埋め込まれていません。なぜでしょうか。

file

開発者ツールから、橋の画像をホバーして、ファイルを確認すると、以下のパスを参照していることが分かります。

https://localhost/indieverse/images/bridge.png

こちらのパスは、WordPressテンプレートのフォルダではないので、画像は存在しません。橋の画像が存在するのは、テンプレートフォルダである

\htdocs\indieverse\wp-content\themes\indieverse\images\bridge.png

になります。

なので、適切なパスに表示する必要があります。

get_template_directory_uri関数を利用する

それでは、WordPressテーマへのフォルダへのパスを指定するにはどうすれば実現することができるのでしょう。

これは、PHPのget_template_directory_uri関数を利用することで解決できます。

get_template_directory_uri関数を利用することで、現在のテンプレートのディレクトリ（フォルダ）を指定することができます。

テキストエディタで front-page.php を開き、画像 / CSS / JS のリンク部分に以下のテンプレートタグを埋め込みます。

<?php echo get_template_directory_uri(); ?>

試しに、front-page.phpに、以下のようにコードを追加してみましょう。

TODO

- front-page.phpに、以下のコードを追加してください。

front-page.php 

<body>
  //TODO get_template_directory_uri関数を追加する
  <?php echo get_template_directory_uri(); ?>
  <header class="header" id="header">
    <div class="navbar-wrap"></div>

- ファイルを更新して、リロードしてください

- 再度ページを確認してください。

結果：

現在利用しているテーマのフォルダ（ディレクトリ）が反映される

この関数を使うと、現在のテーマフォルダのディレクトリを取得できることがわかりました。

ここまで分かったら、あとはCSSが入っているフォルダへのパスを、get_template_directory_uri関数を利用して、指定してあげましょう。

CSSファイルが存在するのは、\htdocs\indieverse\wp-content\themes\indieverse\css\style.css になります。

現在、CSSは以下のように指定されています。

<!-- Theme CSS -->
<link rel="stylesheet" href="css/style.css">

 

そこで、現在のCSSディレクトリに合うように、コードを変えてみましょう。

TODO:

- さきほど指定したget_template_directory_uri関数を削除してください。
- 新規で、get_template_directory_uri関数を利用して、style.cssが読み込まれるようにしてください

答え：

現状の front-page.php では、CSS ファイルの読み込み箇所が上記のようになっていますので、ここにテンプレートタグを埋め込む形で修正します。

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

出力結果：

CSSが反映されている状態になっている

CSS の読み込み部分と同じく、JS の読み込み箇所もテンプレートタグを埋め込んでいきます。

TODO

- Javascriptが反映されるようにしてください

答え

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

出力結果：

JavaScriptが適応される

file

だいぶ完成に近づいてきました。

この状態では画像がまだ表示されていないので、画像のリンク箇所にもテンプレートタグを埋め込んでいきましょう。

TODO

front-page.php内のimgタグを、get_template_directory_uri関数を利用して、読み込んでください。

<img src="./images/bridge-sp.png" class="img-fluid d-lg-none" alt="Responsive image">

<img src="./images/bridge.png" class="img-fluid d-none d-lg-block" alt="Responsive image">

答え：

以下のように修正できたら OK です。

<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">

画像の読み込み箇所はメインビジュアル以外にもありますので、画像の読み込み箇所はすべて修正するようにしてください。

出力結果：

この状態でサイトの表示結果を確認すると、画像ファイルも含めてレイアウトが正常に表示されているのが確認できると思います。

file

最後に

ここまでの手順で、HTML テンプレートでコーディングされていた TOP ページが、WordPress 環境でも同じレイアウトで表示できました。

ここまでの実装手順をまとめると、、

  • WordPress 環境でファイル読み込みをする場合は get_template_directory_uri() というテンプレートタグを利用する
  • index.php の中で画像 / CSS / JS のリンク箇所を探す
  • 該当のリンク箇所に get_template_directory_uri() のテンプレートタグを埋め込む

となります。

get_template_directory_uri() のテンプレートタグを埋め込んだ index.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 -->

  <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>

 

テンプレートファイルの名前がスペルミスなどで間違っていた場合には、テンプレート階層の大本になる index.php が適用されるため、想定外の動作にも気づきやすくなります。

試しに、TOP ページ用に用意した front-page.php のファイル名を間違ったものにしてみましょう。

ここではよくある間違いとして、ハイフン部分をアンダースコアに変更して、わざと間違ったファイル名としています。

間違ったファイル名： front_page.php にリネーム。

file

この状態でサイトの表示結果を確認すると、以下のように index.php に実装したメッセージが表示されます。

file

このように、もしスペルミスなどでテンプレートファイルの名前を間違えた場合は、index.php に実装したメッセージが表示されるため、間違いに気づきやすくなります。

動作確認ができたら、front_page.php を 正しいテンプレートファイル名である、front-page.php に戻しておきましょう。

 

まとめ

この章では、コーポレートサイトのフロントページを WordPress 化する手順を学びました。

フロントページの実装では、WordPress テーマで確実に利用されるテンプレートタグ get_template_directory_uri() の使い方や、テンプレート階層を意識したテーマ開発の基本を理解できたと思います。

実務でも役立つ知識となるので、しっかりと理解しておきましょう。

次章では、今回作成したフロントページのヘッダー・フッターを共通テンプレートに切り出す手法を学びます。

 

【参考リンク】

WordPress Codex - 関数リファレンス/get template directory uri

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