WordPressテーマを自作する方法は？必要なツールや知識・作業の流れ・ファイルの作り方を解説

WordPressテーマを自作するための準備

WordPressテーマの自作にあたり、以下の準備が必要です。

いきなり本番環境にテーマを実装してサイトに影響が出ないよう、テーマを自作する前にローカル環境を整備する必要があります。

ローカル環境が構築できたら、WordPressをローカル環境内にインストールし、サンプル用テキストで動作確認を行います。問題なく動作確認ができたら自作に取りかかりましょう。

ローカル環境を整える

「ローカル環境」とは、自身のパソコン内部のみで完結し、自由かつ安全にカスタマイズ可能な仮想環境のことを指します。ローカル環境下でのサイトはWeb上で公開されないため、エラーが出ても本番環境や公開済みのWebサイトに影響しません。

プログラム開発においては、一般的にローカル環境でテストを行い、問題ないことを確認してから本番環境に実装します。ローカル環境はWordPressの本番環境に近いものが望ましいです。

WordPressをローカル環境にインストールする

「WordPress日本語版公式サイト」にアクセスし、WordPressの本体ファイルをダウンロードしましょう。公式サイトの「WordPressを入手」をクリックし「WordPress◯.◯.◯（◯はバージョンの数字）」をクリックすると本体ファイルをzip形式のファイルでダウンロードできます。

本体ファイルがダウンロードできたら、インストール作業を行いましょう。インストール方法はローカル環境を整える際に使用したツールにより異なります。

サンプル用のテキストを用意する

サンプル用のテキスト（静的ファイル）を用意しましょう。サイトの中身が空でもテーマの自作は可能です。動作テストをした際に思いどおりに動いているかの確認が難しいため、サンプル記事の用意をおすすめします。

サンプル記事があると動作確認がしやすいです。ローカル環境内でサンプル記事を投稿し、投稿内容が問題なく表示されたらテーマの自作を始めましょう。

WordPressテーマを自作するために必要なツール

WordPressテーマを自作するにあたり、以下のツールが必要です。

テーマの自作にあたり、開発環境（ローカル環境）の準備が必須です。開発環境を構築し、手順に沿ってWordPress本体をダウンロードして開発環境を整えます。

PHP・HTML・CSSで書くためのテキストエディタも用意します。テキストエディタはどのポイントを重視するか考えたうえで選びましょう。

開発環境

テーマを自作するためには、本番環境に近い開発環境（ローカル環境）の準備が必要です。開発環境を構築するためのツールは以下のものがあります。

ツールをダウンロードして、手順に沿ってインストールするだけでローカル環境が整います。いずれのツールも無料で利用できますが、初心者には「Local」がおすすめです。WordPressのインストール作業が不要で、ボタンのクリックのみでローカル環境のWordPressが立ちあがります。

テキストエディタ

PHP・HTML・CSSなどのプログラミング言語で書くためには、テキストエディタが必要です。「日本語対応か」「使用するパソコンのOSに対応しているか」「使いたい機能が搭載されているか」などのポイントを重視して選びましょう。

無料・有料問わずさまざまなテキストエディタがリリースされていますが、代表的な無料のテキストエディタには次のものがあります。

WordPressテーマの自作に必要な知識

WordPressテーマを自作する際は、以下の知識が必要です。

HTMLやCSS、PHPなどのプログラミング言語の基礎知識は最低限身につける必要があります。プログラミング言語に加えて、WordPressの基本的な構造も理解しておくと制作がスムーズに進むでしょう。

HTML

HTMLはコンピュータが理解できるようにマークアップする言語です。「マークアップ」とは、タイトルや見出しなどのタグを使い「意味づけ」を行うことを指します。文章構造や視覚表現などをコンピュータが正しく認識できるようになります。

コンテンツをブラウザに表示させるベースとなる言語で、Webページの骨組みといえるでしょう。WordPressテーマの自作にあたり最も重要な知識ですが、誰でも比較的簡単に習得できる言語です。

CSS

CSSはWebページのスタイルを指定し、文字や背景の装飾・デザインを行う言語です。文字の大きさや色、ヘッダーのレイアウトなどを決定します。

HTMLがWebページ内の要素の構造を指定するものに対し、CSSは要素の装飾を指定します。HTMLとの組み合わせにより有効に働くため、CSSにより装飾をコントロールしているといえるでしょう。

PHP

PHPはWordPressで使用されているプログラミング言語で、動的にWebページを生成します。Javaと並んで人気の高いプログラミング言語です。

文法が簡単なため、比較的習得しやすいことも特徴に挙げられます。基本的な変数や関数は最低限理解しましょう。

MySQL

MySQLは世界トップシェアのデータベース管理システムで、WordPressのデータベース部分にも使用されています。MySQLがWordPressに使用されていることにより、多くの記事を保存しユーザーのアクセスに応じて瞬時に表示する仕組みが実現しています。

データを複数の列と行で構成された表として取り扱う仕組みにより、大容量のデータでも高速に動作し、便利な機能も多く搭載されています。複数のOSに対応していることや、オープンソースで無料であることも特徴のひとつです。

WordPressの基本構造

WordPressの基本構造は、テーマが持つ役割を理解するために必要な知識です。WordPressを取り扱う基礎知識として覚えておきましょう。

WordPressは「コア」「テーマ」「プラグイン」の3つの要素で構成されています。コアはWordPress本体にあたる部分、テーマはサイト全体の見た目を決める要素、プラグインは機能を拡張する要素です。WordPressではテーマ変更を行うことでサイトのデザインや機能を変えられます。

WordPressテーマを自作する流れ

WordPressテーマの自作は以下の流れで行います。

テーマを自作する際は、はじめにHTMLとCSSでコーディングし、全体のデザインを作成しましょう。デザインができたら構成に必要なだけのPHPファイルを1つずつ作成します。

必要なファイルが揃ったらローカル環境下で動作テストを行い、問題ないことが確認できたら本番環境にアップロードを行ってください。基本的に「こまめに動作テストを実施し、問題が発生したらその都度戻ってやり直す」の繰り返しです。

1. HTMLとCSSでWebサイトをデザインする

制作はコーディングしたHTMLやCSSをもとに進めるため、まずはHTMLとCSSでWebサイトの見た目を作成します。テーマフォルダ内にHTMLをコーディングし「index.html」を、CSSをコーディングし「style.css」を作成しましょう。

先にデザインを作成すると以下のメリットがあります。

2. 作成したデザインを複数のPHPファイルに落とし込む

WordPressは複数のファイルで構成されており、重要度の高いファイルやあると便利なファイルなどにわかれています。構成するファイルのなかでも「index.php」「style.css」はテーマ作成における必須ファイルです。

作成した「index.html」は拡張子を「.php」に変換しテンプレート化します。変換後はヘッダーやサイドバーなどの部品ごとにテンプレートを分割してください。「style.css」は先頭にテーマ名や説明などを記載します。

3. 必要なPHPコードを追記する

テンプレートを分割し必要なファイルを作成したあとで、ほかにも必要なファイルがある場合はPHPコードを追記しテンプレートファイルを追加で作成します。

必要なファイルが新たに見つかった場合は、拡張子「.php」のテンプレートファイルを作成し、テーマフォルダに配置してください。手順を振り返り、ほかに作業漏れがないかも確認するとさらなる手間を省けます。

4. 動作テストを行い問題なく動くかどうかを確認する

本番環境へのアップロードに移る前に、ローカル環境下で動作テストを行いましょう。動作テストを行う前に本番環境にアップロードすると「ページが表示されない」「レイアウトが崩れる」などの不具合が生じる可能性があるためです。

本番環境で不具合が生じると、対処の手間がかかってしまいます。二度手間になりかねないため、必ずローカル環境下で動作テストを行いましょう。

5. 問題なければ本番環境にアップロードする

動作テストで問題が見つからなければ、本番環境にアップロードします。レンタルサーバー内に自作テーマ用のディレクトリを作成し、FTP（ファイル転送ソフト）を使用してすべてのファイルをアップロードしてください。必ずWordPressのフォルダ構成に従い、アップロードしましょう。

アップロード完了後はWordPressの管理画面にアクセスし、自作テーマを有効化します。テスト環境と同様に表示されればアップロードは完了です。

WordPressテーマの自作に必要なファイル11選

WordPressテーマの自作にあたり、以下に挙げるファイルを用意する必要があります。

リストに挙げられているすべてのファイルを使うわけではなく、必要なものだけ使用しましょう。

1. functions.php：動作制御や機能追加をするファイル

「functions.php」は、サイトのテーマ全体にかかわる非常に重要で欠かせないファイルです。テーマ内で使用する関数の定義やメニューの設定など、テーマ適用時の処理を記載します。「functions.php」のカスタマイズにより思うとおりに機能の拡張や変更ができ、必要なコードはあとからでも追加が可能です。

ファイル設定にミスがあると、サイトの表示に影響が出たりサイト全体が停止したりするおそれがあります。編集前にバックアップを取ったり、FTPが利用可能な環境をあらかじめ用意したりしましょう。

2. index.php：サイト全体のデザインのベースになるファイル

「index.php」は、サイト全体のデザインのベースを形づくるファイルで、コンテンツを作成し、テーマとして認識させるために必要不可欠です。サイトのトップページの情報を記述します。

中身は空でも問題ありませんが「index.php」ファイルがないとテーマとして認識されません。テーマフォルダに「index.php」を作成しましょう。

3. style.css：CSSを記述するファイル

「style.css」はテーマをWordPressに認識させるために必須で、テーマのデザイン全体にかかわるファイルです。サイトを装飾するためのCSSを記述したり、コメントヘッダーでテーマの情報を入力したりしてテーマの見た目を整えます。

内容の書き換えにより、フォントサイズやテーマ内のカラー・線の太さ・スタイルなどの変更が可能です。記述にミスがあるとサイトのデザインが崩れてしまうため「正常に表示されているか」をこまめに確認しながら作成を進めましょう。

4. header.php：ヘッダー部分を記載するファイル

「header.php」は、サイトの全ページで表示するヘッダー部分の記載に用いるファイルです。サイトのロゴやタイトル、グローバルメニューなど全ページ共通で表示したい要素を記載します。

HTMLの書き出しで必要な「body」や「html」などの開始タグ、ヘッダー情報を読み込むタグも記載しましょう。Google Analyticsの解析タグも記載するとページごとにコードを書く手間が省けます。

5. sidebar.php：サイドバー部分を記載するファイル

「sidebar.php」は、サイトの端に表示するサイドバーの記載に用いるファイルです。管理者のプロフィールや最新記事の一覧・SNSへのリンクなどを表示します。

内容はHTMLで直接記述できますが、管理画面でウィジェットを追加・設定して表示させることも可能です。Webサイトのレイアウトによりサイドバーが存在しないものもあります。

6. comments.php：コメント機能をカスタマイズするファイル

「comments.php」は、コメント機能の編集に用いるファイルです。記事ごとのコメントの表示やコメント入力欄をカスタマイズし、書き込まれたコメントの投稿・表示を行います。

コメント欄は簡単なコードの記載により表示できますが、見栄えがよくありません。「style.css」にCSSを追加したりコメントプラグインを使用したりしてデザインを整えましょう。

7. single.php：「投稿」機能で追加したページを表示するファイル

「single.php」は「投稿」機能で追加した記事の表示に用いるファイルです。投稿日や投稿者・記事のカテゴリなどを記載します。「index.php」や「page.php」との共通部分が多いため、複製して作成しても問題ありません。

「single.php」で表示されるファイルは一覧ページではなく、各記事の個別ページです。訪問者が最もよく目にするページのため、必要な要素をしっかり盛り込み見やすいデザインにしましょう。関連記事を表示し、サイトの回遊率の向上も大切です。

8. page.php：「固定ページ」で追加したページを表示するファイル

「page.php」は「固定ページ」機能で追加した記事の表示に用いるファイルです。「固定ページ」はその内容だけで完結するページのことをいいます。「single.php」とは異なり、ページ送り機能や関連記事・カテゴリの表示がありません。

「index.php」や「single.php」との共通部分が多いため、いずれかを完成させたあとで複製して作成すると効率的です。

9. search.php：Webサイト内の検索結果を表示するファイル

「search.php」は、訪問者が行ったサイト内検索の検索結果の表示に用いるファイルです。WordPressループを使用し、検索ワードに該当する記事を一覧で表示します。

検索機能を有効にするためには検索フォームとボタンも必要なため、フォームを表示させるためのPHPファイルも作成しましょう。サイドバーやヘッダーなど全ページ共通で表示する部分につけるとアクセスしやすく便利です。

10. screenshot.png：テーマの概要を表す画像ファイル

「screenshot.png」は、テーマの概要を表す画像ファイルです。管理画面で「外観」の「テーマ」を開くと「screenshot.png」がサムネイルとして設定・表示されます。

画像ファイルは独自に作成したものでもトップページのスクリーンショットでも問題ありません。自作テーマは訪問者からは見えないため、自分で把握できる画像に設定するとほかのテーマとの区別ができ、管理がしやすいです。

11. 404.php：アクセス先が存在しない場合に表示を出すファイル

「404.php」は、訪問者がアクセスしたページが存在しない場合にエラー表示を出すファイルです。トップページに戻るよう促したり、メニューから別ページに飛ぶよう案内したりするとサイト回遊率が向上します。訪問者向けにユーモアを取り入れるのもいいでしょう。

「404.php」がなくてもエラーページは表示されますが、作成しておくとサイトの完成度が高まります。デザインされたページを表示したい場合は「404.php」を使用しましょう。アクセスしたページが存在しないとページ離脱につながるため、別ページへ誘導する仕組みを盛り込むことが重要です。

WordPressテーマを自作するメリット

WordPressテーマを自作するメリットは以下の3つです。

デザインの自由度が上がる

自分でWebサイトの仕様をカスタマイズできるため、デザインの自由度が上がります。必要な機能を備えた理想のWebサイトの作成が可能です。既存のテーマはレイアウトやカラム数（縦の列の分割数）が固定されていますが、自作テーマではレイアウトやカラム数を自由に決められます。

デザインにこだわることによりほかのサイトとの差別化を図ることも可能です。自作するためファイルの構造や仕組みも把握でき、機能の追加やデザインの変更・修正があとからでも簡単にできます。

プログラミングスキルが身につく

WordPressテーマを自作するためにはHTML・CSS・JavaScriptの知識が必要ですが、制作を通じてプログラミングスキルを習得できます。

プログラミング言語に共通した文法や概念も理解でき、1つの言語を習得するとほかのプログラミング言語への応用を利かせられる点もメリットです。

ページ表示を早くする

自分にとって必要な機能のみを実装し不要な機能ははじめから除けるため、Webサイト全体の動作が軽量化されページ表示も速くなります。

自作の経験を積むことでさらに高機能なテーマを作成できるようになり、WordPressでできることの幅も広がるでしょう。

WordPressテーマを自作するデメリット

WordPressテーマを自作するデメリットは以下の2つです。

時間と労力がかかる

自分で行う作業の量が多いため、WordPressテーマを自作するためにはどうしても時間と労力がかかります。スキルをまったく持たない方の場合、Web構築やプログラミングの知識・スキルを身につける時間が必要でしょう。

デザインやテーマに搭載する機能を検討する時間も必要なため、一般的なテーマのカスタマイズに比べて時間がかかります。

プログラミングに関する多くの知識が必要になる

テーマを自作する際は、プログラミングの基本的な知識が必要です。難しいスキルを要するわけではありませんが、HTML・CSS・JavaScript・MySQL・WordPress関数などの知識は身につけるべきです。

知識を持たない状態で自作に取りかかろうとすると多くの時間がかかるため、制作前に勉強してから取り組むことをおすすめします。

まとめ

WordPressでテーマを自作する際、エラーが出たときに備えてローカル環境を構築し、1度動作確認を行いましょう。ローカル環境下でうまく作動したら本番環境にアップロードしてください。

WordPressテーマの自作は、自分好みにカスタマイズできることが最大のメリットです。時間や労力がかかり、知識が必要な点が難点ですが、Webサイトの軽量化やほかのサイトとの差別化が期待できるためぜひ挑戦してみましょう。

比較ビズは、多数のWebサイト制作会社の中から自社にぴったりの相談相手を探せる無料の比較サイトです。必要な情報を入力することで、全国各地のWebサイト制作会社を比較できます。自社のホームページ制作でお悩みの方は、ぜひ1度比較ビズを利用してください。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。