WordPressのテーマ開発は、環境構築 → テンプレート実装 → 機能カスタマイズ → 運用・SEO の4段階で進めます。このページは、その4段階それぞれについて「どこまで到達できていれば次に進んでよいか」を画面で確認できる形に落とし込み、落ちた段階から読むべき記事を1本ずつ対応づけたハブです。
WordPressでつまずくとき、原因は「知識が足りない」ことよりも「いま自分がどの段階にいるかが分かっていない」ことにあります。まずは次の到達判定チェックで現在地を確定させ、落ちた段階に対応するセクションへ進んでください。これから初めてテーマを自作するなら、オリジナルテーマ作成ガイドを通しで読むのが最短です。
すでに公開済みのサイトを運用中で、まず現状を数値で把握したい場合は Direbase（ディレベース） にURLを入力すると、構造化データ・メタタグ・見出し構造をまとめて診断できます。
このガイドの歩き方｜4段階の現在地を判定する
4段階とは、段階1＝環境構築（WordPressが動く場所を用意する）、段階2＝テーマ開発（自分のテーマファイルが読み込まれる状態にする）、段階3＝機能カスタマイズ（管理画面で入れた値をフロントに出す）、段階4＝運用・SEO（公開して検索エンジンに正しく伝える）の4つです。前の段階が完了していないまま次に進むと、原因の切り分けができなくなります。
下表の合否ラインは、すべて画面で確認できる観測事実だけで書いています。「理解できたか」のような自己申告は入れていません。落ちた段階が見つかったら、その行の記事を1本だけ読んでこのページに戻ってきてください。判定は1往復で止まります。
到達判定チェック
| 段階 | 合否ライン（画面で確認できること） | 落ちたときに読む1本 |
|---|---|---|
| 1. 環境構築 | ローカル環境でWordPressが起動し /wp-admin にログインできる。テーマを切り替えてもフロントが白画面にならない | オリジナルテーマ作成ガイド |
| 2. テーマ開発 | style.css と index.php だけを入れた空フォルダを wp-content/themes/ に置くと「外観 > テーマ」に自作テーマとして表示され、有効化するとトップページが表示される。さらにブラウザのDevToolsのNetworkタブで自作の style.css がステータス200で読まれ、URLに ?ver= が付いている | CSSを正しく読み込む方法 |
| 3. 機能カスタマイズ | 管理画面で入力したカスタムフィールドの値が、再読み込み後のフロントに表示される。さらに値を空にすると表示も消える | カスタムフィールド徹底解説 |
| 4. 運用・SEO | 本番URLが https で表示され、投稿ごとにSEOタイトル・メタ説明を管理画面から設定でき、Search Consoleのサイトマップが「成功」ステータスになっている | 投稿にSEOタイトル・メタ欄を自作する方法 |
段階2の ?ver= は、このガイドで一番使い勝手のよい判定材料です。?ver= が付くのは wp_enqueue_style() の第4引数 $ver の既定値が false で、このときWordPressが現在のバージョン番号をクエリ文字列として自動的に付けるためです（null を明示的に渡した場合だけ付きません）。出典: wp_enqueue_style() – WordPress Developer Resources。逆に <link> タグをテンプレートに直書きしただけのCSSにはWordPressが介在しないため ?ver= が付きません。つまりURLに ?ver= が付いているかどうかだけで、テーマのCSSがWordPressの読み込み機構を通っているかを見分けられます。見た目が正しく表示されていても、直書きのままだと子テーマ化やプラグインとの依存解決ができず、段階3以降で必ず行き詰まります。
段階4は判定項目が3つあります。https で表示されない・本番に上がらないというサーバー側で落ちた場合は、案件で最初にやるサーバー設定 が対応する1本です。SEOタイトルやメタ説明の欄そのものが管理画面に無い場合は上表の記事へ進んでください。
ハマりどころ｜症状から原因が一つに決まる3件
| 症状（画面で見えること） | 原因 | 読む1本 |
|---|---|---|
wp-content/themes/ にフォルダを置いたのに「外観 > テーマ」に出てこない | style.css 冒頭のコメントヘッダに Theme Name: が無い。WordPressはこのヘッダを読んでテーマ一覧を組み立てるため、ヘッダが無いフォルダはテーマとして認識されない | オリジナルテーマ作成ガイド |
CSSを書き換えても表示が変わらず、Networkタブで style.css のURLに ?ver= が付いていない | <link> タグを直書きしていて wp_enqueue_style() を経由していない | CSSを正しく読み込む方法 |
| カスタムフィールドの値を空にしても、フロントの文字が消えない | テンプレート側に文字列が直書きされていて、フィールドの値を出力していない | カスタムフィールド徹底解説 |
1件目の根拠は公式ドキュメントに明記されています。WordPressは style.css のヘッダコメント部分を読み取って、管理画面の「外観（テーマ）」に情報を表示します（出典: Main Stylesheet (style.css) – WordPress Developer Resources）。ファイル名や置き場所が正しくても、ヘッダが無ければ一覧には出ません。原因が分かったらそこで手を止め、詳細は対応する1本で確認してください。
テーマ開発の基礎
段階1〜2に対応するセクションです。テンプレートの構造、CSS・JavaScriptの読み込み、パス指定という「自作テーマがWordPressに認識される条件」をここで押さえます。段階2の判定に落ちた人は、まずこの中の読み込み系2本を先に読んでください。
- オリジナルテーマ作成ガイド — 環境構築からテンプレートファイル実装まで、一連の流れを通しで解説
- 既存テーマ vs オリジナルテーマ — 案件でどちらを選ぶかの判断基準をメリット・デメリットで比較
- CSSを正しく読み込む方法 — linkタグ直書きと wp_enqueue_style の違い、
?ver=が付く仕組み - JavaScriptを正しく読み込む方法 — wp_enqueue_script の使い方と読み込み位置・条件分岐
- パス指定の徹底解説 — 相対パスと絶対パスの違い、テーマ関数の使い分け
- functions.php便利コード集 — テーマカスタマイズで使える実践的なコードスニペット
- WordPress関数一覧 — テーマ・プラグイン開発向けの使用例付きリファレンス
テンプレートファイルの実装
テーマが認識されたあと、実際にページを組み立てる各ファイルを1本ずつ深掘りするセクションです。土台になるのはWordPressループの仕組みで、single.php も archive.php もこのループの上に乗っています。順番に迷ったらループ → header/footer → single → archive → カスタム投稿タイプの順が安全です。
なおカスタム投稿タイプを登録したのに一覧ページのURLが404になる場合、原因の筆頭は register_post_type() の has_archive が既定値の false のままであることです（出典: register_post_type() – WordPress Developer Resources）。
- WordPressループの仕組み — have_posts と the_post の役割。全テンプレートの共通土台
- header.php と footer.php の作り方 — 共通パーツの切り出しと読み込み方法
- single.php の使い方 — 個別投稿ページのテンプレート作成とカスタマイズ
- archive.php の使い方 — 一覧ページのカスタマイズと functions.php との連携
- カスタム投稿タイプの作り方 — register_post_type の設定項目と実装手順
問い合わせフォーム（Contact Form 7）
問い合わせフォームの定番プラグインです。設置手順・タグ一覧・固定ページへの埋め込み・自動返信が迷惑メールに入るときの対策は、すべてContact Form 7 完全ガイドの1本にまとまっています。以前は項目ごとに記事を分けていましたが、設定が相互に依存していて行き来が発生するため統合しました。情報が減ったわけではないので、CF7に関することはまずこの1本を開いてください。
- Contact Form 7 完全ガイド — 設置・タグ一覧・固定ページ設置・自動返信・迷惑メール対策までを1本で解説
- reCAPTCHA導入手順 — CF7と自作PHPフォームの両方に効くスパム防止設定
カスタマイズ・拡張
段階3に対応するセクションです。カスタムフィールドで「管理画面から入れた値をフロントに出す」流れを作れると、案件で求められるページの大半は組めるようになります。段階3の判定（値を空にすると表示も消える）に落ちた場合はここから読んでください。
- カスタムフィールド徹底解説 — 値の登録から出力まで、もう一歩進んだ情報追加術
- ACFで管理画面をカスタマイズ — 投稿一覧にカスタムフィールドの列を表示する方法
- 画像圧縮ツールおすすめ5選 — 表示速度改善に効く画像最適化の選び方
サーバー・環境構築
段階1と段階4の土台になるセクションです。AWS関連は2本ありますが役割が違います。AWSとは？からのWordPress導入手順 はAWSそのものが初めての人向けで、無料枠でひとまず動かすところまでを扱います。AWS LightsailでWordPressを構築する手順 はLightsailに絞った構築手順書で、静的IP・DNS・Let’s EncryptでのSSL・料金プランまで本番公開を通す内容です。どちらかに寄せる必要はなく、前者で概念をつかんで後者で本番を組む使い方ができます。
- 案件で最初にやるサーバー設定 — 契約・ドメイン・SSL・インストール・セキュリティを順番に解説
- ConoHa WINGでWordPressをインストールする手順 — かんたんセットアップの入力項目と注意点を画面つきで解説
- エックスサーバーでWordPressをインストールする手順 — クイックスタートの流れと無料お試しが付かない注意点
- ポートフォリオ公開用レンタルサーバーの選び方 — 作品サイトを公開するためのサーバー選びとドメイン取得
- AWSとは？からのWordPress導入手順 — AWSが初めての人向け。用語の整理と無料枠での起動まで
- AWS LightsailでWordPressを構築する手順 — 静的IP・DNS・SSL・料金プランまで含めた本番向けの構築手順
- データベース接続エラーの対処法 — 破損が原因の場合の修復ガイド
- HTML・WordPress・メールのサーバー構成まとめ — Aレコード・MXレコードから経路を読み、メールが届かないときに切り分ける手順
計測・アクセス解析（GA4・GTM）
公開したあと、施策の良し悪しを判断するための計測です。WordPressでは「GA4のタグを直接テーマに書く」か「GTM経由でまとめる」かの二択になります。まずGA4直接埋め込みとGTM経由の比較で自分のサイトがどちらの型かを決めてから、移行手順や設置位置の記事に進むと手戻りがありません。
- GA4直接埋め込み vs GTM経由 — メリット・デメリット比較と、どちらを選ぶかの判断基準
- GA4をGTM経由に移行する方法 — 既存の直接埋め込みからの移し替え手順と二重計測の防ぎ方
- GTMタグをhead上部に設置するべき理由 — 設置位置による計測漏れとパフォーマンスへの影響
SEO・運用
段階4に対応するセクションです。WordPressのSEOは、AIOSEOやYoastのようなプラグインを入れるか、テーマ側に自前でメタ欄を実装するかの選択から始まります。判断材料はSEOを自作するメリット・デメリットにまとめてあります。自作を選んだ場合は、投稿用とカテゴリ・タグ用でメタの保存先が異なるため、実装記事も2本に分かれています。
SEO診断まわりも役割が違う2本があります。WordPressプラグインでSEO診断する方法 は管理画面から診断を回す手順そのものの解説で、ORECTIC SEO CHECK 公開のお知らせ は自作プラグインの機能一覧と導入方法を伝えるリリース記事です。「やり方を知りたい」なら前者、「何が入っているツールか知りたい」なら後者を開いてください。
- SEOを自作するメリット・デメリット — AIOSEO・Yoastを使わない選択肢と、その判断基準
- 投稿にSEOタイトル・メタ欄を自作する方法 — カスタムフィールドでの実装手順
- カテゴリ・タグにSEOタイトル/メタを追加する方法 — termmetaを使った実装
- プラグインでSEO診断する方法 — 管理画面からワンクリックで診断を完結させる手順
- ORECTIC SEO CHECK 公開のお知らせ — 自作プラグインの機能一覧と導入方法
- FAQスキーマの競合を解決する方法 — 自作FAQとプラグインの二重出力を防ぐ
関連ガイド
WordPressのテーマ開発は、結局のところHTML・CSS・JavaScriptを書く作業です。テンプレートの分岐で詰まっているのか、CSSの書き方で詰まっているのかを切り分けたいときは、以下の各ガイドへ移動してください。
- SEO対策ガイド — 基礎からAI検索時代の手法・診断ツールまで
- CSS実装テクニック集 — 基礎からアニメーションまでを体系化
- JavaScript学習ガイド — 練習問題から実践アプリ開発まで
- HTMLタグ一覧 — カテゴリ別・使用例付きリファレンス
- WordPressとClaude Codeを連携する方法 — 公式MCP Adapter・wp-cli・REST APIの3経路でAIエージェント運用
段階4の判定でSEO側の状態を確認したいときは、Direbase（ディレベース） にURLを入力すると構造化データ・メタタグ・見出し構造を一括で診断できます。
テンプレートを書き換えた前後でどこが変わったかを確かめたいときは、Diff Checker（コード比較ツール） にコードを貼り付けると差分を色分けで確認できます。
よくある質問
Q. このガイドはどの順番で読めばよいですか？
上から通読する必要はありません。まず到達判定チェックで最初に落ちた段階を特定し、その行に対応する1本だけを読んでください。読み終えたらこのページに戻り、同じ判定をもう一度行うのが最短です。
Q. 既存テーマとオリジナルテーマは、どちらを選ぶべきですか？
納品後も自分でPHPを触り続ける前提ならオリジナル、更新をクライアント側に任せるなら既存テーマが無難です。判断材料は「既存テーマ vs オリジナルテーマ」に整理してあります。
Q. ローカル環境は必須ですか？
実質必須です。段階2以降はテンプレートファイルを直接書き換えるため、本番だけで作業するとPHPのエラーが出た瞬間に公開中のサイトが止まります。ローカルで動作を確認してから本番へ反映する流れを最初に作ってください。
Q. SEOはプラグインとテーマ自作の、どちらで対応すべきですか？
運用するサイトが1つで、更新を他の人に任せる可能性があるならプラグインが無難です。出力するタグを自分で完全に決めたい場合や、複数サイトで同じ仕様を使い回したい場合はテーマ側の自作が有利になります。
Q. 問い合わせフォームはContact Form 7以外に選択肢はありますか？
あります。ブロックエディタ中心の運用ならSnow Monkey Forms、管理画面のUIで細かく組みたいならWPFormsなどが候補です。ただし本ガイドで扱う実装例はContact Form 7を前提にしているため、記事の手順をそのまま流用したい場合はCF7を選んでください。
Q. テンプレートファイルの各記事と、テーマ作成ガイドは内容が重複していませんか？
役割が違います。テーマ作成ガイドは環境構築から公開までの流れを一度通す記事で、テンプレートファイルの各記事は archive.php や single.php といった1ファイルの書き方を単体で深掘りする記事です。全体像を通したあとで、詰まったファイルの記事だけを開く使い方を想定しています。