【 更新 】おすすめ記事はこちら

WordPress

【WordPress】自作テーマでオリジナルサイトを作る！テンプレート付

既存テーマを使うと時短にはなるものの、自由度が少なく、オリジナリティにやや欠けます。

とは言え改造しようとすれば、その分開発に時間がかかるので、売上や効率を考えるとちょっと・・・というケースも。

そんな悩みを解決してくれるのが「自作テーマ」！実際に取り入れて良かった点は、次の2つ。

  • 自分に合った扱いやすい構造にできる
  • デザイン、機能を自由に決められる

他にも色々ありますが、既存テーマに左右されずにサイト構築できるところが嬉しいですね。

まずは、テーマに必要な「データ」と「階層」の理解からスタート。その後、一部のHTMLをPHPに置き換えてテーマ化していきます。

管理画面との連携（投稿記事や一覧表示など）までは行いませんので、予めご了承ください。

サンプルテーマ完成図

本記事は、PHPファイルにコンテンツ、コードを書き込んでいく初心者向けの方法です。管理画面で登録したコンテンツを反映させたくないときにも使えます。

はじめに

WordPressテーマを作る前に、元となる「2フォルダ」「3ファイル」を作成します。

  • assets
  • css
  • index.html
  • style.css
  • reset.css（任意のものを使用）

このとき「外観」＞「テーマ」に表示する画像を用意すると、テーマらしくなります。

  • screenshot.png（880×660）

ファイルとフォルダは以下のように配置してください。以降「元データ」と呼びます。

├─assets // bg_mv.jpgを入れる
├─css // reset.cssを入れる
├─index.html
├─screenshot.png
└─style.css

index.html

reset.cssとstyle.cssをheadに読み込んだ上で、メインの内容を追記していきます。

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./style.css">

全体にMontserratフォントを適用しているので、あわせて読み込むとグッとオシャレに。

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

こちらがメインのコードです。htmlおよびheadは省略していますが、入っている前提。

<body>
    <div class="l-container">

    <header class="l-header">
        <div class="l-header__inner">
            <div class="l-header-logo">LOGO</div>
            <nav class="l-header-nav">
                <ul class="p-gnav">
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">TOP</a></li>
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">ABOUT</a></li>
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">BLOG</a></li>
                </ul>
            </nav>
        </div>
        <div class="l-header__hero"></div>
    </header><!-- /.l-header -->

    <div class="l-main">
        <div class="l-main__inner">
            <section class="l-summary">
                <div class="l-summary__text">
                    <h2 class="c-title--xl">Headline</h2>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
                <img src="./assets/bg_mv.jpg" class="l-summary__image" alt="イメージ">
            </section><!-- /.l-summary -->
            <section class="l-summary">
                <div class="l-summary__text">
                    <h2 class="c-title--xl">Headline</h2>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
                <img src="./assets/bg_mv.jpg" class="l-summary__image" alt="イメージ">
            </section><!-- /.l-summary -->
        </div>
    </div><!-- /.l-main -->

    <footer class="l-footer">
        <div class="l-footer__inner">
            <p>ORIGIN</p>
        </div>
    </footer><!-- /.l-footer -->

    </div><!-- /.l-container -->
</body>

style.css

同じくメインのスタイルシート。「モバイルファースト」でレスポンシブ対応にしています。

PCは「1025px以上」、SPは最小幅「375px」の仕様。

@charset "UTF-8";

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  line-height: 1.5;
  color: #222222;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: #222222;
}

/* ==========================================================================
   Header
   ========================================================================== */

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
.l-header__hero {
  width: 100%;
  height: 400px;
  background: url("./assets/bg_mv.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}
.l-header-logo {
  padding: 40px;
  color: #999;
  background-color: #222222;
}

/* ==========================================================================
   Global-navigation
   ========================================================================== */

.p-gnav {
  display: flex;
  align-items: center;
}
.p-gnav__item {
  margin-right: 16px;
  font-weight: bold;
}
@media screen and (min-width: 1025px) {
  .p-gnav__item {
    margin-right: 48px;
    font-size: 24px;
  }
}
.p-gnav__item:last-child {
  margin-right: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.l-footer {
  background-color: #222222;
}
.l-footer__inner {
  width: 90%;
  max-width: 960px;
  padding: 80px 0;
  margin: 0 auto;
}
.l-footer__inner p {

  font-weight: bold;
  color: #999999;
  text-align: center;
}
@media screen and (min-width: 1025px) {
  .l-footer__inner p {
    font-size: 24px;
  }
}

/* ==========================================================================
   Main
   ========================================================================== */

.l-main__inner {
  width: 90%;
  max-width: 960px;
  padding: 96px 0 128px;
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .l-main__inner {
    padding: 128px 0 192px;
  }
}

/* Title
   ----------------------------------------------------------------- */
.c-title--xl {
  margin-bottom: 32px;
  font-size: 48px;
}

/* About
   ----------------------------------------------------------------- */
.l-summary {
  margin-bottom: 64px;
}
@media screen and (min-width: 1025px) {
  .l-summary {
    display: flex;
    align-items: center;
    margin-bottom: 96px;
  }
}
@media screen and (min-width: 1025px) {
  .l-summary:first-child > img {
    margin-left: 64px;
  }
}
.l-summary:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 1025px) {
  .l-summary:last-child {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1025px) {
  .l-summary:last-child > img {
    margin-right: 64px;
  }
}
@media screen and (min-width: 1025px) {
  .l-summary__text {
    width: 50%;
  }
}
.l-summary__text > p {
  margin-bottom: 48px;
  line-height: 2;
  text-align: justify;
}
@media screen and (min-width: 1025px) {
  .l-summary__text > p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1025px) {
  .l-summary__image {
    width: 50%;
  }
}

スタイルヘッダを作成

スタイルヘッダは任意になります。自分が作ったことの証明、著作権情報を残したいときに入れておきます。

style.css

記述は@charset "UTF-8";のすぐ下に入れてください。内容は必要に応じて追加、削除してOK。

/******************************************************************
 Theme Name: Origin
 Theme URI: http://origin.com/
 Description: ブログ用テーマ「Origin」
 Author: Your name
 Author URI: http://origin.com/
 License: GNU General Public License
 License URI: http://www.gnu.org/licenses/gpl.html
 Version: 1.0.0
 Copyright (C) Origin(オリジナル).
******************************************************************/

テーマフォルダを作成

「wp-content」＞「themes」と進み、既存テーマと同じ階層にテーマフォルダを作ります。

ここでは「origin」としていますが、自由に名前をつけてください。

├─origin // テーマフォルダ作成
├─twentytwentyone
├─twentytwentytwo
└─index.php

つづいて、テーマフォルダにテーマ化する前の「元データ」をまるごとコピー。

├─assets
├─css
├─index.html
├─screenshot.png
└─style.css

index.htmlのみindex.phpと拡張子を変えて、PHPファイルに変更します。

├─assets
├─css
├─index.php // PHPファイルに変更
├─screenshot.png
└─style.css

ここまでの状態を確認するため、管理画面の「外観」から作成したテーマを有効化します。

テーマを有効化

この時点では、サイトを表示してもCSSが適用されておらず、崩れた状態になっているはずです。

役割ごとにコードを分割

以下「4ファイル」を作成し、index.phpの内容を役割ごとにパーツ化していきます。

  • header.php
  • footer.php
  • index.php
  • functions.php

共通部分を分ける作業をすることで、ページをまたいで一括で修正ができるようになります。

header.php

<body>
    <div class="l-container">
    <header class="l-header">
        <div class="l-header__inner">
            <div class="l-header-logo">LOGO</div>
            <nav class="l-header-nav">
                <ul class="p-gnav">
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">TOP</a></li>
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">ABOUT</a></li>
                    <li class="p-gnav__item"><a class="p-gnav__link" href="#">BLOG</a></li>
                </ul>
            </nav>
        </div>
        <div class="l-header__hero"></div>
    </header><!-- /.l-header -->

footer.php

    <footer class="l-footer">
        <div class="l-footer__inner">
            <p>ORIGIN</p>
        </div>
    </footer><!-- /.l-footer -->

    </div><!-- /.l-container -->
</body>

index.php

<div class="l-container">
    
    <div class="l-main">
        <div class="l-main__inner">

            <div class="l-summary">
                <div class="l-summary__text">
                    <h2 class="c-title--xl">Headline</h2>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
                <img src="./assets/bg_mv.jpg" class="l-summary__image" alt="イメージ">
            </div><!-- /.l-summary -->
            <div class="l-summary">
                <div class="l-summary__text">
                    <h2 class="c-title--xl">Headline</h2>
                    <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
                </div>
                <img src="./assets/bg_mv.jpg" class="l-summary__image" alt="イメージ">
            </div><!-- /.l-summary -->

        </div>
    </div><!-- /.l-main -->
    
</div><!-- /.l-container -->

functions.php

こちらは設定ファイルのため、一旦作成まで。ファイルパス以外に使うコードはありません。

ただし、そのままの書き方では反映されないので「スタイルシートを再設定」の形に変更します。

テンプレートタグに置換

テーマ化するとデータの取得、出力方法が変わるため、現在の書き方では画像やリンクを利用できません。

ここからは、WordPress専用の「テンプレートタグ（WordPress関数）」に置き換えていきます。

画像を出力

imgタグの「src属性」に、PHPコード、ファイル名などを入力し、貼り付けてください。

<img src="<?php echo get_template_directory_uri(); ?>/フォルダ名/ファイル名.拡張子">

以下使用したテンプレートタグは、有効にしているテーマディレクトリのパスを取得します。

get_template_directory_uri()

get_template_directory_uriタグで出力されるコードは、最終的にこのようになります。

<img src="https://example.com/wp/wp-content/themes/テーマ名/フォルダ名/ファイル名.拡張子">

リンクを出力

メニューなどで使うaタグの「href属性」には、以下のPHPコードを貼り付けます。

<a href="<?php echo esc_url( home_url('/スラッグ/') ); ?>">

こちらは、esc_urlとhome_urlの2つから構成されているため、分解して見ていきます。

1つ目は、エスケープ処理をしてセキュリティ的に問題ないURLにするテンプレートタグ。

esc_url()

2つ目は、サイトのホームURLを取得するテンプレートタグで、単体でも使用可能です。

home_url()

2つを組み合わせて最終的に出力されるのが、ホームURLからはじまるリンクになります。

<a href="http://example.com/wp/スラッグ/">

パーツを出力

最後に「役割ごとにコードを分割」で分けたものを、index.phpに出力していきます。

ヘッダー部分があった場所に、以下のテンプレートタグを貼り付けてください。

<?php get_header(); ?>

同じくフッター部分があった場所には、以下のテンプレートタグを貼り付けます。

<?php get_footer(); ?>

テーマディレクトリにあるheader.php、footer.phpを取得するテンプレートタグ。

get_header()
get_footer()

スタイルシートを再設定

これまでheadに記述していたスタイルシート、Webフォントを設定ファイルにまとめます。

functions.php

functions.phpは、投稿や外観などテーマ全体にかかわる機能を追加、一括管理するために用意されたファイルです。

今回対象となる、2つのスタイルシートとGoogleフォントを以下のように読み込んでいきます。

<?php
    function enqueue_files(){
        // フォント
        wp_enqueue_style('style_Montserrat_NotoSansJP', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap', array(), '1.0.0');
        // スタイルシート
        wp_enqueue_style('style_reset', get_template_directory_uri() . '/css/reset.css', array(), '1.0.0');
        wp_enqueue_style('style_main', get_template_directory_uri() . '/style.css', array(), '1.0.0');
   }
    add_action('wp_enqueue_scripts','enqueue_files');
?>

詳しいコードの書き方、ファイル別の読み込み方については、こちらの記事をご参考ください。

関連記事【WordPress】CSSとJSをfunctions.phpで読み込んで出力する

余談になりますが、外観にあるメニューやウィジェットは、出力コードを書かないと利用できない機能です。

実際に管理画面を開いてみると確認できます。テーマを作るようになるとこのような場面が徐々に出てきます。

アクションフックと関数

WordPressのシステム側が、必要なコードを自動で挿入できるよう関数を設置していきます。

その際、関数で使うwp_head、wp_footerは「アクションフック」と呼ばれ、特定のフックに引っかけて任意の処理をさせる機能を持っています。

各コードを入れることで、スタイルシートとWebフォントはheader.phpに、スクリプトファイルはfooter.phpに出力されます。

header.php

header.phpの</head>の直前に、以下コードを貼り付けます。

<?php wp_head(); ?>

関数にheadとあるように<head>タグの末尾のタイミングで実行される処理になります。

wp_head()

footer.php

footer.phpの</body>の直前に、以下コードを貼り付けます。 

<?php wp_footer(); ?>

footerとありますが、設置した<body>タグの末尾のタイミングで実行されるので注意。

wp_footer()

wp_footer()を書くことで、ログイン中の画面上部にツールバーが表示されるようになります。

ツールバーの表示には、予め「個人設定」のチェック有無、再ログインが必要です。

おわりに

「アクションフックと関数」に出てきたコードを入れて、ようやくサイトの表示が直りました。

念のため、index.htmlと見比べるなどしてページを確認してください。

テーマ化ははじめ難しく感じますが、テーマとして認識させるだけなら必要ファイルを揃えれば簡単にできてしまいます。

押さえておきたいのは、ファイルの分割とコードの置換の2つ。あとは追って身についていくものなので、まずは手順に慣れていきましょう。

今後大切になるのは、PHPファイルの優先順位と、WordPress専用の書き方を知ること。

以下公式マニュアルなども参考に、少しずつ自分に合ったテーマを開発、拡張していってください。

あわせて読みたい