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

目次
WordPressとは 基本のおさらい
WordPressの概要構成
以下はWordPressの構成、いわゆるシステムの実体の概要図です。

静的サイトの場合HTMLや画像などのファイル類で構成されますが、WordPressはさらにPHPというプログラム言語とMySQLと言われるデータベース(データの蓄積される場所)を利用しています。
ブログ情報(文章)などもデータベースに蓄積され、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、WordPressのシステムを提供しています。
WordPressのフォルダ・ディレクトリ構成
つぎに、WordPressのフォルダ・ディレクトリ構成(下図の赤枠の部分)について説明します。

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

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

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

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

ワードプレス テーマ選択画面
【超基本】WordPressの最小構成テーマを作成する
ここからは、実際にHTML・CSSファイルの静的サイトから、最小構成のWordPressテーマを作成する方法をご紹介します。
なお、ここでは従来のクラシックテーマの作り方を解説しています。フルサイト編集(ブロックテーマ)の作り方ではないのでご注意ください。
WordPressテーマ必要最小の構成と準備環境
WordPressテーマの最小構成は「index.php」と「style.css」の2ファイルです。

今回は、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フォルダとファイル類

項目 | 内容 |
---|---|
original | htmlファイル類を格納しているフォルダ。あとでWordPressのthemesフォルダに移動します。 |
index.html | 今回WordPress化するウェブページ |
mystyle.css | index.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="#">オリジナルテーマ</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="image\top.jpg" 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">オンラインプログラミングスクール</h1>
<p>自分でホームページ制作・Web集客したい方向けのオンラインスクールです。</p>
<p>ウェブ制作コースとウェブアプリコースから選択して受講できます。</p>
<div class="row">
<div class="col-md-6">
<p><img src="image\pc-wood.jpg" alt="スタンダードコース" /></p>
<h2 class="text-center">ウェブ制作コース</h2>
<p>ホームページ作成からキャリア支援まで一通りサポートいただきたい方向けのコース</p>
</div>
<div class="col-md-6">
<p><img src="image\pc-leaf.jpg" alt="ライトコース" /></p>
<h2 class="text-center">ウェブアプリコース</h2>
<p>基礎は習得できてるためアプリを作りたい方向けのコース</p>
</div>
</div>
<p class="text-center">お申し込みは<a href="#">こちらから</a> <br /><br /></p>
</div>
<div id="sidebar" class="col-md-3">
<section>
<h2>ホームページ作成</h2>
<p><img src="image\banar.jpg" alt="バナー画像" /></p>
</section>
<section>
<h2>TikTok配信中</h2>
<p><img src="image\tiktok.jpg" alt="Tiktokサンプル画像" /></p>
</section>
</div>
</div>
</section>
<footer>
<div class="container">
<p class="text-center mb-0">Copyright © PAM All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
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;
}
CSS(※)画像をはじめHTMLファイルなどはご自身の好きなものを準備して読み替えて進めてください。CSSやJavascriptはBootstrap5.3を利用しています。ここではBootstrapの使い方については割愛します。
まずは、事前準備した「original」フォルダをWordPressのthemesディレクトリにコピーします。

Localを利用したローカル開発環境の場合(MacOSの場合)、/Users/ユーザー名/Local Sites/ドメイン名/app/public/wp-contentにthemesフォルダがあります。
必須ファイルstyle.cssを作成する
つづいてwebst8フォルダのなかに、必須ファイルであるstyle.cssを新規作成します。

style.cssにはテーマの名前など必須の情報を入力します。ここではstyle.cssに以下のように記載します。
/*
Theme Name: オリジナルテーマ
Description: オリジナルテーマのデモテーマ
Author:WEBST8
Version:1.0.0
*/
CSSTheme NameはWordPressのテーマの名前(必須)です。他にも必要に応じて下記のような項目などを記載することができます。

項目 | 名称 |
---|---|
Theme Name: | テーマの名前(必須) |
Theme URL: | テーマのURL |
Description: | テーマの説明 |
Author: | テーマ制作者の名前 |
Version: | テーマのバージョン |
必須ファイルindex.phpを作成する
つぎにindex.phpを作成します。
ここでは、トップページとして用意していたindex.htmlのファイル名を「index.php」に変更します。

WordPress管理画面からテーマを適用する
これでテーマが適用できるようになります。
WordPressの外観>テーマで「オリジナルテーマ」を有効化します。

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

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

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

この状態ではまだCSSファイルのスタイルが適用されていなかったり、画像が表示されいないので、さらに修正していきます。
相対パスをWordPress独自の関数に修正する
さきほどWordPressの最小構成のテーマを作成することができましたが、CSSが適用されていなかったり、画像が表示されなくなっていました。
■トップページ スタイルが崩れていて、画像が表示されていない

本来画像がある場所は「WordPressインストールフォルダ(original.local)/wp-content/themes/original/images/xxx.png」ですが、WordPress化したことで下記のように「original.local/original/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">
HTMLJavaScriptなども相対パスで設定している場合は、必要に応じて上記の方式で変更してあげましょう。
画像ファイルのパスの修正
また、画像ファイルのパス(src=の部分)も以下のように修正します。
■修正前
<img src="images/top.jpeg" alt="トップページ画像">
■修正後
<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpeg" alt="トップページ画像">
HTML画像が多い場合はVisual Studio Code(エディタ)上でcommand+Shift+H(ウインドウズの場合は、ctrl+Hを押して下記のように入力して一括置換すると手間が削減できます。

設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。

「get_template_directory_uri();」について
get_template_directory_uri()は、現在利用しているテーマ(親テーマ)のパスを戻り値として返すWordPress独自の関数です。本例では、get_template-directory_uri()が、http://original.local/wp-content/themes/originalという文字列を出力しています。
HTMLファイルの中に記述する際は「<?php echo get_template_directory_uri(); ?>」のように記述します。

■参考サイト
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>
PHP上記設定後にログインしてトップページを表示すると、画面上部に管理バーが表示されるようになっています。

トップページのソースコードを確認すると、wp_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>
HTMLしかし、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>
PHP(新たにfunctions.phpというファイルを作ってそこに記述して制御する方法もありますが、簡略化のためここでは割愛します。)
上記の設定後にトップページのソースコードを見るともともと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')); ?>
PHP最後の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>
PHPwp_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(現状はトップページ)が表示されます。


このままだとWordPressの管理画面で投稿や固定ページ機能が使えないので、ここからテンプレート(phpファイル)を増やしていきます。
WordPressの主要なテンプレートファイルと優先順位
WordPressでよく利用する主要なテンプレートファイルをいくつかピックアップして記載します。
テンプレートファイル名 | 概要 |
---|---|
index.php | WordPress必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレート |
single.php | 投稿用のテンプレート |
page.php | 固定ページ用のテンプレート |
archive.php | アーカイブ用のテンプレート |
category.php | カテゴリーページのテンプレート |
404.php | ページが見つからないエラー(404エラー)用のテンプレート |
search.php | 検索結果用のテンプレート |
front-page.php | トップページ用のテンプレート |
home.php | トップページ・投稿一覧用のテンプレート ※front-page.phpが存在せず設定>表示設定でフロントページに「最新の投稿」が設定されているときにトップページに適用される ※設定>表示設定で投稿一覧に固定ページが設定されているときに投稿一覧ページとして適用される |
これらのテンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われます。
最初に作成したindex.phpは他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。
優先順位の全体像は下記にありますので、ご興味のある方は確認してみてください。

テンプレート階層 – Japanese Team – WordPress.org 日本語
ここからは、トップページと固定ページと投稿ページの優先順位について説明していきます。
トップページ用テンプレートの優先順位
トップページ用テンプレートの優先順位です。
優先順位 | テンプレートファイル名 | 備考 |
---|---|---|
1 | front-page.php | |
2 | (フロントページに固定ページを設定している場合) 固定ページに適用されるテンプレート階層が適用される | 設定>表示設定でフロントページにいずれかの固定ページが設定されている必要がある |
2 | home.php | 設定>表示設定でフロントページに「最新の投稿」が設定されている場合 |
4 | index.php |
トップページの設定は、WordPressの設定>表示設定でホームページ設定の内容により、適用されるテンプレートが変わるので少し複雑です。

今回紹介している例では、index.php以外のテンプレートが存在しないため、トップページにindex.phpが適用されています。
固定ページ用テンプレートの優先順位
固定ページ用テンプレートの優先順位です。
優先順位 | テンプレートファイル名 | 備考 |
---|---|---|
1 | $custom.php | カスタムテンプレートが選択されている場合 |
2 | page-{スラッグ名}.php | |
3 | page-{ID}.php | |
4 | page.php | |
5 | singular.php | |
6 | index.php |
今回紹介している例では、index.php以外のテンプレートが存在しないため、どの固定ページを表示してもindex.phpが適用されます。
このままだとWordPressの管理画面で固定ページを作成できないので、後ほど固定ページ用のテンプレート「page.php」の作り方を説明していきます。
投稿ページ用テンプレートの優先順位
投稿ページ用テンプレートの優先順位です。(カスタム投稿タイプを除く。)
優先順位 | テンプレートファイル名 | 備考 |
---|---|---|
1 | $custom.php | カスタムテンプレートが選択されている場合 |
2 | single-post.php | |
3 | single.php | |
4 | singular.php | |
5 | index.php |
今回紹介している例では、index.php以外のテンプレートが存在しないため、どの投稿ページを表示してもindex.phpが適用されます。
補足:現在表示されているテンプレートファイルを確認する方法
WordPressのプラグイン「Show Current Template」をインストール・有効化すると、上部ツールバー上に現在表示されているテンプレートファイルが表示されるようになります。

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

WordPressでテーマを開発する際、現在表示されているテンプレートファイルを確認できると作業が捗るので、必要に応じてインストールしてあげてみてください。
チェックテスト
チェックテストを確認する
オンラインテキスト記載のコードをindex.htmlとstyle.cssにそれぞれ記載をしオリジナルテーマの作成及びて適用を行い、適用後のサイト画面をスクリーンショットしdiscordで共有ください。
※下記参考画像となります。