今回はWordPress(ワードプレス)でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にWordPressテーマの作成方法の基本について説明していきます。
 

■今回WordPress化する静的サイトの例
自作テーマ作成解説用に準備した静的サイト

目次

WordPressとは 基本のおさらい

WordPressの概要構成

以下はWordPressの構成、いわゆるシステムの実体の概要図です。

ワードプレスの構成

静的サイトの場合HTMLや画像などのファイル類で構成されますが、WordPressはさらにPHPというプログラム言語とMySQLと言われるデータベース(データの蓄積される場所)を利用しています。

ブログ情報(文章)などもデータベースに蓄積され、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、WordPressのシステムを提供しています。

WordPressのフォルダ・ディレクトリ構成

つぎに、WordPressのフォルダ・ディレクトリ構成(下図の赤枠の部分)について説明します。

WordPressのディレクトリ構成

以下はWordPressのインストールフォルダの中身です。

WordPressのインストールフォルダの中身

主要なファイル・フォルダは下記の通り。

フォルダ・ファイル名内容
wp-contentWordPressのテーマやプラグイン、画像データなどが入ったフォルダ。WordPressをカスタマイズする際には、主にこのフォルダの中のファイル類に対して作業していきます。
wp-adminWordPressの管理画面用のファイル類が格納されているフォルダ
wp-includesWordPressのシステム全般に関するファイル類が格納されているフォルダ。
wp-config.phpWordPressの設定ファイル。データベースとの通信に必要な情報なども記述されており、とても重要なファイル
wp-login.phpWordPressのログイン画面に関するファイル
wp-load.phpWordPressの動作に必要なプログラム類を読み込むファイル
index.phpサイトにアクセスがあった時に最初に読み込まれるファイル

wp-contentは、WordPressのテーマやプラグイン、画像などを格納するフォルダです。

下記はwp-contentの中身です。この中の「themes」にWordPressのテーマが格納されています。
テーマを作成・カスタマイズ する時に触るフォルダ
 

「themes」フォルダの中には、デフォルトのWordPressテーマがあるほか、このフォルダに独自テーマを追加することでそのテーマを利用できるようになります。

ワードプレスのテーマフォルダの中身

管理画面の外観>テーマから見たWordPressのテーマ画面です。themesフォルダの中にあるテーマがここに表示されて選択することができます。

ワードプレス テーマ選択画面

ワードプレス テーマ選択画面

【超基本】WordPressの最小構成テーマを作成する

ここからは、実際にHTML・CSSファイルの静的サイトから、最小構成のWordPressテーマを作成する方法をご紹介します。

なお、ここでは従来のクラシックテーマの作り方を解説しています。フルサイト編集(ブロックテーマ)の作り方ではないのでご注意ください。

WordPressテーマ必要最小の構成と準備環境

WordPressテーマの最小構成は「index.php」と「style.css」の2ファイルです。

WordPressテーマの最小構成。style.cssとindex.php

今回は、themesフォルダの中にテーマフォルダ「webst8」を作成して、index.phpとstyle.cssを作ってWordPressのテーマを表示させる最小構成で説明していきます。

今回説明する最小構成

  • webst8:themesに格納するテーマフォルダ名
  • index.php:テーマの基本テンプレート
  • style.css:テーマの名前などを記述する

事前に準備したローカル環境

今回はLocal(旧Local by flywheel)というアプリで、ローカル環境(webst8.local)にWordPressをインストールした状態で進めていきます。

準備したフォルダをWordPressのテーマディレクトリにコピーする

事前準備した「webst8」フォルダをWordPressのテーマフォルダにしていきます。事前に下記のようなページと、HTML・CSS・画像ファイルを準備して説明していきます。

■事前準備するHTMLフォルダとファイル類  デモサイトはこちら
事前準備しているwebst8フォルダとファイル類
 

項目内容
webst8htmlファイル類を格納しているフォルダ。あとでWordPressのthemesフォルダに移動します。
index.html今回WordPress化するウェブページ
mystyle.cssindex.htmlを整形するスタイルシート
images画像を格納しているフォルダ
外部から読み込んでいるCSSやJavascriptファイルCSSやJavascriptはBootstrap5.3を利用しています。ここではBootstrapの使い方については割愛します。

 
■トップページ(index.html)
自作テーマ作成解説用に準備した静的サイト

■index.htmlのソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ウェブストエイト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="mystyle.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" ></script>
  </head>
  <body>
    <header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">WEBST8</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">ABOUT</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">BLOG</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">CONTACT</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div id="top-vg" class="container-fluid">
      <img src="images/top.jpeg" alt="トップページ画像" />
    </div>
    <section id="content">
      <div id="content-wrap" class="container row pt-3">
        <div id="main" class="col-md-9">
          <h1 class="text-center">個別指導Webスクール WEBST8</h1>
          <p>WEBST8は自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。</p>
          <p>スタンダードコースとライトコースから選択して受講できます。</p>
          <div class="row">
            <div class="col-md-6">
              <p><img src="images/pc-wood.jpg" alt="スタンダードコース" /></p>
              <h2 class="text-center">スタンダードコース</h2>
              <p>ホームページ作成からWeb集客まで一通り習得して売上拡大したい方向けのコース</p>
            </div>
            <div class="col-md-6">
              <p><img src="images/pc-leaf.jpg" alt="ライトコース" /></p>
              <h2 class="text-center">ライトコース</h2>
              <p>特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコース</p>
            </div>
          </div>
          <p class="text-center">お申し込みは<a href="https://webst8.com">こちらから</a> <br /><br /></p>
        </div>
        <div id="sidebar" class="col-md-3">
          <section>
            <h2>個別指導ホームページ作成教室</h2>
            <p><img src="images/webst8-banar.png" alt="バナー画像" /></p>
          </section>
          <section>
            <h2>YouTubeチャンネル開設</h2>
            <p><img src="images/webst8-youtube.png" alt="WEBST8のYouTubeチャンネル画像" /></p>
          </section>
        </div>
      </div>
    </section>
    <footer>
      <div class="container">
        <p class="text-center mb-0">Copyright © Webst8 All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

■mystyle.cssのソースコード

@charset "UTF-8";
body {
  font-size: 16px;
}
h1 {
  font-size: 28px;
  font-weight: bold;
}
h2 {
  font-size: 20px;
  margin: 10px 0;
}
h3 {
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
}
#content {
  background: url(images/pattern-diamond.png);
  padding-top: 20px;
  padding-bottom: 20px;
}
#content-wrap {
  margin: 0 auto;
  background-color: white;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#sidebar {
  text-align: center;
}
footer {
  background-color: #222;
}
footer p {
  padding: 15px 0;
  color: white;
}
#catchphrase {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  font-size: 13px;
}

(※)画像をはじめHTMLファイルなどはご自身の好きなものを準備して読み替えて進めてください。CSSやJavascriptはBootstrap5.3を利用しています。ここではBootstrapの使い方については割愛します。
 

まずは、事前準備した「webst8」フォルダをWordPressのthemesディレクトリにコピーします。
WordPressのthemesフォルダにwebst8フォルダをコピーする

Localを利用したローカル開発環境の場合(MacOSの場合)、/Users/ユーザー名/Local Sites/ドメイン名/app/public/wp-contentにthemesフォルダがあります。

必須ファイルstyle.cssを作成する

つづいてwebst8フォルダのなかに、必須ファイルであるstyle.cssを新規作成します。
WordPressに格納したwebst8フォルダにstyle.cssを追加する

style.cssにはテーマの名前など必須の情報を入力します。ここではstyle.cssに以下のように記載します。

/*
Theme Name:ウェブストエイト
*/

Theme NameはWordPressのテーマの名前(必須)です。他にも必要に応じて下記のような項目などを記載することができます。
WordPress style.cssファイル
 

項目名称
Theme Name:テーマの名前(必須)
Theme URL:テーマのURL
Description:テーマの説明
Author:テーマ制作者の名前
Version:テーマのバージョン

必須ファイルindex.phpを作成する

つぎにindex.phpを作成します。

ここでは、トップページとして用意していたindex.htmlのファイル名を「index.php」に変更します。
index.htmlをindex.phpに変更する

WordPress管理画面からテーマを適用する

これでテーマが適用できるようになります。
 

WordPressの外観>テーマで「ウェブストエイト」を有効化します。
テーマ「ウェブストエイト」を有効化

補足 テーマのサムネイルを表示する

880x660pxの「screenshot.png」という画像をwebst8フォルダに格納すると、テーマ選択画面でサムネイルが表示できます。

「screenshot.png」を格納すると、テーマ選択画面の画像が設定される

テーマ選択画面でサムネイルが表示されました。
テーマ選択画面でサムネイルが設定されている

テーマ適用後に、トップページを表示します。設定したテーマが表示されていればいったん完了です。

"テーマを有効化したばかりの状態。CSSが崩れており、画像もきちんと表示されていない。

この状態ではまだCSSファイルのスタイルが適用されていなかったり、画像が表示されいないので、さらに修正していきます。

相対パスをWordPress独自の関数に修正する

さきほどWordPressの最小構成のテーマを作成することができましたが、CSSが適用されていなかったり、画像が表示されなくなっていました。

■トップページ スタイルが崩れていて、画像が表示されていない
"テーマを有効化したばかりの状態。CSSが崩れており、画像もきちんと表示されていない。

本来画像がある場所は「WordPressインストールフォルダ(webst8.local)/wp-content/themes/webst8/images/xxx.png」ですが、WordPress化したことで下記のように「webst8.local/webst8/images/xxx.png」となっていてファイルが見つからず画像が表示されなくなっています。

指定している相対パスにファイルが存在せず、エラーが発生しているため、正しいパスに修正する必要がある

そこで、相対パスで記述している箇所をWordPress独自の関数を入れて修正していきます。(CDNを利用している場合など、絶対パスで指定している箇所は修正不要です。)

CSSファイルの相対パスの修正

デモサイトのCSSの読み込み指定を下記のように変更します。

修正前
<link rel="stylesheet" href="mystyles.css">

■修正後
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">

JavaScriptなども相対パスで設定している場合は、必要に応じて上記の方式で変更してあげましょう。

画像ファイルのパスの修正

また、画像ファイルのパス(src=の部分)も以下のように修正します。

修正前
<img src="images/top.jpeg" alt="トップページ画像">

■修正後
<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpeg"  alt="トップページ画像">

画像が多い場合はVisual Studio Code(エディタ)上でcommand+Shift+H(ウインドウズの場合は、ctrl+Hを押して下記のように入力して一括置換すると手間が削減できます。
Visual Studio Code(エディタ)上で「command+Shift+H」(ウインドウズの場合は、ctrl+H」を押して下記のように入力して一括置換
 

設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。
自作テーマ作成解説用に準備した静的サイト

「get_template_directory_uri();」について

get_template_directory_uri()は、現在利用しているテーマ(親テーマ)のパスを戻り値として返すWordPress独自の関数です。

本例では、get_template-directory_uri()が、http://webst8.local/wp-content/themes/webst8という文字列を出力しています。

HTMLファイルの中に記述する際は「<?php echo get_template_directory_uri(); ?>」のように記述します。

get_template_directory_uri()がhttp://wp-content/themes/webst8/を出力している

■参考サイト
get_template_directory_uri() – Function | Developer.WordPress.org

WordPress関数(wp_head()とwp_footer())を追加する

つぎにWordPressで実質必須の関数であるwp_head()とwp_footer()を追加します。

下記のように<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入してください。

...

	<?php wp_head(); ?>
</head>
<body>

...

	<?php wp_footer(); ?>
</body>
</html>

上記設定後にログインしてトップページを表示すると、画面上部に管理バーが表示されるようになっています。
WordPressのwp-head()、wp-footerがセットされた後の画面

トップページのソースコードを確認すると、wp_head()を記述した箇所にはWordPressのオリジナルのコードやプラグインのコードが出力されていることを確認できます。
wp-head()タグを記述することで、headタグの閉じタグ直前にWordPressのオリジナルコードが追記されている

また、wp_footer()を記述した箇所には上部管理バーを表示させる記述などが出力されています。

上部管理バーを表示させる記述などが出力されている

<?php wp_head(); ?>と<?php wp_footer(); ?>は必須の関数

<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入することで、それぞれの関数を経由してWordPressの基本機能やプラグイン機能のコードが出力されて使うことができるようになります。

これらの基本機能やプラグインを使わない運用は通常ありえないので必須の関数として忘れずに挿入しておきましょう。

jqueryとjavascriptをWordPress独自のやり方で設定でする

現状では、下記のように<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>と記述してjqueryを読み込む設定をしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  ・・・
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  ・・・
</head>

しかし、WordPressにはもともと標準でjQueryが読み込まれているため、重複して読み込みをさせると競合して予期せぬ不具合やパフォーマンス劣化を起こす場合があります。

異なる二つのjQueryファイルを読み込んで競合するのを防ぐため、一般的にはもともとWordPressに備わっているjQueryを利用します。

(参考)WordPress標準で読み込まれるjqueryファイルの場所)<WordPressインストールフォルダ>/wp-includes/js/jquery/jquery.js

wp_enqueue_script()関数でjqueryやjsファイルを読み込ませる

WordPressに備わっているjQueryを使用するにはwp_enqueue_script()関数を使用します。<?php_head();?>の上にwp_enqueue_script(‘jquery’)と記載しましょう。

代わりに、<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>が不要になるのでこの一行をコメントアウト(または削除)します。

■修正ステップ1

<head>
  ・・・
  <!-- コメントアウトor削除 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <?php wp_enqueue_script('jquery'); ?>
  <?php wp_head(); ?>
</head>

(新たにfunctions.phpというファイルを作ってそこに記述して制御する方法もありますが、簡略化のためここでは割愛します。)

上記の設定後にトップページのソースコードを見るともともとWordPressに備わっているjqueryが読み込まれるようになったことが確認できます。
もともとWordPressに読み込まれているjQueryが出力されている

また、bootstrap用のjavascriptファイル<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>はjqueryを利用しているため、jqueryを読み込んだ後で読み込ませる必要があります。

そこで、<?php wp_enqueue_script(‘jquery’); ?>の後の行に下記のコードを追加します。

  <?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>

最後のarray(‘jquery’)指定で、bootstrap.bundle.min.jsをjqueryの後で読み込ませるという指定をしています。

代わりにもとの<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>は不要になったため、コメントアウト(または削除)します。
 

■修正後のindex.php

 <head>
    <meta charset="utf-8" />
    <title>ウェブストエイト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css" />
  <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
  <?php wp_enqueue_script('jquery'); ?>
  <?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>
  <?php wp_head(); ?>
  </head>

wp_enqueue_scriptの詳細は、wp_enqueue_script() – Function | Developer.WordPress.orgをご確認ください。(※公式ドキュメントは英語で記載されていますが、日本語で記載されているブログ記事も多くあるのでそちらを参考にしてみてください。)

ここでは、割愛しますが、他のCSSファイルやJavascriptファイルの読み込み順番も同様にして制御することができます。

■詳細の説明はこちらをご覧ください。
wp_enqueue_script() – Function | Developer.WordPress.org

(補足)通常jQueryで使っている「$」が使えない件

jQueryを利用した書き方で「$」を使った書き方が多いですが、WordPressでは基本的にそのまま使えません。

WordPressに備わっているjQueryはno-conflictモードになっていて「$」が使えなくなっています

WordPressの他のライブラリで「$」の文字が使われいた時に不具合がおきないようにこのような仕様になっています。

従ってネットで探したjQueryのコードをそのままコピー&ペーストしても「$」が原因で動かないケースがよくあります。

簡単にできる対処方法としては「$」を「jQuery」に全て変換する方法があります。

あるいは「$(function(){・・・})」を「jQuery(function($) {・・・})」のようにカプセル化した書き方をしても解決できます。

jQuery.noConflict() | jQuery API Documentation

投稿や固定ページおよび主要テンプレートを作成する

ここからは固定ページや投稿ページなどを作成して、それぞれに応じたページが表示されるようにしていきます。

現時点ではindex.phpしか表示できるテンプレートがないので、WordPressで投稿や固定ページを作成しても全てindex.php(現状はトップページ)が表示されます。
固定ページを作成してもindex.phpの内容が表示される

固定ページを作成してもindex.phpの内容が表示される

 
このままだとWordPressの管理画面で投稿や固定ページ機能が使えないので、ここからテンプレート(phpファイル)を増やしていきます。

WordPressの主要なテンプレートファイルと優先順位

WordPressでよく利用する主要なテンプレートファイルをいくつかピックアップして記載します。

テンプレートファイル名概要
index.phpWordPress必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレート
single.php投稿用のテンプレート
page.php固定ページ用のテンプレート
archive.phpアーカイブ用のテンプレート
category.phpカテゴリーページのテンプレート
404.phpページが見つからないエラー(404エラー)用のテンプレート
search.php検索結果用のテンプレート
front-page.phpトップページ用のテンプレート
home.phpトップページ・投稿一覧用のテンプレート 
※front-page.phpが存在せず設定>表示設定でフロントページに「最新の投稿」が設定されているときにトップページに適用される
※設定>表示設定で投稿一覧に固定ページが設定されているときに投稿一覧ページとして適用される

これらのテンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われます。

最初に作成したindex.phpは他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。

優先順位の全体像は下記にありますので、ご興味のある方は確認してみてください。
WordPressのテンプレート階層を表した図

テンプレート階層 – Japanese Team – WordPress.org 日本語

ここからは、トップページと固定ページと投稿ページの優先順位について説明していきます。

トップページ用テンプレートの優先順位

トップページ用テンプレートの優先順位です。

優先順位テンプレートファイル名備考
1front-page.php
2(フロントページに固定ページを設定している場合)
固定ページに適用されるテンプレート階層が適用される
設定>表示設定でフロントページにいずれかの固定ページが設定されている必要がある
2home.php設定>表示設定でフロントページに「最新の投稿」が設定されている場合
4index.php

トップページの設定は、WordPressの設定>表示設定でホームページ設定の内容により、適用されるテンプレートが変わるので少し複雑です。

設定>表示設定>ホームページの表示設定

今回紹介している例では、index.php以外のテンプレートが存在しないため、トップページにindex.phpが適用されています。

固定ページ用テンプレートの優先順位

固定ページ用テンプレートの優先順位です。

優先順位テンプレートファイル名備考
1$custom.phpカスタムテンプレートが選択されている場合
2page-{スラッグ名}.php
3page-{ID}.php
4page.php
5singular.php
6index.php

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの固定ページを表示してもindex.phpが適用されます。

このままだとWordPressの管理画面で固定ページを作成できないので、後ほど固定ページ用のテンプレート「page.php」の作り方を説明していきます。

投稿ページ用テンプレートの優先順位

投稿ページ用テンプレートの優先順位です。(カスタム投稿タイプを除く。)

優先順位テンプレートファイル名備考
1$custom.phpカスタムテンプレートが選択されている場合
2single-post.php
3single.php
4singular.php
5index.php

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの投稿ページを表示してもindex.phpが適用されます。
 

補足:現在表示されているテンプレートファイルを確認する方法

WordPressのプラグイン「Show Current Template」をインストール・有効化すると、上部ツールバー上に現在表示されているテンプレートファイルが表示されるようになります。

Show Current Template

■上部ツールバーにテンプレートファイルの確認項目が追加される

上部ツールバーにテンプレートファイルの確認項目が追加される

WordPressでテーマを開発する際、現在表示されているテンプレートファイルを確認できると作業が捗るので、必要に応じてインストールしてあげてみてください。

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP