【WordPress】オリジナルテーマの作り方！ローカル開発環境構築からHTMLサイトのWordPress化・カスタマイザー項目の追加まで

2024-01-202024-03-17

オリジナルテーマの作り方　ローカル開発環境の構築からHTMLサイトのWordPress化

フリーランスでWordPress案件をやってみたい！という方は多いと思います。

がっつりプログラミング経験がないブロガーさんでも、既存のテーマを使用したノーコード案件や、そこからCSSをちょろっといじるローコード案件を受けていらっしゃる方もいますよね。

ただ、オリジナルのテーマが作れるとさらに大きな案件を受けることができるようになります。

この記事ではテーマ開発初心者の方向けに、ローカル環境の構築からトップページを表示するためのテンプレートファイル作成、テーマカスタマイザーのカスタマイズまでを解説します。

この記事の内容

テーマ開発のためのローカル環境構築（Local使用）
新しいテーマを作成する
HTMLサイトのWordPress化
テンプレートファイルの分割
投稿をカテゴリーごとに自動取得
テーマカスタマイザーへ項目の追加

前提としてHTMLでwebページが作れるものとしています。

事前準備

今回はこのようなサンプルサイトを準備しました。

＼　スクロールできます　／

HTMLとCSS（SCSS）のみで作ったものです。

使用画像はimgディレクトリに格納しています。

altとか設定してないし、スマホ対応もしてない~~手抜き~~エコ設計です。

コードはこちら（長いです）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index,follow">
    <meta name="description" content="Sample Cafe公式サイト">
    <title>Sample Cafe</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header id="header">
      <div class="inner">
          <div class="logo_box"><img class="w100" src="img/logo.png"></div>
          <nav>
              <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#">NEWS</a></li>
                  <li><a href="#">SHOP LIST</a></li>
                  <li><a href="#">CONTACT</a></li>
              </ul>
          </nav>
      </div>
    </header>
    <div class="hero">
      <img src="img/main_img.jpg">
      <div class="hero_text"><p>隠れ家のような落ち着いた空間をあなたに</p></div>
    </div>
    <div id="main">
      <div class="main_contents">
        <h1>商品情報</h1>
        <div class="article_card_list">
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/sample-01.jpg">
              </div>
              <div class="text_box">
                <h2>3種のドリンク飲み比べ</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/sample-02.jpg">
              </div>
              <div class="text_box">
                <h2>ラテアート</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/sample-03.jpg">
              </div>
              <div class="text_box">
                <h2>ドリンク、ケーキセット</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/sample-04.jpg">
              </div>
              <div class="text_box">
                <h2>季節のタルトケーキ</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="side_contents">
        <h1>お知らせ</h1>
        <div class="side_content_box">
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/side-01.jpg">
              </div>
              <div class="text_box">
                <h2>新店舗オープンのお知らせ</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
        </div>
        <div class="side_content_box">
          <a href="#" class="article_card_wrapper">
            <div class="article_card">
              <div class="img_box">
                <img src="img/side-02.jpg">
              </div>
              <div class="text_box">
                <h2>営業時間が変更になります</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
        </div>
        <div class="side_content_box">
          <a href="#" class="btn btn_saiyou">採用情報</a>
          <a href="#" class="btn btn_tenpo">店舗を探す</a>
        </div>
      </div>
    </div>
    <footer>
      <div class="footer_contents_wrapper">
        <div class="footer_address">
          <ul>
            <li>Sample Cafe</li>
            <li>〒111-1111　東京都千代田区1丁目</li>
            <li>℡.012-345-6789</li>
          </ul>
        </div>
        <a href="#" class="btn btn_contact_us">Contact us</a>
      </div>
      <div class="copyright"><p>Copyright © Lapin.web All Rights Reserved.</p></div>
    </footer>
  </body>
</html>

html {
  body {
    margin: 0;
    padding: 0;
    background-color: rgb(162, 187, 174);
    color: #333;
    box-sizing: border-box;
    position: relative;

    .w100 {
      width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .btn {
      display: block;
      padding: .6em 1em;
      margin: 1em 0;
      background-color: rgb(44, 77, 60);
      color: #fff;
      text-align: center;
    }

    header#header {
      background-color: #ffffff94;
      color: #706c69;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      width: 100%;

      .inner {
        display: flex;
        align-items: center;
        max-width: 1240px;
        margin: auto;
        padding: .5em 2em;

        .logo_box {
          width: 20%;
        }

        nav {
          width: 60%;
          margin: 0 0 0 auto;

          ul {
            margin: 0 0 0 auto;
            width: fit-content;
            display: flex;
            justify-content: space-around;
            list-style: none;

            li {
              display: block;
              margin: 0 1em;
              font-weight: bold;
            }
          }
        }
      }
    }

    .hero {
      width: 100%;
      height: 100vh;
      background-size: cover;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .hero_text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        max-width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          font-size: 1.4em;
          color: #fff;
        }
      }
    }

    #main {
      width: 95%;
      display: flex;
      justify-content: space-between;
      margin: 4em auto;

      .main_contents,
      .side_contents {
        padding: 1em 1.5em;
        background-color: #fff;
        border-radius: 5px;

        h1 {
          width: fit-content;
          margin: .5em auto 1em auto;
          border-bottom: dotted 5px rgb(44, 77, 60);
          font-size: 1.6em;
        }
      }

      .article_card_wrapper {
        width: 45%;

        &:hover {
          .article_card {
            .img_box {
              img {
                scale: 1.1;
              }
            }
          }
        }

        .article_card {
          box-sizing: border-box;

          .img_box {
            width: 100%;
            aspect-ratio: 4/3;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all .3s;
            }
          }

          .text_box {
            padding: .2em 0;

            h2 {
              margin: .3em 0;
              font-size: 1.2em;
            }

            p {
              margin: .2em 0;
              color: #555555;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .main_contents {
        width: 67%;

        .article_card_list {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          .article_card {
            margin-bottom: 1.5em;
          }
        }
      }

      .side_contents {
        width: 25%;

        .side_content_box {
          width: 90%;
          margin: auto;

          &:not(:last-child) {
            border-bottom: solid 1px rgb(44, 77, 60);
            margin-bottom: 1em;
          }

          .article_card {
            width: 100%;
          }
        }
      }
    }

    footer {
      background-color: #33333371;
      padding: 2em 1.5em 1em 1.5em;
      color: #fff;

      .footer_contents_wrapper {
        max-width: 1240px;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .btn_contact_us {
          background-color: transparent;
          border: solid 2px #fff;
          padding: 1em 3em;
        }
      }

      .copyright {
        text-align: center;
        margin-top: 1.5em;

        p {
          margin: 0;
        }
      }
    }
  }
}

WordPressに移植した際、商品情報やお知らせは投稿からカテゴリーで引っ張ってくるようなものを想定しています。

こちらをWordPressに載せていきます。

WordPressをローカル環境に構築

WordPressのテーマ開発ですが、

ローカルでサイトを作る（HTML）
ローカル環境のWordPressに移植しテスト
テストサーバーで公開・確認（やらない場合もある）
本番サーバーで公開

という手順でやっていくことが多いと思います。

慣れてきたらいきなり②からでもいいんですが、HTMLとPHPが混ざると訳がわからないよ状態になるので、最初はこの流れでやっていく方がいいんじゃないでしょうか。

②の手順がある理由ですが、いきなりサーバーで開発を行うとファイルを更新するためにアップロードする必要があり単純に手間です。

なのでスムーズな開発を行うためにまずWordPressをローカル環境で使えるようにする必要がありますね。

ローカル環境の構築にはいくつか方法がありますが、今回はLocalというフリーソフトを使った一番簡単だと思われる方法でやっていきます。

STEP

Localをインストールする

まずはLocalをインストールしていきます。

Localの公式サイトにアクセスし、「DOWNLOAD FOR FREE」ボタンをクリックしてインストーラーをダウンロードします。

プラットフォームや名前、組織、メールアドレスを求められますがここは適当に入力してOKです。

容量が結構大きいのでダウンロードに結構時間がかかります。お茶でも飲んで待ちましょう。
インストーラーのダウンロードができたらインストールしてください。

STEP

サイトの作成

Localを起動します。
初回起動時はアカウントを作成するように言われますが、×で閉じてしまってOKです。

サイトの作成は「Create a new site」ボタンから行います。

「Create a new site」を選択します。

サイト名を決める画面になるので、好きな名前を付けましょう。（後で変更も可能）
今回はwp_testとしました。

次はPHPのバージョンなど、細かく開発環境を設定することもできるのですが、ここは「Preferred」のままにします。

ユーザ名とパスワードを設定します。（メールアドレスはそのままでOK）

しばらく待つとサイトが作成され、管理画面が表示されます。

「WP Admin」ボタンを押せばWordPressの管理画面が、「Go to site folder」ボタンを押せばサイトのホームディレクトリが表示されます。

STEP

WordPress管理画面での初期設定

Localで「WP Admin」ボタンを押し、WordPressの管理画面にログインします。
ブログをやっている方にとってはおなじみの画面ですね！

ただ、Localで作成したサイトはデフォルトで英語表記になっていますので、メニューのSetting > Generalを開き「Site Language」を「日本語」に「Timezone」を「UTC+9」に設定します。

これでローカルでWordPressをいじれる環境ができました！

WordPressにオリジナルテーマを追加する

WordPressの管理画面、外観 > テーマを開くと、デフォルトでインストールされているテーマがあります。（Twentyシリーズ）

まずはここにオリジナルテーマを追加していきましょう。

STEP

空のテーマを作る

Localの画面で「go to site folder」ボタンを押下し、サイトのホームディレクトリを開きます。
（私の環境ではC:\ユーザ\Local Sites\wptestでした）

さらにapp > public > wp-content > themesと進むと、テーマが各フォルダに分かれて格納されているのがわかると思います。
WordPressの管理画面で表示されるテーマは全てここにフォルダがあるということですね。

まずはこのディレクトリにオリジナルテーマのフォルダを作成します。

今回は「original」としました。

STEP

最小構成のファイルを作成する

このままだとテーマとしてWordPressに認識してもらえないので、最低限必要になる

index.php
style.css

の2つのファイルを作成します。

※私はSCSSを使って開発したいのでファイルが多いですが、上記2ファイルだけでOKです。

STEP

style.cssを編集する

次にstyle.cssを編集します。

style.cssにはコメントヘッダーというテーマの情報を記載するものが必要なので、こちらを記述していきます。

@charset "utf-8";
/*
Theme Name: original
Theme URI: テーマのホームサイトのURL
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のサイトのURL
Version: バージョン
*/

このうちテーマ名のみが必須です。

WordPressの管理画面で表示されるテーマ名もここで決めた名前になります。

他の項目は必要なければ削除してしまっても構いません。

ここまで完了したら管理画面のテーマ一覧を見てみましょう。

作成したテーマが表示されるようになりました！

ただ、イメージ画像が設定されていないのでちょっと寂しい感じがします。

STEP

（必須じゃないけど）テーマのイメージ画像を設定する

※これは動作には関係ないので必要なければ飛ばしてください。

テーマのイメージ画像を設定する方法は、screenshot.pngまたはscreenshot.jpgとリネームした画像をテーマディレクトリに格納するだけです。

ちーも

もちろん画像はうさぎ

サイズは1200×900pxが推奨されていますが比率が同じであれば別サイズでもOKです。（4：3）

管理画面を見るとイメージ画像がきちんと設定されていますね。

HTMLサイトをWordPress化する

ここからは事前準備にて用意したサンプルサイトをWordPress化していきます。

事前準備で作成したサイトはこんな感じの構成でした。（コードはこっち）

STEP

テーマディレクトリにファイルをコピーする

まずはHTMLサイトディレクトリのimgをフォルダごとテーマディレクトリ内にコピーします。

次にHTMLサイトディレクトリのindex.htmlの内容を、テーマディレクトリ内のindex.phpに転記します。（index.phpにリネームして上書きでも〇）

最後にHTMLサイトディレクトリのcssの内容をテーマディレクトリ内のstyle.cssに転記します。（コメントヘッダーは消さないでくださいね）

こちらも上書きでも〇

とにかく作ったものをテーマディレクトリ内に移していきます。

ここまで出来たらWordPressのサイトを確認してみます。

ちーも

画像やCSSが表示されなくなった！！

STEP

パス指定の記述を変更する

HTMLで構築しているとき、パスは相対パスで記述していました（img/ファイル名.png）

なので別のディレクトリに移動してもこの指定方法で合っていて、そのまま表示できそうではあります。

ちーも

じゃあなんでダメなんだーー！

ここで詳しくは書きませんがWordPressの内部処理により、テーマディレクトリからのパスを指定する必要があるんですね。

ただ毎回絶対パスを書くのは面倒なので、便利な関数を使っていきます。

それがこちら。

get_template_directory_uri()

これはテーマディレクトリ（index.php style.cssがある場所）のURLを取得する関数です。

私のテストサイトの場合、”http://wptest.local/wp-content/themes/original”が取得されることになりますね。

こちらの関数を使ってstyle.cssと画像のパスを置き換えていきます。

--CSSの読み込み
<link rel="stylesheet" href="style.css">
↓
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

--画像パス
<img src="img/sample-01.jpg">
↓
<img src="<?php echo get_template_directory_uri(); ?>/img/sample-01.jpg">

画像はたくさん置いてあるので、エディタの置換機能を使うと楽だと思います。

サイトの表示を更新してみましょう。

画像とcssがきちんと表示されるようになりました！

STEP

WordPressサイトに必須な関数を追加

WordPressでサイトを作成する際には、必ず記述しなければいけない関数があります。

それが

wp_head()
wp_footer()

の2つ。

先ほどのスクショを見て気付かれた方がいたかもしれませんが、サイトのプレビュー画面上部に表示されるはずの管理バーがありません。

上の2つの関数はWordPressの基本機能やプラグインの読み込みを行うものなので、これらがないと画面がエラーになったり、ログイン時に表示されるはずの管理バーが表示されないなどの問題が起きてしまいます。

それでは困ってしまうので、2つの関数を追加していきましょう。

wp_head()

</head>の直前に入れます。

・・・
    <title>Sample Cafe</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    <?php wp_head(); ?>
</head>

wp_footer()

</body>の直前に入れます。

・・・
    <div class="copyright"><p>Copyright © Lapin.web All Rights Reserved.</p></div>
    </footer>
    <?php wp_footer(); ?>
  </body>
</HTML>

もう一度サイトの表示を更新してみると、きちんと管理バーが表示されるようになりました。

STEP

テンプレートを分割する

ここまでで見た目はHTMLサイトと同じになりましたが、WordPressを活用していくためにはテンプレートを分割していく必要があります。

WordPressのテンプレートファイルには以下のようなものがあります。

index.php

他に表示優先度の高いファイルがない場合、このファイルの内容が表示されます。
今回はTOPページを表示させるためのファイルとして扱っています。

その他TOPページ用のファイルとして、front-page.phpやhome.phpがあります。（本当はこっちをTOPページ用として用意したほうがいいです）

header.php

<head>～<body>の上の方を記述するファイル。
主にグローバルナビの構成を行います。

footer.php

body下部の主にフッターを構成するファイル。<footer>～</HTML>

page.php

固定ページのテンプレートファイル

single.php

投稿ページのテンプレートファイル

archive.php

カテゴリーやタグページで記事を一覧表示するためのテンプレートファイル

sidebar.php

サイドバーを構成するテンプレートファイル

404.php

エラーページ用テンプレートファイル

このファイルがない場合でもWordPressで用意されたデフォルトのエラーページが表示されますが、カスタマイズしたい場合はこのファイルに記述します。

functions.php

デザインというよりは機能や動作の制御を行うファイル。CSSやJavaScriptの外部ファイル読み込み、独自関数の設定などを行います。

例えば投稿ページや固定ページ内ではカスタムHTMLのブロックは挿入できますが、phpは挿入することができません。
そこでfunctions.phpで事前にphp処理をショートコードとして記述しておくことで、そのショートコードを呼び出してPHP処理を行うといったようなことができます。

他にもテンプレートファイルの種類はたくさんあるのですが、よく使うのはこのあたりだと思います。

ちなみにheader.php、footer.php、page.phpなど、page-◯◯.phpのようにして複数ファイルを作成、用途によって使い分けるということができるものもあります。

固定ページテンプレートは複数作ることで、WordPressの管理画面から簡単に選択してページの作成ができるので便利です。

別ファイルの読み込みを利用したSWELLカスタマイズ例はこちら

あわせて読みたい

【SWELL】複数ヘッダ、固定ページカスタムテンプレート、PHPでLP作成！機能を使いこなしてポートフォリ… 当ブログの開設は元々自分のポートフォリオサイトを作るオマケだったのですが、いつの間にかブログのカスタマイズにハマってしまい、ポートフォリオが後回しになってし…

ヘッダーやフッター、サイドバーは色々なページで使いまわすことになりますが、そのページごとに毎回同じ記述を書いていては手間＆メンテナンスが大変になってしまいます。

そこでテンプレートファイルを分け、ページを表示する際にそれぞれを読み込むことで１つのページをつくるようにします。

このテストサイトではindex.phpの内容を

index.php
header.php
footer.php
sidebar.php

の4つに分割していきます。

ビジュアル的にいうとこんな感じ。

コードでいうとこんな感じ。（分割する部分にコメントを入れてみました）

コードを表示

<!-- header.php ここから -->
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta name='robots' content='index,follow'>
    <meta name='description' content='Sample Cafe公式サイト'>
    <title>Sample Cafe</title>
    <link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/style.css'>
    <?php wp_head(); ?>
  </head>

  <body>
    <header id='header'>
      <div class='inner'>
          <div class='logo_box'><img class='w100' src='<?php echo get_template_directory_uri(); ?>/img/logo.png'></div>
          <nav>
              <ul>
                  <li><a href='#'>HOME</a></li>
                  <li><a href='#'>NEWS</a></li>
                  <li><a href='#'>SHOP LIST</a></li>
                  <li><a href='#'>CONTACT</a></li>
              </ul>
          </nav>
      </div>
    </header>
<!-- header.php ここまで -->
<!-- index.php ここから -->
    <div class='hero'>
      <img src='<?php echo get_template_directory_uri(); ?>/img/main_img.jpg'>
      <div class='hero_text'><p>隠れ家のような落ち着いた空間をあなたに</p></div>
    </div>
    <div id='main'>
      <div class='main_contents'>
        <h1>商品情報</h1>
        <div class='article_card_list'>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-01.jpg'>
              </div>
              <div class='text_box'>
                <h2>3種のドリンク飲み比べ</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-02.jpg'>
              </div>
              <div class='text_box'>
                <h2>ラテアート</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-03.jpg'>
              </div>
              <div class='text_box'>
                <h2>ドリンク、ケーキセット</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-04.jpg'>
              </div>
              <div class='text_box'>
                <h2>季節のタルトケーキ</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <!-- sidebar.php ここから -->
      <div class='side_contents'>
        <h1>お知らせ</h1>
        <div class='side_content_box'>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/side-01.jpg'>
              </div>
              <div class='text_box'>
                <h2>新店舗オープンのお知らせ</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
        </div>
        <div class='side_content_box'>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/side-02.jpg'>
              </div>
              <div class='text_box'>
                <h2>営業時間が変更になります</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
        </div>
        <div class='side_content_box'>
          <a href='#' class='btn btn_saiyou'>採用情報</a>
          <a href='#' class='btn btn_tenpo'>店舗を探す</a>
        </div>
      </div>
      <!-- sidebar.php ここまで -->
    </div>
<!-- index.php ここまで -->
<!-- footer.php ここから -->
    <footer>
      <div class='footer_contents_wrapper'>
        <div class='footer_address'>
          <ul>
            <li>Sample Cafe</li>
            <li>〒111-1111　東京都千代田区1丁目</li>
            <li>℡.012-345-6789</li>
          </ul>
        </div>
        <a href='#' class='btn btn_contact_us'>Contact us</a>
      </div>
      <div class='copyright'><p>Copyright © Lapin.web All Rights Reserved.</p></div>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>
<!-- footer.php ここまで -->

ファイルの作成

まずはテーマディレクトリ内に

header.php
footer.php
sidebar.php

を追加しましょう。ファイル構成はこんな感じになります。

header.phpの修正

サンプルコードの

<!-- header.php ここから -->
・・・
<!-- header.php ここまで -->

の中身をheader.phpに移動します。

footer.phpの修正

同じように

<!-- footer.php ここから -->
・・・
<!-- footer.php ここまで -->

の中身をfooter.phpに移動します。

sidebar.phpの修正

同じように（略）

index.phpの修正

これでindex.phpの中身は

<!-- index.php ここから -->
・・・
<!-- index.php ここまで -->

の内容だけが残った状態になりました。

このままだと別ファイルに移動したものがただなくなっただけになってしまうので、各テンプレートファイルを読み込む記述を追加します。

追加する関数は以下の通り。

get_header()
get_sidebar()
get_footer()

別ファイルに移動する前と同じ場所で読み込みます。

index.phpはこんな感じになりました。

<?php get_header(); ?><!-- header.phpの読み込み -->

<!-- index.php ここから -->
    <div class='hero'>
      <img src='<?php echo get_template_directory_uri(); ?>/img/main_img.jpg'>
      <div class='hero_text'><p>隠れ家のような落ち着いた空間をあなたに</p></div>
    </div>
    <div id='main'>
      <div class='main_contents'>
        <h1>商品情報</h1>
        <div class='article_card_list'>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-01.jpg'>
              </div>
              <div class='text_box'>
                <h2>3種のドリンク飲み比べ</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-02.jpg'>
              </div>
              <div class='text_box'>
                <h2>ラテアート</h2>
                <p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-03.jpg'>
              </div>
              <div class='text_box'>
                <h2>ドリンク、ケーキセット</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
          <a href='#' class='article_card_wrapper'>
            <div class='article_card'>
              <div class='img_box'>
                <img src='<?php echo get_template_directory_uri(); ?>/img/sample-04.jpg'>
              </div>
              <div class='text_box'>
                <h2>季節のタルトケーキ</h2>
                <p>testtesttest</p>
              </div>
            </div>
          </a>
        </div>
      </div>
      <?php get_sidebar(); ?><!-- sidebar.phpの読み込み -->
    </div>
<!-- index.php ここまで -->

<?php get_footer(); ?><!-- footer.phpの読み込み -->

ちーも

だいぶスッキリしたコードになった！

サイトを表示してみると、見た目はさっきと変わらないですが…。
というか変わらないのが問題なく作業できたという証拠です！

投稿をカテゴリー別に取得し表示できるようにする

これでHTMLで作成したサンプルサイトをWordPressに載せ、テンプレートを分割することができました。

とはいえ一見記事ページが並んでいるように見える商品情報、お知らせ部分もHTMLで構成されているだけなので、WordPressの管理画面で記事を修正しても追加してもその変更が反映されるわけではありません。

次はTOP画面の商品情報とサイドバーのお知らせ欄を、投稿記事から情報を取得しカードとして自動で表示するように修正していきます。

表示される画像はアイキャッチ画像として設定されているものを表示し、その下に記事タイトル、本文から抜粋文を表示するようにします。

STEP

アイキャッチ画像を設定できるようにする

さっそく商品情報とお知らせ用の記事を作成していきたいところですが、1からテーマを作成している場合、投稿の編集画面にはアイキャッチ画像を設定する機能がありません。

だいたいのテーマにある機能なので標準機能かと思いきや、自分で追加する必要があるんです。

アイキャッチ画像機能を追加する方法

テーマディレクトリ内に

functions.phpを追加し以下のコードを記述して保存します。

<?php
function site_setup() {
  add_theme_support('post-thumbnails'); //アイキャッチ画像を設定できるようにする
}
add_action('after_setup_theme', 'site_setup');

これでアイキャッチ画像が設定できるようになりました。

記事を準備しよう

商品情報とお知らせを記事として管理できるようにしたいのでそれぞれカテゴリを作成します。

ここで設定した「スラッグ」が後で投稿を取得する際に必要になります。

元々HTMLで表示していた商品情報4つ分と、お知らせ2つ分の記事を用意しました。（文面は全部HTMLからコピー）

ちーも

カテゴリーを選択するのを忘れずに！

STEP

投稿をカテゴリー別に取得し表示する

index.phpの方から修正していきましょう。

サンプルコードでいうと

<div class='article_card_list'>
・・・
</div>

この中身が表示したい分繰り返しになっていますね。なのでここにカテゴリースラッグが「menu」の記事を取得し、表示するようにしていきます。

上記<div>ごと下のコードに置き換えます。

<?php
$args = array(
  "category_name" => "menu", //カテゴリを指定（スラッグ名）
  "order" => "DESC" //ソート順（日付の新しい順）
);
  $menu_list = get_posts($args);
  if ($menu_list):
?>
<div class="article_card_list">
  <?php
    foreach ( $menu_list as $post ): //$postは変更不可
      setup_postdata( $post );
  ?>
  <a href="<?php the_permalink(); ?>" class="article_card_wrapper">
    <div class="article_card">
      <div class="img_box">
        <img src="<?php the_post_thumbnail_url(); ?>">
      </div>
      <div class="text_box">
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
      </div>
    </div>
  </a>
  <?php endforeach; ?>
</div>
<?php else: ?>
<p>記事がありません</P>
<?php
  endif;
  wp_reset_postdata();
?>

ソートはデフォルトで日付順です。

1つ気を付けなければいけないのは、

<?php
  foreach ( $menu_list as $post ): //$postは変更不可
    setup_postdata( $post );
?>

この部分の$postは別の変数名だと正しく動かなくなってしまうので変更することができません。

必ず$postにしてください。

setup_postdata()で記事の情報をセットし、簡単にリンクやタイトル、本文などを取得できるようになります。ループ後にwp_reset_postdata()で初期化することを忘れずに。

基本この2つの関数はセットで使います。

記事の詳細情報は以下の関数で取得しています。

the_permalink()　⇒　記事へのリンクURL
the_title()　⇒　投稿タイトル
the_content()　⇒　記事の本文
the_post_thumbnail_url()　⇒　アイキャッチ画像

修正したindex.phpのコード全体はこんな感じ。

<?php get_header(); ?><!-- header.phpの読み込み -->

<div class='hero'>
  <img src='<?php echo get_theme_mod('main_visual_img'); ?>'>
  <div class='hero_text'><p><?php echo get_theme_mod('main_visual_text'); ?></p></div>
</div>
<div id='main'>
  <div class='main_contents'>
    <h1>商品情報</h1>
    <?php
    $args = array(
      'category_name' => 'menu', //カテゴリを指定（スラッグ名）
      'order' => 'DESC' //ソート順（日付の新しい順）
    );
      $menu_list = get_posts($args);
      if ($menu_list):
    ?>
    <div class='article_card_list'>
      <?php
        foreach ( $menu_list as $post ): //$postは変更不可
          setup_postdata( $post );
      ?>
      <a href='<?php the_permalink(); ?>' class='article_card_wrapper'>
        <div class='article_card'>
          <div class='img_box'>
            <img src='<?php the_post_thumbnail_url(); ?>'>
          </div>
          <div class='text_box'>
            <h2><?php the_title(); ?></h2>
            <p><?php the_content(); ?></p>
          </div>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
    <?php else: ?>
    <p>記事がありません</P>
    <?php
      endif;
      wp_reset_postdata();
    ?>
  </div>
  <?php get_sidebar(); ?><!-- sidebar.phpの読み込み -->
</div>

<?php get_footer(); ?><!-- footer.phpの読み込み -->

これで投稿のカテゴリー「menu」から商品情報として自動で表示されるようになりました。

このままだと前と見た目が一緒で変化が分かりにくいので、試しに商品情報を追加してみます。

ページを更新すると追加した内容が表示されました！

今後はHTMLをいじることなく、表示したい情報を追加・変更することができます。

sidebar.phpも同じように修正していけばOK！

category_nameを表示したいカテゴリーのスラッグに変えてくださいね。（今回は’news’）

テーマカスタマイザーのカスタマイズ

ようやくこの記事最後の作業になります！
テーマカスタマイザーのカスタマイズという、なんかもやっとした書き方しか思いつかなかったのは見逃してください。

テーマカスタマイザーとは

管理画面の「外観＞カスタマイズ」から開ける、サイトの細かい設定を行えるメニュー

多くのテーマはここから文字色やメインビジュアルの画像を簡単に変更することができますよね。
現段階だと初期の項目しかないので、サイト名の変更などかなり限定的なことしかできません。

とりあえずこのサンプルサイトのメインビジュアルの画像と画像上文字を、カスタマイザーから変更できるようにしたいと思います。

設定後のイメージはこんな感じ。

STEP

カスタマイザーに設定項目を追加する

カスタマイザーのカスタマイズはAPIを使うことで実現できます。

そのためにfunctions.phpに処理を追加していきます。

カスタマイザーの変更は

セクション　⇒　フォルダみたいな感じ
テーマ設定　⇒　設定を定義する・デフォルト値などの設定
コントロール　⇒　テーマ設定の詳細を書く
（パネル）　⇒　セクションフォルダを入れるさらにでかいフォルダ

で成り立っています。

パネルは無くてもOK、テーマ設定とコントロールはニコイチ（死語？）なので、セットで作っていきます。

設定項目を追加するには、「セクション」の追加を行います。

まずはメインビジュアルに関連する設定を格納できるように、セクションの追加を行います。

function mytheme_customize($wp_customize) {
  //メインビジュアル設定セクション
	$wp_customize->add_section('main_visual_setting', array( //ID
			'title'    => 'メインビジュアル設定', //表示名
			'priority' => 1, //表示順
		)
	);
}
add_action('customize_register','mytheme_customize');

コードはアイキャッチ用の記述の下に追加してください。

次にテーマ設定、コントロールのセットを先ほどのセクションに追加していきます。
まずはメインビジュアル上の文字の方からやっていきますね。

//メインビジュアル画像上文字　テーマ設定
$wp_customize->add_setting('main_visual_text'); //ID
//メインビジュアル画像上文字　コントロール
$wp_customize->add_control('main_visual_text', array(
  'section' => 'main_visual_setting', //所属させるセクションID
  'settings' => 'main_visual_text', //紐づけるテーマ設定ID
  'label' => 'メインビジュアル上に表示する文字', //表示名
  'description' => 'メインビジュアルの上に文字を表示できます', //説明
  'type' => 'text', //フィールドタイプ
  'priority' => 1, //表示順
));

コントロールでは、セクションとテーマ設定のIDで紐づけを行っています。

フィールドタイプは「text」を使用しましたが、他にもチェックボックスやラジオボタンを指定することができます。

メインビジュアル画像の方もやっていきましょう。

//メインビジュアル画像　テーマ設定
$wp_customize->add_setting('main_visual_img', array(
    'default' => get_template_directory_uri() . '/img/main_img.jpg', //デフォルトで適用される画像を指定
  )
);
//メインビジュアル画像　コントロール
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'main_visual_img', array(
    'section' => 'main_visual_setting',
    'settings' => 'main_visual_img',
    'label' => 'メインビジュアル画像の設定',
    'description' => 'お好きな画像をメインビジュアルに設定できます。',
    'priority' => 2,
  )
));

設定内容が画像の場合はコントロールの書き方が変わります。

こちらはテーマ設定でデフォルト画像の指定もしてみました。

STEP

カスタマイザーで設定した内容をテンプレートに出力する

カスタマイザーで設定をいじれるようになりましたが、テンプレートへ出力する記述がないのでこのままでは設定が反映されません。

該当部分を修正していきましょう。

<div class='hero'>
  <img src='<?php echo get_template_directory_uri(); ?>/img/main_img.jpg'>
  <div class='hero_text'><p>隠れ家のような落ち着いた空間をあなたに</p></div>
</div>
↓
<div class='hero'>
  <img src='<?php echo get_theme_mod('main_visual_img'); ?>'>
  <div class='hero_text'><p><?php echo get_theme_mod('main_visual_text'); ?></p></div>
</div>

設定内容の出力はget_theme_mod()を使います。引数はテーマ設定IDです。

これでカスタマイザーの内容を反映することができるようになりました！