初心者エンジニア必見！WordPressテーマを自作で作成する方法を徹底解説
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressのテーマを自作する方法について解説していきたいと思います。
テーマとは、WordPressで作成したウェブサイトのまさに見た目を構成する仕組みのことをいいますが、このテーマを自作できることで自由にサイトを実装することができます。
テーマを自作できればWordPressエンジニアとして活躍できるのはもちろん、Webデザイナーの方だったり、WordPressのサイトを運用するWeb担当者の方も、テーマの全体像を知っておくだけで一部カスタマイズができたり何かしらの問題解決にお役立ていただけます。
よろしければぜひ当記事をお仕事などでご活用いただけましたら幸いです。
目次
テーマとは
テーマとは、WordPressサイトの見た目を構成する仕組みのことをいいます。
このテーマを自作できることで、WordPressでのサイトの見た目を自分の思い通りに作ることができ、完全オリジナルのウェブサイトを実現することができます。
テーマは管理画面から複数管理することができ、テーマを切り替えればサイトの見た目をテーマごとに切り替えることができます。
例えば、青色が主なテーマ、緑色が主なテーマ、など、テーマごとに構築された見栄えにテーマ単位で切り替えることが可能です。
テーマは無料・有料・オーダーメイドがある
WordPressのテーマは世界中で配布・提供されており、テーマの管理画面からは無料で配布されているテーマをクリックするだけで簡単に導入して利用することができます。
ただし、使ってみていただけると分かるのですが、無料のテーマはいまいちなデザインが多く、ご自身の気にいるテーマが見つけづらいというデメリットがあります。
この無料テーマのほかに有料で提供されているテーマもあり、日本では筆者が知る中でもTCDさんだったり、エックスサーバー株式会社が提供するXWRITE、またSmart Custom FieldsやMW WP Formという大変素晴らしいプラグインを開発されたキタジマタカシさんのSnow Monkey、unitone（ダウンロード無料）などがあります。
また、無料のテーマであっても探してみれば使いやすく優れたテーマはありますので、まずは無料でサイトを立ち上げたいという場合はご自身で探してみてください。
例えば、無料のテーマで最高峰のクオリティともいえるのがエックスサーバー株式会社で提供されている以下の「Cocoon」です。
「無料なのにこんなに機能があるの…」と度肝を抜かれました。
このように素晴らしいテーマが提供されている中で、完全にオーダーメイドでテーマを作りたい（つまり100%オリジナルで作りたい）という場合があるかと思います。
その場合、Web制作会社やフリーランスのエンジニアなどに依頼してテーマを作成するというのが一般的です。
少し費用はかかりますが、独自の導線設計や、SEO対策に対応した高品質なテーマを開発できるなどそれなりの付加価値を生み出すことが可能です。
当記事ではこのテーマ作成というエンジニアとしてのスキル取得を目指して解説していきます。
テーマ作成のメリット
テーマ作成のメリットはいくつかあります。
筆者的には以下の内容がメリットとしてあげられるかと思います。
- 100%自由に見た目を作れる
- いつでも見た目を柔軟に変更できる
- SEO対策用にカスタマイズできる
このように、サイトを自由な見た目で作れたり、運用の途中でいつでも柔軟に見た目をカスタマイズできたり、SEO対策に完全対応させたりすることが可能なところが、テーマ作成の強みといえます。
世の中大変素晴らしい無料のサイト作成サービスはありますが、実際に使ってみていただけると分かるかと思いますが、やはり限界がどこかであるので、WordPressなどのCMSでテーマなど見た目を構成する部分を自由に作成・カスタマイズできることはエンジニアとして大きなアドバンテージとなります。
テーマ作成の前提知識
WordPressのテーマ作成に必要な前提知識はいくつかあります。
前提知識を突き詰めていくと果てしないものになるので、WordPressのテーマ作成における最低限の前提知識をおさえていただき、効率的にスキル習得をしていただければと思います。
ここでは前提知識として以下の内容をあげさせていただきます。
- テーマ作成に必要なプログラミング言語・知識
- テーマ作成に必要なPHPファイルの構成
- テンプレートの階層
- テンプレートタグ
それぞれ解説していきます。
テーマ作成に必要なプログラミング言語
テーマ作成に必要なプログラミング言語がいくつかあります。
内容としては以下になります。
- HTML
- CSS
- JavaScript（jQuery）
- PHP
- WordPress（テンプレートタグ等）
- MySQL
それぞれ解説していきます。
HTML
HTMLとは、ページの骨組みを構築するためのマークアップ言語です。
ページの中にあるテキスト、画像など一つひとつの情報を正確に伝えるためにHTMLタグ（段落のpタグ、見出しのhタグ、画像のimgタグなど）を使って入れ子形式で記述して作成します。
HTMLは、そもそもウェブサイトを作る上では必須の技術で、この言語を使わなければ基本的にウェブを作ることはできません。
CSS
CSSとは、ページの見た目をレイアウトしたりデザインしたりするためのスタイルシート言語です。
HTMLと組み合わせて使用することで、HTMLとして記述したマークアップ構造とHTMLタグをもとに、表示しているテキストや画像などに対して見た目を整えたりレイアウトしたり、デザインすることができます。
JavaScript（jQuery）
JavaScriptとは、HTMLとCSSで作られた要素に対してアニメーションなど何かしらの動きを実装するためのプログラミング言語です。
また、このJavaScriptをもっと簡単に扱えるようにしたものがjQueryです。
このjQueryはJavaScriptのライブラリであり、少ないコードで本来難しいJavaScriptの機能を簡単に呼び出すことができ、高度なアニメーションを実装することができます。
WordPressではこのjQueryがコアの機能やプラグイン、テーマで標準で利用されており、ウェブサイト制作には必須の技術といっても過言ではありません。
PHP
PHPとは、動的なウェブページの生成や処理を行うための、サーバーサイドのプログラミング言語です。
サーバーサイドで実行されるため、クライアント（ブラウザ）からのリクエストを処理し、生成された結果をクライアントに送信します。これにより、動的なコンテンツの生成やデータベースとのやり取りなどを行うことができます。
このPHPはプログラミング言語の中でも扱いやすいスクリプト言語で、多くのレンタルサーバーに標準で搭載されているため、初心者にも優しい言語といえます。
WordPress（テンプレートタグ等）
WordPressでは標準で提供されているテンプレートタグというWordPress独自の関数があります。
このテンプレートタグを使うことで、WordPressのデータベースにあるデータを簡単に呼び出して表示させることができます。
WordPressでは主にこのテンプレートタグでテーマのPHPテンプレートファイルを実装していきます。
テンプレートタグと一緒に基礎的なPHP構文などの知識（if文やwhile文、foreach文など）は必要になるので、テーマ作成を行う際にはテンプレートタグを中心に学習していただき、合わせてPHP構文などの基礎も学習しておきましょう。
MySQL
MySQLとは、オープンソースのリレーショナルデータベース管理システム（RDBMS）です。
MySQLは、データの永続的な保存、検索、更新、削除などのデータベース操作を行うためのソフトウェアです。
わかりやすく説明すると、情報を整理して保存し、必要な時にそれを取り出したり操作したりするためのツールです。
ウェブ開発の現場では、MySQLを使ってユーザーの登録情報や記事のコンテンツなどを保存し、それらを表示したり編集したりするのに使われています。
直接MySQLを触るということはテーマ開発ではそうそうないかと思いますので、ここでは知識として理解しておきましょう。（高度なテーマ開発では必要になる可能性があります）
テーマ作成に必要なPHPファイルの構成
テーマ作成に必要なPHPファイルの構成はWordPressの仕様で決まっております。
この決められたファイル名でPHPテンプレートを作成しなければWordPressのテーマとして機能しないので、ファイル名は間違えないようにご注意ください。
以下のファイル構成に従ってテーマを開発していくことになります。
| ファイル名 | 内容 |
| style.css | テーマのスタイルシートです。テーマの名前や説明、作成者などのメタ情報を含みます。このファイルは必須です。 |
| index.php | テーマのトップレベルのテンプレートファイルで、ウェブサイトのホームページを表示します。 |
| header.php | サイトのヘッダー部分のテンプレートファイルです。ナビゲーションメニューやロゴ、ヘッダーイメージなどを含みます。 |
| header-{$name}.php | 特定のヘッダーエリアのカスタムテンプレートファイルです。{$name}には、例えば”top”や”bottom”などが入ります。 |
| footer.php | サイトのフッター部分のテンプレートファイルです。著作権情報やフッターナビゲーションなどが含まれます。 |
| footer-{$name}.php | 特定のフッターエリアのカスタムテンプレートファイルです。{$name}には、例えば”top”や”bottom”などが入ります。 |
| sidebar.php | サイドバーのテンプレートファイルで、ウィジェットやカスタムメニューなどのコンテンツを表示します。 |
| single.php | 個々の投稿やページのテンプレートファイルです。単一の投稿やページの表示方法を定義します。 |
| single-{post-type}.php: | 特定のカスタム投稿タイプの個別の投稿を表示するためのテンプレートファイルです。{post-type}には、カスタム投稿タイプの名前が入ります。 |
| page.php | 固定ページのテンプレートファイルです。WordPressの固定ページを表示する際のレイアウトを定義します。 |
| page-{slug}.php | 特定の固定ページのテンプレートファイルです。{slug}には、固定ページのスラッグが入ります。 |
| archive.php | アーカイブページ（カテゴリーやタグなどの一覧ページ）のテンプレートファイルです。 |
| archive-{post-type}.php | 特定のカスタム投稿タイプのアーカイブページを表示するためのテンプレートファイルです。{post-type}には、カスタム投稿タイプの名前が入ります。 |
| functions.php | テーマの機能を追加、変更、または削除するためのPHPコードを含むファイルです。 |
| search.php | 検索結果ページのテンプレートファイルです。ユーザーが検索を行った際に表示されるページのレイアウトを定義します。 |
| 404.php | 404エラーページのテンプレートファイルです。存在しないページにアクセスされた場合に表示されるエラーページのレイアウトを定義します。 |
| comments.php | コメントの表示や入力フォームなどを含む、コメントセクションのテンプレートファイルです。 |
| author.php | 投稿者のアーカイブページのテンプレートファイルです。特定の投稿者の投稿一覧を表示するページのレイアウトを定義します。 |
| author-{nicename}.php | 特定の投稿者のアーカイブページを表示するためのテンプレートファイルです。{nicename}には、投稿者のニックネームが入ります。 |
| category.php | カテゴリーアーカイブページのテンプレートファイルです。特定のカテゴリーに属する投稿一覧を表示するページのレイアウトを定義します。 |
| category-{slug}.php | 特定のカテゴリーのスラッグに応じたカスタムカテゴリーページテンプレート。例えば、category-news.phpは”news”カテゴリーのページテンプレートです。 |
| category-{id}.php | 特定のカテゴリーのIDに応じたカスタムカテゴリーページテンプレート。例えば、category-5.phpはIDが5のカテゴリーのページテンプレートです。 |
| tag.php | タグアーカイブページのテンプレートファイルです。特定のタグに属する投稿一覧を表示するページのレイアウトを定義します。 |
| tag-{slug}.php | 特定のタグのアーカイブページを表示するためのテンプレートファイルです。{slug}には、タグのスラッグが入ります。 |
| tag-{id}.php | 特定のタグのアーカイブページを表示するためのテンプレートファイルです。{id}には、タグのIDが入ります。 |
| taxonomy.php | タクソノミーアーカイブページのテンプレートファイルです。カスタム分類法（タクソノミー）のアーカイブページのレイアウトを定義します。 |
| taxonomy-{taxonomy}.php | 特定のカスタムタクソノミーのアーカイブページを表示するためのテンプレートファイルです。{taxonomy}には、実際のタクソノミーの名前が入ります。 |
| taxonomy-{taxonomy}-{term}.php | 特定のタクソノミーとその項目（term）のアーカイブページを表示するためのテンプレートファイルです。{taxonomy}にはタクソノミーの名前、{term}には項目のスラッグが入ります。 |
| front-page.php | WordPressサイトのフロントページ（ホームページ）のテンプレートファイルです。通常、ホームページ用の独自のデザインやレイアウトを適用する場合に使用されます。 |
| home.php | ブログのフロントページ（ホームページ）を表示するためのテンプレートファイルです。通常、ブログ記事一覧が表示されます。 |
| comments-popup.php | ポップアップスタイルのコメント入力フォームを表示する際に使用されるテンプレートファイルです。 |
| searchform.php | 検索フォームを表示するためのテンプレートファイルです。 |
| attachment.php | 添付ファイルのページを表示するためのテンプレートファイルです。通常、画像やその他のメディアファイルに対する単一のページを表示するために使用されます。 |
| date.php | 特定の日付や月のアーカイブページを表示するためのテンプレートファイルです。例えば、特定の日付に投稿された記事の一覧を表示する場合に使用されます。 |
上記は一通りのファイル構成になりますが、全てを作成する必要はなく、必要なものだけ作成する形で問題ありません。
ただし、上記の内容の中で以下のファイルは必須でありテーマとして成り立つ最低限のファイルになりますので、必ず作成してテーマを作成します。
- style.css
- index.php
- functions.php
最低限上記のファイルは必須なので、テーマのディレクトリファイルを作成したらそのファイル内に上記3つのファイルを作成して設置させましょう。
テンプレートの階層
WordPressにはテーマ開発において事前に知っておくべきテンプレート階層という仕組みがあります。
テンプレート階層とは、WordPressサイトのページが表示される時に読み込まれるPHPテンプレートファイルの順番・優先順位のことをいいます。
例えば、カテゴリーアーカイブページを表示させたときに、WordPressはまず最初にテーマファイル内に以下の内容で、上から順番にテンプレートファイルを探して当てはまるものがあればそのテンプレートファイルを読み込んでページを表示させます。
- category-{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
上記のように、どのページを表示させるときも最終的な受け皿としてindex.phpが読み込まれるようになっております。
テンプレートタグ
テンプレートタグとは、WordPressで用意された独自の関数のことをいいます。
テンプレートタグを記述するだけで、記事詳細ページのタイトルや本文、カテゴリー、記事一覧の表示などを簡単に出力して表示することができます。
例えばテンプレートタグには以下の内容があります。
| the_title() | 投稿またはページのタイトルを表示します。 |
<h1><?php the_title(); ?></h1>| the_content() | 投稿またはページの本文を表示します。 |
<div class="entry-content">
<?php the_content(); ?>
</div>これらは基本的なテンプレートタグの例ですが、WordPressでは1000個を超えるさまざまなテンプレートタグが提供されています。
これらのテンプレートタグを使用することで、WordPressテーマ内で動的なコンテンツを簡単に表示およびカスタマイズすることができます。
テーマの種類
WordPressには現在テーマの種類として以下の3種類あります。
- クラシックテーマ
- ブロックテーマ
- ハイブリットテーマ
それぞれ解説いたします。
クラシックテーマ
クラシックテーマとは、伝統的なWordPressのテーマ形式で、PHPとCSSを使用して構築され、従来の投稿やページの表示方法をカスタマイズします。
PHPとCSSを使用して構築され、テーマファイルには主にPHPコードが含まれます。
クラシックテーマは、投稿とページの表示方法をカスタマイズするために使用されます。
典型的なクラシックテーマには、index.php、single.php、page.phpなどのテンプレートファイルが含まれます。
ブロックテーマ
ブロックテーマとは、Gutenbergエディターのブロック機能を最大限に活用した、モダンで柔軟なWordPressテーマ形式です。
ブロックテーマでは、ページや投稿のコンテンツをブロックとして編集し、それぞれのブロックに異なるスタイルや機能を適用することができます。
ブロックテーマは、HTML、CSS、JavaScriptで構築され、テーマの外観や機能をカスタマイズするためにブロックパターンやスタイルシートを使用します。
ハイブリットテーマ
ハイブリッドテーマとは、クラシックテーマとブロックテーマの両方の特性を持つ、柔軟性の高いWordPressテーマ形式です。
つまり、PHPテンプレートファイルとGutenbergブロックを組み合わせて使用します。
これにより、従来のWordPressの柔軟性とGutenbergエディターの直感的な編集機能の両方を活用することができます。
ハイブリッドテーマは、クラシックなPHPテンプレートファイルに加えて、ブロックテーマ用のスタイルや機能を追加することができます。
テーマ作成の流れ
テーマ作成には流れがあります。
ここでは、執筆者が実際の実務で進めている流れ通りに解説するので、みなさんにとっても仕事で使えるテーマ開発の流れを知ることができます。
流れとしては以下の内容になり、上から順番として進めていく形になります。
- テーマのディレクトリを作成
- HTML・CSSで静的なサイトを作成
- WordPress化に必要なファイルを作成
- HTMLをWordPress化（PHPでプログラミング）
- テーマファイルをサーバーにアップロード
- テーマを有効化
当記事ではもっともWebサイト制作として開発されているクラシックテーマを前提に解説いたします。
最低限のテーマの作り方
それでは早速、テーマの作り方について解説していきたいと思います。
ここでの内容にある手順通りに手を動かしていただければ無理なくWordPressテーマを作成できるようになっておりますので、ご安心ください。
まずここではテーマ開発のための第一歩として最低限のテーマを作成し、サーバーへアップロードしてWordPresssサイトのフロントページとして反映させるところまで進めていきたいと思います。
すでに前述しておりますが、テーマ開発の流れは以下になります。
- テーマのディレクトリを作成
- HTML・CSSで静的なサイトを作成
- WordPress化に必要なファイルを作成
- HTMLをWordPress化（PHPでプログラミング）
- テーマファイルをサーバーにアップロード
- テーマを有効化
上記の流れに沿って解説していきます。
テーマのディレクトリを作成
まず初めにテーマを構成するためのディレクトリを作成しましょう。
当記事ではデスクトップに「sample_theme」という名前でディレクトリを作成します。
お使いのパソコンのOSがMacの方はターミナルを起動して以下のコマンドで作成するか、手動でデスクトップ上でぽちぽち操作してディレクトリを作成してください。
cd //ホームディレクトリに移動します。
cd desktop //ホームディレクトリからデスクトップディレクトリに移動します。
mkdir sample_theme //デスクトップディレクトリ内に「sample_theme」という名前の新しいディレクトリを作成します。作成できたら、このディレクトリの中にWordPressテーマとして成り立たせるために必要なPHPファイルやCSSファイルなどをどんどん作成して追加していきます。
HTML・CSSで静的なサイトを作成
テーマのディレクトリが作成できたら、次はPHPテンプレートファイルを作成する下準備としてHTMLとCSSを作成します。
ここで作成したHTMLとCSSはあとでPHPのテンプレートファイルに変換します。
先ほど作成したsample_themeの中に「index.html」というファイル名でHTMLファイルを作成してください。
作成できたらエディタでファイルを開いて、ソースコードとして以下のコードをコピー＆ペーストしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Site</title>
<link rel="stylesheet" href="styles.css">
<style>
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 20px;
}
header {
background-color: #333;
color: #fff;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to my site</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is the about page content.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>This is the contact page content.</p>
</section>
<section>
<h2>Posts</h2>
<ul>
<li>
<a href="#">
Post Title 1
</a>
</li>
<li>
<a href="#">
Post Title 2
</a>
</li>
<li>
<a href="#">
Post Title 3
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Static Site</p>
</footer>
</body>
</html>ペーストして保存していただきブラウザから確認していただけますと、以下のページが作成できたかと思います。
現時点では、ただのHTMLで作成された静的なページですが、このあとPHPファイルに変換してWordPressのテーマとして成立させていきます。
（デザイナーでもある高澤的には微妙な見栄えで耐えられないのですが、目的はテーマを作れるようになることなのでお許しください…笑）
作成したHTMLをWordPress化（PHPプログラミング）
次は、作成したHTMLファイルのソースコードにWordPressのテンプレートタグや関数を組み込んでいき、テーマに最低限必要なPHPテンプレートファイルであるindex.phpを作成していきます。
index.phpを作成することにより、WordPressがコンテンツを表示する際に必要な情報を取得し、適切な形式で表示することができテーマとしてページを表示する処理をになってくれます。
まずは静的なHTMLファイルをPHPファイルに変換します。
変換方法としてはシンプルにファイルの拡張子を「.html」から「.php」に変換していただけますとPHPファイルを作成できます。
以下のようにPHPファイルに変換できたらOKです。
PHPファイルに変換することでサーバーにアップロードした際にPHPファイルとして使用できるようになり、PHPプログラムを記述することで動的なコンテンツの表示や、再利用可能なテンプレートの作成が可能になります。
変換が完了したら、先ほどのHTMLのソースコードを以下のように記述してください。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?php
if(!is_front_page()):
wp_title('｜', true, 'right');
endif;
bloginfo('name');
?>
</title>
<style>
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 20px;
}
header {
background-color: #333;
color: #fff;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
}
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo esc_url(home_url()); ?>/"><?php bloginfo('name'); ?></a></h1>
</header>
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_id' => '',
'menu_class' => '',
));
?>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is the about page content.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>This is the contact page content.</p>
</section>
<section>
<h2>Posts</h2>
<ul>
<?php
// WordPressループ クエリのパラメーターを設定
$args = array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => 3, // 表示件数
);
// WP_Queryを使用してクエリを実行
$my_query = new WP_Query( $args );
// ループで取得した投稿を表示
if ($my_query->have_posts()):
while ($my_query->have_posts()):$my_query->the_post();
// 投稿の表示
?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php
endwhile;
wp_reset_postdata(); // ループの後に必要
else :
echo '投稿がありません';
endif;
?>
</ul>
</section>
</main>
<footer>
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>各箇所に、WordPress専用の関数であるテンプレートタグ等を記述し、データベースに保存されたデータを適切に出力して表示してくれるようになります。
ただし、このままではテーマとしてまだ成立しないため、このあと必要なファイルを作成していきます。
上記ソースコードにあるWordPressループ（while文によるループ）の部分については当記事では詳しく解説しませんが、以下の記事で詳細に解説しておりますので、よろしければご確認ください。
WordPress化に必要なファイルを作成
HTMLファイルのソースコードを必要な箇所をPHPのソースコードに書き換えることができましたら、次はWordPressのテーマとして成立させるために、WordPressの仕様に沿ってテーマとして最低限必要なファイルをいくつか作成していきます。
WordPressテーマとして成立するためには、最低限以下のファイルが必要になります。
- style.css: テーマのスタイルシート。テーマのメタ情報を記述します。
- index.php: テーマのトップレベル階層のテンプレートファイルです。
- functions.php: テーマの機能を追加、変更、または削除するためのPHPファイルです。
もうすでにindex.phpは作成したので、残りのstyle.cssとfunctions.phpの作り方を解説していきます。
style.cssの作り方
style.cssを作成します。
sample_themeの中に「style.css」というファイル名でPHPファイルを作成します。
style.cssとは、WordPressのテーマファイルとして成り立たせるために必須のCSSファイルになります。
テーマファイルのトップレベル階層にstyle.cssを作成して、以下のコードをコピー＆ペーストしてください。
@charset "UTF-8";
/*
Theme Name: sample_theme
*/上記をペーストしていただけますと、WordPressテーマのメタ情報として登録されて、管理画面からテーマファイルとして操作・設定することが可能となります。
このstyle.cssの記述は「Theme Name」以外にもメタ情報として必要な項目があります。
内容としては以下になります。
@charset "UTF-8";
/*
Theme Name: テーマ名
Description: このテーマは、ブログやウェブサイトにクリーンでモダンな外観を提供するカスタムWordPressテーマです。カスタマイズ可能な機能を含み、さまざまなプラグインをサポートして機能を強化します。
Theme URI: https://example.com/my-custom-theme
Author: 山田 太郎
Author URI: https://example.com
Version: 1.0.0
License: GNU General Public License v2 またはそれ以降
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: ブログ, カスタムカラー, カスタムロゴ, カスタムメニュー, フィーチャー画像, フレキシブルヘッダー, ワンカラム, ツーカラム, 翻訳対応
*/上記のメタ情報の説明については以下になります。
| Theme Name | テーマの名前。これはWordPressのテーマセレクターで表示されます。 例: “テーマ名” |
| Description | テーマの簡単な説明。このテキストはWordPressの管理画面のテーマ詳細画面で表示されます。 例: “このテーマは、ブログやウェブサイトにクリーンでモダンな外観を提供するカスタムWordPressテーマです。カスタマイズ可能な機能を含み、さまざまなプラグインをサポートして機能を強化します。” |
| Theme URI | テーマのホームページのURL。デモサイト、ドキュメントページ、またはその他の関連リンクを指定します。 例: “https://example.com/my-custom-theme” |
| Author | テーマの作成者の名前。個人または企業の名前を記載します。 例: “鈴木 一郎” |
| Author URI | 作成者のホームページやプロフィールページのURL。 例: “https://example.com” |
| Version | テーマの現在のバージョン。更新や変更を示すためにセマンティックバージョニングを使用します。 例: “1.0.0” |
| License | テーマが配布されるライセンス。ほとんどのWordPressテーマはGNU General Public License (GPL)を使用します。 例: “GNU General Public License v2 またはそれ以降” |
| License URI | ライセンスの全文が記載されたURL。 例: “https://www.gnu.org/licenses/gpl-2.0.html” |
| Tags | テーマを説明するタグのリスト。これらのタグはWordPressテーマディレクトリでテーマを見つけやすくするために使用されます。 例: “ブログ, カスタムカラー, カスタムロゴ, カスタムメニュー, フィーチャー画像, フレキシブルヘッダー, ワンカラム, ツーカラム, 翻訳対応” |
上記内容の中で最低限「Theme Name」が記述されていればテーマとして成り立ちますので、すべてを記述する必要性はありません。
ですが、できる限り記述しておくことで、テーマファイルとしてちゃんとした作りである印象を持たせることができ、また、テーマを公式で配布する場合はほぼほぼ必須の記述となりますので、できる限りしっかり記述しましょう。
またこれは余談ですが、本格的にテーマを作成する場合、例えばお仕事としてWebサイト制作としてテーマ開発する場合や、テーマを公式で配布する場合などは必要なものはすべて記述しましょう。
functions.phpの作り方
最後に、functions.phpを作成します。
sample_themeの中に「functions.php」というファイル名でPHPファイルを作成します。
逆にいうとこれだけです。すごく簡単かと思います。
functions.phpは、WordPressテーマの重要なファイルの一つで、テーマにカスタム機能や追加機能を追加するために使用されます。
要するに、WordPressプラグインの処理、テーマの処理、コアの処理などをカスタマイズするための処理を記述するためのPHPテンプレートファイルになります。
functions.phpの役割は多岐にわたりますが、主な役割をいくつかご紹介いたします。
テーマのセットアップ
functions.phpファイルは、テーマの初期設定やセットアップを行うために使用されます。これには、テーマのサポート機能（例えば、カスタムロゴ、フィードリンク、自動フィードリンクのサポートなど）の有効化が含まれます。
function my_theme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );スクリプトやスタイルシートの追加
テーマにJavaScriptファイルやCSSファイルを追加するために、functions.phpファイルでwp_enqueue_scriptやwp_enqueue_style関数を使用します。
function my_theme_scripts() {
wp_enqueue_style( 'main-styles', get_stylesheet_uri() );
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );カスタムメニューの登録
ナビゲーションメニューをカスタマイズするために、カスタムメニューを登録します。
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my_theme' ),
'footer' => __( 'Footer Menu', 'my_theme' ),
));
}
add_action( 'init', 'my_theme_menus' );ウィジェットエリアの追加
サイドバーやフッターにウィジェットエリアを追加するためのコードを記述します。
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'my_theme' ),
'id' => 'sidebar-1',
'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'my_theme' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action( 'widgets_init', 'my_theme_widgets_init' );カスタム投稿タイプの作成
特定のタイプのコンテンツ（例：ポートフォリオ、イベントなど）に対応するカスタム投稿タイプを作成します。
function create_post_type() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolios' ),
'singular_name' => __( 'Portfolio' )
),
'public' => true,
'has_archive' => true,
)
);
}
add_action( 'init', 'create_post_type' );ショートコードの追加
ショートコードを作成し、投稿やページにカスタムコンテンツを挿入できるようにします。
function my_custom_shortcode() {
return '<p>これはカスタムショートコードです。</p>';
}
add_shortcode( 'custom_shortcode', 'my_custom_shortcode' );その他の役割
- カスタムフィルターやアクションの追加：WordPressの動作を変更するために、フィルターやアクションフックを追加します。
- 外部APIとの連携：外部サービスと連携するためのコードを追加します。
- カスタムウィジェットの作成：独自のウィジェットを作成してテーマに追加します。
以上のように、functions.phpファイルは、テーマ全体のカスタマイズや機能拡張を行うための中心的な場所であり、テーマ開発者にとって非常に重要な役割を果たします。
functions.phpによってまだまだ自由自在にWordPressをカスタマイズすることができるので、functions.phpをどんどん使いこなしていきましょう。
index.phpの役割
ここで先ほど作成したindex.phpの役割について解説しておきたいと思います。
index.phpは、ウェブサイトやウェブアプリケーションのルートディレクトリにある主要なファイルの一つです。
WordPressの場合、index.php はWordPressのテーマの中でも最も基本的なファイルの一つであり、WordPressがページの表示を制御するための重要なファイルです。
具体的には、WordPressの index.php ファイルは以下の役割を持っています。
| 役割 | 説明 |
|---|---|
| デフォルトテンプレートとして機能 | index.phpファイルは、WordPressがページを表示するために使用する最後の手段として働きます。具体的には、特定のテンプレートファイルが存在しない場合（例：single.phpやpage.phpが存在しない場合）、WordPressはindex.phpを使用してコンテンツを表示します。 |
| テーマの基本構造を提供 | index.phpファイルは、テーマの基本的なHTML構造やPHPコードを提供します。これには、ヘッダー、フッター、メインコンテンツエリアなどの基本的な要素が含まれます。 |
| WordPressのテンプレート階層の一部 | WordPressはテンプレート階層と呼ばれるシステムを使用して、異なる種類のページを生成します。例えば、ホームページ、ブログ投稿、カテゴリページなど。それぞれに対して特定のテンプレートファイルを使用しますが、これらのテンプレートファイルが存在しない場合は、最後の受け皿としてindex.phpが使用されます。 |
| 汎用テンプレートとして使用 | index.phpは、特定のテンプレートファイルが用意されていない場合の汎用テンプレートとして機能します。たとえば、アーカイブページのarchive.phpや、検索結果ページのsearch.phpなど、特定のテンプレートが存在しない場合に使用されます。 |
index.phpファイルは、テーマの中で最も基本的なファイルであり、最低限ページを表示するためのテンプレートファイルとして必要であるというページを構成する最後の受け皿の役割があります。
テーマ開発者はこのファイルを適切に設計してウェブサイトの外観や機能をカスタマイズします。
（当記事では静的なページを構成するHTMLファイルをWordPressテーマとして作り替えることを「WordPress化」と呼ぶことにします。）
ここまでで下図のようにテーマとして最低限の構成でのテーマ作成は完了です。
あとは作成したテーマをWordPress管理画面からアップロードしてテーマとして有効化すれば作成したページのデザイン通りにサイトが機能します。
テーマファイルをサーバーにアップロード
ここまで来ているということは無事sample_themeというディレクトリ名でテーマファイルを作成することができたかと思います。
あとはこのテーマをサーバーにアップロードしていきます。
アップロードする方法としては以下の方法があります。
- FTPファイルからサーバーへアップロード
- WordPress管理画面からアップロード
当記事ではそれぞれ解説いたします。
FTPファイルからサーバーへアップロード
まずはFTPファイルからレンタルサーバーを想定してアップロードする方法について解説いたします。
FTPソフトからサーバーへ接続し、wp-content/themes/ディレクトリ内にテーマフォルダを配置します。
当記事ではFileZillaを利用して解説いたします。
FTPシフトからサーバーへ接続するには以下の情報が必要です。
- ホスト：例）
ftp.example.comまたは192.168.1.1 - ユーザー名：例）example_user
- パスワード：例）example_password
上記接続情報に関しては、レンタルサーバー管理画面からFTPアカウントとして作成するなどすることで設定することができます。
下図のそれぞれの箇所に適切な情報を入力し、「クイック接続」をクリックしてください。
すると無事サーバーと接続されて下図のように右側にサーバーの内容が表示されたかと思います。
ご自身のWordPress本体のトップディレクトリ名のファイルをクリックして以下のように階層を進んでください。
【WordPress本体のトップディレクトリ名】/wp-content/themes/すると下図のように「themes」の階層の一覧にインストール済みのテーマがずらりと表示されているかと思います。この階層に作成したテーマをアップロードします。
右側に作成したテーマをそのままドラッグ＆ドロップしてアップロードしてください。
アップロードが完了すると下図のようにテーマ名が表示されているかと思います。あとはWordPress管理画面から有効化します。
管理画面左メニューの「外観」をクリックしてください。
すると、インストール済みのテーマ一覧に作成したテーマが追加されているのが確認できたかと思います。
作成したテーマの箇所をホバーしていただき、「有効化」ボタンをクリックしてください。
「有効化」ボタンをクリックしていただくとサイトの見た目が作成したテーマの内容として反映されます。
トップページを確認してみてください。下図のようにテーマが反映されたことが確認できるかと思います。
WordPress管理画面からアップロード
次にWordPress管理画面からアップロードする方法について解説いたします。
まずざっくりやり方としては、WordPressの管理画面にログインし、外観 > テーマから新しく作成したテーマを選択して有効化します。すると、サイトは新しいWordPressテーマに変更され、作成したテーマのデザインと機能が適用されます。
ここからは図を通して解説いたします。
まずは管理画面左メニューの「外観」をクリックしてください。
「テーマのアップロード」をクリックしてください。
クリックすると、下図のように「ファイルを選択」というテーマをアップする箇所が表示されるので、作成したテーマをzipファイルに変換していただき、ドラッグ＆ドロップしていただくか、もしくは「ファイルを選択」ボタンからzipファイルのテーマを選択してアップロードしてください。
アップできたら、「今すぐインストール」をクリックしてください。
すると下図のようにインストールの処理が開始されて完了します。
有効化のリンクがあるのでクリックしてください。これでサイトの見た目が作成したテーマの見た目になります。
試しにトップページを確認してみてください。
下図のように表示されているかと思います。
これで最低限のテーマは完成です。長かったですね、お疲れ様でした！
あとはご自身の好きなようにカスタマイズして本格的なテーマ開発をしてください。
本格的なテーマの作り方
ここまでで最低限のテーマ開発ができるようになりました。次は、本格的なテーマの作り方を解説していきます。
本格的なテーマ開発をするには、最低限のテーマ開発の流れに加えて以下の流れが必要になります。
- CSSファイルの作成
- JavaScriptファイルの作成
- 各ページ・パーツ用のPHPテンプレートファイルを作成
それぞれ解説していきますので、手順に沿って手を動かして見てください。
CSSファイルの作成・読み込み
まずはCSSファイルを別で作成してテーマファイルの管理を効率化させましょう。
具体的にはCSSファイルを配置するための「css」という名前のファイルをテーマのトップディレクトリに作成し、その中に「import.css」というファイルを作成して配置し、フックでCSSファイルを読み込むためのコードをfunctions.phpに記述する、という内容になります。
それでは早速、ご自身でテーマのトップ階層に「css」という名前のファイルを作成し、その中にimport.cssというCSSファイルを作成してください。
作成したら、index.phpのheadタグ内に記述しているstyleタグのCSSコードをimport.cssにコピー＆ペーストしてください。
ペーストが完了したら、index.phpにあるstyleタグはCSSが重複してしまうため、まるごと削除してしまって大丈夫です。
CSSファイルの読み込み自体は、wp_enqueue_style()関数をアクションフックのwp_enqueue_scriptsフックを使って読み込みます。
CSSを読み込むコードは以下になります。以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
function my_theme_enqueue_styles() {
wp_enqueue_style( 'my-theme-import-style', get_template_directory_uri() . '/css/import.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );エディタでは下図のようなイメージです。
これでimport.cssが読み込まれるようになりました。
正しく動作していれば下図のようにimport.cssが出力されているのが確認できるかと思います。
ウェブサイトページも正しくCSSが反映されているはずです。
これでCSSの読み込みは完了です！最後にwp_enqueue_style()関数と、テーマとプラグイン両方で頻繁に使用されるwp_enqueue_scriptsフックについて解説させていただきます。
wp_enqueue_style()関数は、テーマやプラグインでスタイルシート（CSSファイル）を読み込むための関数です。
<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );以下が関数の引数の説明です。
| 引数 | 内容 |
| $handle | 読み込むスタイルシートに付ける名前（ハンドル）です。他のスタイルシートやスクリプトと区別するために使います。例えば、'my-theme-style' など、ユニークな名前を設定します。 |
| $src (必須) | 読み込むスタイルシートのURLです。通常は、get_template_directory_uri() や get_stylesheet_directory_uri() を使ってテーマ内のスタイルシートのパスを指定します。例えば、get_template_directory_uri() . '/css/style.css' など。 |
| $deps (必須) | 依存するスタイルシートを配列で指定します。読み込むスタイルシートが他のスタイルに依存する場合、そのハンドル名をここに指定します。例: array( 'bootstrap' ) と指定すると、bootstrap スタイルが先に読み込まれます。依存がない場合は array() とします。 |
| $ver (省略可能) | スタイルシートのバージョン番号です。バージョン番号を指定することで、キャッシュのコントロールが可能です。指定しない場合は、テーマのバージョンや現在の時間が使われます。例: '1.0.0' や 'null'。 |
| $media (省略可能) | 読み込むスタイルシートの適用メディアを指定します。デフォルトは 'all' で、すべてのデバイスに適用されます。指定できる値には、'screen', 'print', 'handheld' などがあります。例: 'screen' とすればスクリーン（PCやスマホの画面）専用スタイルシートとして扱われます。 |
wp_enqueue_style()関数は、wp_enqueue_script()関数と並んでWordPress構築では結構な頻度で利用されるので、ここでしっかり理解しておきましょう。
JavaScriptファイルの作成・読み込み
次はCSSファイルと合わせて、JavaScriptファイルも別で作成してテーマファイルの管理を効率化させましょう。
具体的にはJavaScriptファイルを配置するための「js」という名前のファイルをテーマのトップディレクトリに作成し、その中に「import.js」というファイルを作成して配置し、フックでJavaScriptファイルを読み込むためのコードをfunctions.phpに記述する、という内容になります。
それでは早速、ご自身でテーマのトップ階層に「js」という名前のファイルを作成し、その中にimport.jsというJavaScriptファイルを作成してください。
この時点ではJavaScriptコードは無いため、下図のように記述なしの空のJavaScriptファイルを読み込む形になります。
ファイルの読み込みはwp_enqueue_script()関数をアクションフックのwp_enqueue_scriptsフックを使って読み込みます。
JavaScriptを読み込むコードは以下になります。以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
function my_theme_enqueue_scripts() {
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/import.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );エディタでは下図のようなイメージです。
これでimport.jsが読み込まれるようになりました。
正しく動作していれば下図のようにimport.jsが出力されているのが確認できるかと思います。
ウェブサイトページも正しくJavaScriptが反映されているはずです。
これでJavaScriptの読み込みは完了です！最後にwp_enqueue_script()関数について解説させていただきます。
wp_enqueue_script()関数は、JavaScriptファイルを読み込むための関数です。
<?php
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );以下が関数の引数の説明です。
| 引数 | 内容 |
| $handle (必須) | 読み込むスクリプトに付ける名前（ハンドル）です。スタイルシートと同様、ユニークな名前をつけて他のスクリプトと区別します。例: 'my-theme-script'。 |
| $src (必須) | 読み込むスクリプトのURLです。通常は、get_template_directory_uri() でテーマのJavaScriptファイルを指定します。例: get_template_directory_uri() . '/js/custom.js'。 |
| $deps (省略可能) | 依存するJavaScriptを配列で指定します。このスクリプトが他のスクリプトに依存している場合、そのハンドル名を指定します。WordPressのコアスクリプトには jquery などがあり、依存関係がある場合は指定することで、そのスクリプトが先に読み込まれます。依存がなければ array() を指定します。 |
| $ver (省略可能) | スクリプトのバージョン番号です。これもキャッシュのコントロールに使います。バージョンを指定しない場合、WordPressはテーマのバージョンや現在の時間を使用します。例: '1.0.0'。 |
| $in_footer (省略可能) | スクリプトをページのフッター（</body> タグの直前）に読み込むかどうかを指定します。true を指定するとフッターに、false を指定するとヘッダー（<head> タグ内）に読み込まれます。通常、スクリプトがページのレンダリングをブロックしないように、true を設定してフッターに読み込むことが推奨されます。例: true。 |
wp_enqueue_script()関数は、WordPress構築では必須と言っても過言ではないくらいかなりの頻度で利用されるので、ここでしっかり理解しておきましょう。
各ページ・パーツ用のPHPテンプレートファイルを作成
次は、WordPressが提供している機能として、ヘッダーやフッターなどのパーツ部分や、記事ページや固定ページ、アーカイブページなどのページごとにPHPテンプレートファイルを分けて管理しやすくするということをやっていきましょう。
ここで事前に知っておくべきことは先ほど前述したテーマ作成に必要なPHPファイルの構成で解説した内容になります。
内容にあるheader.phpやfooter.php、single.phpやpage.phpなどの説明があったかと思いますが、内容の通りこれらPHPファイルをテーマファイルのトップ階層に作成していきます。
作成が完了したら、index.phpやsingle.php、page.phpなどのページ本体を構成するテンプレートファイルにheader.phpやfooter.phpなどのパーツを出力するファイルを読み込むためのテンプレートタグを記述して効率化します。
流れとしてはこのような形になります。
まだまだ奥が深いテーマ開発
ここまでの内容を抑えていただければ、WordPressの受託開発をクライアントから引き受けて開発できる最低限の知識が身についたかと思います。
ただ、WordPressのテーマ開発ではまだまだカスタマイズできることがたくさんあります。
例えば以下のような内容があります。
- ページネーションの実装
- パンくずリストの実装
- カスタム投稿タイプの作成
- カスタムタクソノミーの作成
- ショートコードの作成
- フックを使って処理をカスタマイズ
また、テーマを一般に公開、販売するレベルになると以下のカスタマイズが必須となってきます。
- メニューの登録、実装
- テーマカスタマイザーの登録、実装
- ウィジェットの登録、実装
- テーマ独自の機能とその管理画面を実装
- テーマ独自の管理画面カスタマイズ
- テーマ独自のアクションフック、フィルターフックを設置
- テーマのバージョンを管理しやすく実装
- ブロックエディタのブロック実装
- ブロックエディタのカスタマイズ
- 国際化対応（文字の翻訳）
- マイグレーションの実装（テーマのバージョンの互換性管理など）
- テーマ独自のデータベース（テーブル）作成の実装…など
上記のように例をあげたらまだまだたくさんカスタマイズできることが残っているのがわかるかとおもます。
特に、ブロックエディタ関連ではPHPと合わせてReact.js（JavaScriptのライブラリ）というプログラミング技術を使用することになるので、学習すべきことも必然と増えていきます。
このレベルになってくるとテーマ販売としてのテーマ開発をするのに必須の内容となってはくるのでテーマを販売してみたい！という方は必ずおさえておくべき内容です。
またテーマ公開やテーマ販売のみならず、受託開発でもクライアントから「もっと便利にできないか？こういった機能を作れないか？」といったようなご要望があった場合に対応することができるようになるため、プロとしてWordPressエンジニアを仕事としてやっていくなら必ずこのレベルになるまでテーマのカスタマイズをできるようになっておきましょう。
まとめ
WordPressのテーマを自作で作る方法についての解説は以上になります。
テーマを自作出来ることによって、WordPressでのサイト構築において100%自由な見た目でデザインを作ることができ、他にもSEO対策のためのカスタマイズをおこなったり柔軟に対応することが可能です。
また、WordPressのテーマを自作できるようになれば、WordPressエンジニアとして活躍できる可能性が高まります。
そのため、よろしければぜひ当記事をお仕事などでお役立ていただけましたら幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など
