wordpressオリジナルテーマの作り方と自作3パターン

既存テーマだとどうしてもサイトの見た目が似てしまう、自分のデザインをそのままWordPressで動かしたい、そんな思いから「WordPressのオリジナルテーマの作り方」や「WordPressでテーマを自作する方法」を探している方が多いと思います。

wordpressオリジナルテーマの作り方を始める前に押さえたいこと

wordpress自作テーマに向いている人・向いていない人

自作テーマ作りは、向き不向きが少しあります。ざっくり自分のタイプをチェックしてみてください。

タイプ	向いている人の例	向いていない人の例
スキル面	HTMLとCSSで簡単なページが作れる、超基礎レベルのPHPなら調べてなんとか読める	コードはほとんど触ったことがなく、管理画面だけで完結させたい
目的	自分だけのデザインにこだわりたい、将来案件で使えるようになりたい	とにかく急いでサイトを公開したい、デザインはあまり気にしない
性格	コツコツ作業するのが嫌いではない、エラーが出ても調べながら進められる	エラーが出るとすぐ心が折れる、仕組みにはあまり興味がない

私の感覚だと、HTMLとCSSで1カラムのシンプルなページが作れるなら、WordPressオリジナルテーマの作り方は十分身につきます。逆に「管理画面以外は触りたくない」という場合は、既存テーマやプラグインを組み合わせる方向の方が幸せです。

自作テーマと既存テーマ・子テーマの違い

次に、WordPress自作テーマと、既存テーマをカスタマイズする方法の違いを整理します。

・既存テーマ
デザインと機能が最初から用意されているので、インストールしてすぐ使えます。反面、「いらない機能が多い」「他サイトと雰囲気が似てしまう」といった悩みも出やすいです。

・子テーマ（既存テーマのカスタマイズ）
親テーマのデザインや機能をベースに、一部だけを変更できます。WordPressオリジナルテーマをいきなり自作するのが不安な人には、入門としてかなりおすすめの方法です。

・完全な自作テーマ
手元のHTMLやデザインデータから、WordPressのルールに沿ってテーマを組み上げていきます。デザインも構造も自由なぶん、最低限のPHPやテンプレートの知識が必要で、慣れるまでは少し時間がかかります。

将来的に「仕事で使えるレベル」を目指すなら、既存テーマ→子テーマ→完全な自作テーマと、少しずつステップアップしていくイメージがおすすめです。

自作テーマを作る前にそろえたい環境とツール

WordPressでテーマを自作する前に、作業しやすい環境を整えておきましょう。

• ローカル開発環境
  パソコンの中にテスト用のサーバーを作り、その中でWordPressを動かします。クリック操作で簡単に環境を作れるツールも多いので、それらを使うと楽です。
• コードエディタ
  VS Codeなど、コードを書きやすいエディタを用意しておきます。色分けや検索機能があるだけで、WordPress自作テーマ作りの効率がかなり変わります。
• ブラウザのデベロッパーツール
  Chromeなどについている「検証」機能です。表示が崩れたときに、どのCSSが当たっているか確認するときに役立ちます。
• ベースとなるHTMLとCSS
  WordPressのオリジナルテーマの作り方は、ざっくり言うと「静的なHTMLサイトを、テーマのルールに合わせて分解していく」作業です。先にトップページや下層ページのHTMLとCSSを組んでおくと、その後の作業がとてもスムーズになります。

wordpress自作テーマの全体像を3ステップでイメージしよう

HTMLからwordpressオリジナルテーマになるまでの3ステップ

まずは、全体の流れを表でざっと眺めておきましょう。

ステップ	やること	ポイント
1	静的なHTMLとCSSを完成させる	ヘッダーやフッターなど共通パーツを意識して作っておく
2	テーマフォルダと必須ファイルを作る	style.cssとindex.phpがあれば、最低限テーマとして認識される
3	テンプレートを分割し、ループやテンプレートタグを組み込む	header.phpやsingle.phpなどに分けていく

この3ステップを頭に入れておくと、WordPressオリジナルテーマの作り方が「何から手を付ければいいか分からない状態」から、一気にクリアになります。

テーマフォルダと必須ファイルの中身

ここでは、WordPress自作テーマに最低限必要なファイルを整理します。

• テーマフォルダ
  /wp-content/themes/ の中に、自分のテーマ用フォルダを作ります。例えば「my-original-theme」のような名前にしておくと分かりやすいです。
• style.css
  テーマ名や作者名などを書く「テーマ情報」と、通常のCSSを書いていくファイルです。冒頭に専用のコメントを書いておくことで、管理画面の「外観 → テーマ」にオリジナル名が表示されます。
• index.php
  テーマのメインとなるテンプレートファイルです。最初は完成済みのHTMLをそのまま貼り付けておき、あとからheader.phpやfooter.phpに分割していけば大丈夫です。
• screenshot.png
  テーマ一覧に表示されるサムネイル画像です。必須ではありませんが、複数テーマを切り替えるときに一目で分かるので、できれば用意しておきたいところです。

よく使うテンプレートファイルの役割を知ろう

WordPressオリジナルテーマの作り方を理解するには、代表的なテンプレートファイルの役割を知っておくと楽になります。

• header.php
  サイト共通の「上の部分」です。ロゴやグローバルメニュー、headタグ内の読み込みなどをまとめます。
• footer.php
  サイト共通の「下の部分」です。コピーライトやフッターメニューなどを入れます。
• sidebar.php
  サイドバー付きレイアウトの場合に読み込むファイルです。プロフィールやカテゴリー一覧、検索フォームなどを配置します。
• single.php
  投稿（ブログ記事）1本分のページを表示するテンプレートです。ループの中でタイトルや本文を表示します。
• page.php
  会社概要やお問い合わせなど、固定ページを表示するテンプレートです。
• front-page.php / home.php
  サイトのトップページを表示するときに使われるテンプレートです。トップをブログ一覧にするか、固定ページにするかで使われ方が変わります。

実践編① クラシックなwordpressオリジナルテーマの作り方

トップページをheaderとfooterに分ける基本手順

最初の作業は「共通パーツを切り出すこと」です。1枚もののHTMLから、header.phpとfooter.phpを分けていきます。

• ヘッダー部分をheader.phpにコピー
  ロゴ、グローバルナビ、メインビジュアルの直前くらいまでを目安に切り分けます。
• フッター部分をfooter.phpにコピー
  フッターメニューやコピーライト、bodyやhtmlの閉じタグの手前までをまとめます。
• index.phpから共通部分を削除して呼び出しに変更
  共通で読み込む箇所は、専用のテンプレートタグでheader.phpやfooter.phpを呼び出します。

最初のうちは「どこからどこまでがheaderなのか」迷いやすいですが、「他のページでも同じ部分は全部まとめる」と考えると分かりやすいです。

投稿・固定ページ用テンプレートの作り方

次に、single.phpとpage.phpを作って、投稿ページと固定ページを表示できるようにします。

• single.php
  ブログ記事の詳細ページを表示するときに使われます。タイトル、投稿日、本文、アイキャッチ画像などを表示します。
• page.php
  会社概要やサービス紹介など、固定ページを表示するときに使われます。投稿とは少し違うレイアウトにしたい場合は、ここで自由にデザインできます。

どちらのテンプレートも、基本の流れは似ています。ヘッダーの呼び出し → コンテンツ部分 → サイドバー（必要なら）→ フッターの呼び出し、という流れを意識して組んでいくと整理しやすいです。

functions.phpで自作テーマに機能を追加する

ここでは、WordPress自作テーマに必要な機能をまとめて設定するfunctions.phpについて解説します。

自作テーマでは、メニューやアイキャッチ、ウィジェットなどを「使えるようにする」宣言が必要です。代表的な設定を表にまとめました。

やりたいこと	functions.phpでの設定イメージ	使えるようになるもの
グローバルナビを管理画面から編集したい	メニューの登録を行う	「外観 → メニュー」でナビを作成・変更できる
アイキャッチ画像を設定したい	サムネイルの有効化を行う	投稿ごとにアイキャッチ画像を設定できる
ウィジェットエリアを使いたい	サイドバーなどのウィジェット登録を行う	管理画面でドラッグ＆ドロップでパーツ配置ができる

最初は、ネットにあるサンプルコードをコピペして動かしてみるだけでも十分です。そのうち「この自作テーマでは、ここだけ少し変えたい」という気持ちが出てくるので、そのタイミングで中身を理解していけばOKです。

実践編② ブロックエディタ向けwordpress自作テーマの考え方

クラシックテーマとブロックテーマの違い

まずは、クラシックなWordPressオリジナルテーマと、ブロックテーマの違いをざっくり押さえましょう。

項目	クラシックテーマ	ブロックテーマ
レイアウト	PHPのテンプレートファイルで構成	ブロックエディタで構成
デザイン変更	コードで調整することが多い	管理画面から変更しやすい
学習のポイント	テンプレート階層やPHPの理解が必要	ブロックの仕組みやtheme.jsonの理解が必要
向いている人	コードで細かく調整したい人	管理画面から柔軟に編集してもらいたい案件

私のおすすめは、「まずクラシックなWordPress自作テーマで仕組みを理解し、そのあとでブロックテーマも試してみる」流れです。土台となる考え方は共通しているので、一度理解しておくと応用が効きます。

theme.jsonでデザインルールを決める

ブロックテーマでは、theme.jsonという設定ファイルで、サイト全体のデザインルールを管理します。

• カラーやフォントサイズのプリセット
  ブランドカラーや見出しのサイズをtheme.jsonにまとめておくと、ブロックエディタのパレットからすぐに選べます。
• コンテナ幅や余白のルール
  コンテンツ幅やセクション間の余白も、theme.jsonで統一できます。これによって、クライアントが自分でブロックを追加しても、デザインのバランスが崩れにくくなります。

WordPressのオリジナルテーマをブロック対応で作る場合は、theme.jsonを「デザインの取扱説明書」のようなイメージで整えておくと理解しやすいです。

クライアントが更新しやすいwordpress自作テーマの考え方

自分だけで運用するサイトなら、多少クセのある作りでも何とかなります。ただ、クライアント案件でWordPress自作テーマを使う場合は、「誰が更新しても壊れにくい構造」にすることが大事です。

• よく使うレイアウトをパターン化しておく
  ヒーローセクション、料金表、よくある質問など、頻出パーツはブロックパターンとして登録しておくと喜ばれます。
• 触ってほしくないエリアを明確にしておく
  会社ロゴやフッターの一部など、変更されると困る箇所は、別テンプレートに切り出したり、ユーザー権限で制御したりします。
• 管理画面の日本語ラベルを分かりやすくする
  メニュー名やカスタム投稿タイプの名前を分かりやすくしておくだけでも、更新担当者のストレスがぐっと減ります。

WordPressオリジナルテーマの作り方を覚えると、「作って終わり」ではなく「どう運用してもらうか」まで考えられるようになります。ここまで意識できると、制作者としての評価も上がりやすいです。

wordpress自作テーマを公開するときのチェックリストと失敗例

wordpress自作テーマ 公開前チェックリスト

公開前に最低限見ておきたいポイントを、一覧で確認しておきましょう。

チェック項目	内容	確認のコツ
レスポンシブ対応	スマホ・タブレット・PCで表示が崩れていないか	実機とブラウザのデバイスモードの両方で確認する
パーマリンク	URLが長すぎたり、日本語だけになっていないか	シンプルな英単語のスラッグに統一する
画像サイズ	不要に重い画像を使っていないか	画像圧縮ツールであらかじめ軽くしておく
フォーム動作	お問い合わせなどの送信が正常か	テスト送信を複数回行ってみる
404ページ	存在しないURLにアクセスしたときの表示	専用テンプレートを用意しておくと親切

チェックリストは、自分用でもいいのでメモアプリなどにまとめておくと、次にWordPressオリジナルテーマの作り方を試すときにも使い回せて便利です。

ありがちなエラーとトラブルシューティング

WordPress自作テーマでよくあるトラブルを、いくつか挙げておきます。

• 画面が真っ白になった
  PHPの文法エラーなどで処理が止まっていることが多いです。エラーメッセージを確認できるようにしておくと、原因特定が早くなります。
• CSSが反映されない
  キャッシュが残っているか、読み込みパスが間違っているケースがよくあります。ブラウザのキャッシュ削除や、テーマ内のCSSの読み込み順とファイルパスを確認してみてください。
• 画像やリンクのパスが崩れる
  ローカルから本番に移したときに、絶対パスのままになっていると発生しやすいです。基本的にはWordPressのURL関連の関数を使ってパスを生成するようにしておくと安心です。

私も最初にWordPress自作テーマを作ったときは、真っ白画面と何度も向き合いながら少しずつ原因をつぶしていきました。トラブルはたしかにストレスですが、その分だけテーマの仕組みが体に染みていくので、「一番濃い勉強タイム」くらいに思って付き合うと気が楽になります。

自作テーマの経験を仕事につなげるコツ

どうせWordPressオリジナルテーマの作り方を覚えるなら、仕事にもつなげたいですよね。ここでは、実務に活かすための小さな工夫を紹介します。

• ポートフォリオサイトを自作テーマで作る
  「このサイトは自作テーマです」と一言添えるだけで、コーダーやエンジニアとしての印象が大きく変わります。
• テーマ制作のログを残しておく
  どんな設計にしたのか、どこでつまずいたのかをブログやノートにまとめておくと、後から案件提案の材料になります。
• 小さなサイトから受託してみる
  最初は1ページ構成のLPや、数ページのコーポレートサイトなど、規模の小さい案件からチャレンジすると、WordPress自作テーマでも無理なくこなせます。

よくある質問｜wordpress自作テーマの疑問

Q1. WordPressオリジナルテーマの作り方は独学でも大丈夫ですか？

A1. 独学でも十分に可能です。私も最初は独学でWordPress自作テーマに挑戦しましたが、HTMLとCSSの基礎があれば、ネット上の情報や公式ドキュメントを参考にしながら少しずつ形にしていけました。いきなり完璧なオリジナルテーマを作ろうとせず、「まずは1カラムのシンプルなブログ用テーマを作る」くらいのゴールから始めると挫折しにくいです。

Q2. WordPress自作テーマと既存テーマのカスタマイズ、どちらから学ぶべきですか？

A2. 迷ったら、既存テーマ＋子テーマでのカスタマイズから入るのがおすすめです。既存テーマをベースにすると、プロが書いたコードを読みながら「ここを変えるとデザインがこう変わる」という感覚をつかめます。そのうえで、慣れてきたらゼロからWordPressオリジナルテーマの作り方を試してみる、という流れがスムーズです。

Q3. ブロックテーマでWordPress自作テーマを作るべきか、クラシックテーマを先に覚えるべきですか？

A3. どちらもいずれ触るのが理想ですが、個人的にはクラシックテーマを一度作ってみるのをおすすめします。テンプレート階層やループの考え方を理解しておくと、ブロックテーマの仕組みも飲み込みやすくなるからです。そのあとで、theme.jsonやブロックパターンを使いながら、ブロックエディタ向けのWordPress自作テーマにチャレンジしていくと、無理なくステップアップできます。

まとめ｜wordpressオリジナルテーマ作り方の最初の一歩

この記事の内容をまとめます

今日から取るべき最初の一歩は、「自分が作りたいサイトのワイヤーフレームと簡単なデザイン案を用意し、静的なHTMLとCSSで1ページだけ組んでみること」です。

その1ページを土台に、この記事を見返しながら少しずつテンプレートに分解していけば、必ずWordPress自作テーマの感覚がつかめてきます。私も最初は一つひとつ手探りでしたが、一度オリジナルテーマを完成させたときの達成感はかなり大きいので、ぜひ楽しみながら取り組んでみてください。