ねぇねぇ、佐藤さん！ WordPressのコピーをCodexで開けるところまではできました。でも「トップページを作って」と頼むだけでは、どこをどう変えられるのか不安です。
その不安は自然だよ。最初は作らせる前に、いま表示されているトップページが何でできているか調べてもらおう。
おしゃれなページにはしたいのですが、色や配置を先に全部決めないと進めませんか？ お店の特徴も、まだうまく一文にできません。
全部は決めなくていいよ。今回は架空のピアノ教室を例に、誰向けか、何を伝えるか、次に押してほしいボタンを決めて、最初の一画面を作ろう。
Codexで最初のWordPressトップページを作る時は、「作って」と丸投げせず、現在の仕組みを調査し、完成像を一枚に絞り、変更候補を確認してから実装します。
この記事では、地域のピアノ教室サイトを例に、トップページの入口部分を作ります。読者、見出し、説明、ボタンを決め、Codexへ依頼し、PCとスマートフォンで合格を判断するところまで進めます。本番へのアップロードはまだ行いません。
作業用コピーがない場合は、先に サーバー上のWordPressをCodexで扱う準備 を済ませてください。ただし、前の記事で用意したのは主にファイル調査用のコピーです。そのままブラウザでWordPressを表示できるとは限りません。
今回作るトップページの完成像
最初から長いホームページを完成させません。まず、訪問者が数秒で「自分向けか」「何ができるか」「次にどこを押すか」を判断できる入口を一つ作ります。
東京都○○市・小学生から通える
音を楽しむ気持ちから育てる
ひだまりピアノ教室
一人ひとりのペースに合わせた個人レッスン。初めて鍵盤に触れるお子さまも、体験レッスンから始められます。
体験レッスンの流れを見るこの見本をそのまま使う必要はありません。大事なのは、店名を大きくすることではなく、対象地域、対象者、提供内容、次の行動が同じ画面で分かることです。
表示できる環境があるか最初に分岐する
この記事を最後まで進めるには、DBを含めて表示できるローカルWordPress環境、または本番と分離した検証環境のどちらかが必要です。 テーマファイルだけの作業コピーでは、固定ページ本文、メニュー、サイトエディターの変更などを再現できない場合があります。
| 現在の状態 | この記事で進める範囲 | 本番への扱い |
|---|---|---|
| DBを含むローカルWordPressが表示できる | 調査、実装、PC・スマホ確認まで | 接続・アップロードしない |
| 本番と分離した検証環境がある | 検証環境で調査、実装、表示確認 | 本番URLと取り違えない |
| テーマ等のファイルコピーだけ | 変更元調査、文章・構成案、変更予定まで | 実装前で止める |
| 本番環境しかない | 読み取り調査と設計だけ | 確認目的の直接上書きをしない |
表示環境がない場合でも、記事が無駄になるわけではありません。現在の仕組みを調べ、入口の文章と変更予定を作るところまで進めます。画面確認のために本番へ直接アップロードせず、 WordPress StudioでDB込みのローカル環境を作る手順 へ進んでください。
先に現在のトップページの仕組みを調べる
WordPressのトップページは、テーマによって変更元が異なります。先に方式を判定しないと、編集しても表示されないファイルを触ったり、サイト全体の共通部分まで変えたりします。
| 見つかった状態 | 主な変更場所 | 最初の方針 |
|---|---|---|
| 「設定→表示設定」で固定ページを指定 | 固定ページ本文・割り当てテンプレート | 固定ページ側から小さく変更 |
| 「外観→エディター」があるブロックテーマ | フロントページテンプレート、固定ページ、スタイル | テンプレートと本文を分けて調査 |
| クラシックテーマの独自トップ | front-page.php、home.php、テーマ設定等 | 子テーマや既存設定を優先 |
| ページビルダーを使用 | ビルダー保存データ、専用テンプレート | 通常のPHP編集だけで直そうとしない |
WordPress公式では、固定ページをホームページに設定する場合は「設定→表示設定」の「ホームページの表示」で固定ページを選びます。一方、ブロックテーマにFront Pageテンプレートがある場合、そのテンプレートが表示設定より優先されることがあります。
このWordPress作業用コピーを読み、現在のトップページがどの仕組みで表示されているか調査してください。
公開URL：【https://example.com/】
管理画面で分かること：【例 設定→表示設定は固定ページ「ホーム」】
まだファイルを変更しないでください。
使用中テーマと子テーマの有無、front-page.php・home.php・index.php、ブロックテーマ、ページビルダーの痕跡を確認してください。
トップページの本文、ヘッダー、見た目を変える候補を分け、根拠となるファイル名または管理画面の設定を報告してください。
候補を一つに絞れない場合は推測せず停止してください。
トップページならfront-page.phpだけを探せばよいと思っていました。固定ページやブロック側に中身があることもあるんですね。
そうなんだ。ファイル名だけで決めず、表示設定、テーマの種類、テンプレートの優先順をつなげて見ると、変更元が分かるよ。
Codexから候補が三つ出たら、いちばん新しいファイルを選んでよいですか？
更新日時だけでは決めないよ。実際の画面にある見出しやCSSのクラスを検索し、どの候補が現在の表示を作っているか証拠を出してもらおう。
表示中の文字を手掛かりに変更元を絞る
現在のトップページに固有の見出しがあるなら、その文字列を作業用コピー内で検索します。見つからない場合、本文がデータベース側にあり、ファイルにはテンプレートだけがある可能性があります。
- 公開トップページから固有の見出しを一つ控える。
- 作業用コピー内で完全一致検索する。
- 見つかったファイルと周辺のHTML構造を読む。
- 見つからなければ固定ページ・ブロック・ページビルダーを確認する。
- 読み込まれるCSSと画像の場所を特定する。
- 共通ヘッダーや全ページCSSへの影響を分ける。
検索で0件だった時は失敗ではありません。「本文はDB側」「ビルダーの保存データ」「翻訳文字列」「JavaScriptで生成」など、次に調べる方向を絞れます。
固定ページ本文、サイトエディターで変更したテンプレート、ページビルダーの内容は、データベース側に保存されることがあります。特にブロックテーマでは、サイトエディターで保存したテンプレートがテーマ内の元ファイルより優先される場合があります。ファイルだけで現在表示を再現できない時は、推測してテーマファイルを直さず、DBを含むローカル環境または検証環境で表示元を確認してください。
誰向けのページかを一文で決める
デザインより先に、読者と次の行動を決めます。今回の例は「東京都○○市で、初めて子どもをピアノ教室へ通わせたい保護者」が「体験レッスンの流れを読む」ページです。
| 決める項目 | 今回の入力例 | 避けたい曖昧さ |
|---|---|---|
| 主な読者 | ○○市の小学生の保護者 | すべての人 |
| 提供内容 | 子ども向け個人ピアノレッスン | 音楽を通じた豊かな体験 |
| 安心材料 | 初心者対応・個人のペース | 安心・高品質だけ |
| 次の行動 | 体験レッスンの流れを見る | 詳しくはこちら |
トップページの入口を一緒に設計してください。
サイト：【地域のピアノ教室】
主な読者：【○○市で、小学生の子どもが初めて通う教室を探す保護者】
伝えること：【個人レッスン／初心者対応／一人ひとりのペース】
次の行動：【体験レッスンの流れを読む】
避けたい印象：【派手すぎる、幼すぎる、料金が見えない】
まず見出し、説明文、ボタン文言を三案ずつ出し、違いを短く説明してください。
まだ実装しないでください。断定できない実績、人数、料金、受賞歴は作らないでください。
見出しが三案出ましたが、どれもきれいに見えて決められません。いちばん短い案ならスマホでも安全ですか？
短さだけでなく、地域、対象、教室の特徴が伝わるかで選ぼう。スマホの折り返しは実画面で直せるから、必要な意味まで削らなくていいよ。
少し強そうに見せるために「地域で選ばれる教室」と入れても大丈夫ですか？ 数字の資料はまだありません。
根拠がないなら使わないよ。「初心者から通える」「個人のペースに合わせる」のように、実際に提供できる事実で安心を作ろう。
最初は四つの部品だけを変更する
一回目の実装では、ヒーローエリアと呼ばれる入口部分だけに絞ります。ヘッダー、フッター、メニュー、全ページの色、問い合わせフォームは同時に変えません。
- 小さな補足：地域と対象者
- 大見出し：教室名と得られる体験
- 説明：レッスンの特徴
- ボタン：次に読めるページまたは同一ページ内の説明
今回使うボタンのリンク先は、調査時に現在のサイト内に存在するページまたは同一ページ内の見出しから選びます。「体験レッスンの流れ」がまだなければ、存在しないURLやアンカーを作らず、既存の安全な移動先へ置き換えます。適切なリンク先が一つもなければ、ボタン文言と見た目だけを決め、リンク実装は次の工程へ回します。
Codexへ変更範囲と完成条件を渡す
調査で変更元がDB側と分かった場合は、無理にテーマファイルへ置き換えません。「DBを直接書き換えること」と、「WordPress管理画面から固定ページ等を編集した結果としてDBへ保存されること」を分け、通常のWordPress編集経路を使います。
調査結果をもとに、トップページの入口部分だけを作成してください。
対象：【調査で特定した固定ページ、テンプレート、子テーマファイル】
変更する部品：地域・対象者、大見出し、説明文、ボタン一つ。
変更しないもの：ヘッダー、フッター、既存メニュー、他ページ、WordPress本体、親テーマ、プラグイン、本番サーバー。
DBは直接編集しないでください。固定ページ本文やサイトエディター保存テンプレートが変更元の場合は、ローカルWordPressまたは検証環境の管理画面など、通常のWordPress操作経由で対象だけを変更してください。
PCは文章とボタンが読みやすい幅、スマートフォン390pxでは一列で表示してください。
画像が未用意なら勝手な人物写真を追加せず、文字と背景色だけで完成させてください。
ボタンは調査で存在を確認した「体験レッスンの流れ」へつないでください。リンク先がなければ、存在しないURLを作らず、ボタン文言と見た目だけを実装してリンクは未設定として報告してください。
変更前に対象ファイルと変更内容を示し、実装後は変更ファイル、確認方法、戻し方を報告してください。
以前の記事で決めた 変更範囲・禁止事項・直前確認の伝え方 を、この実装へ具体的に当てはめています。
トップページ作成なのに、今回は四つの部品だけなんですね。もっと一気に完成させるものだと思っていました。
最初の一周は小さい方がいいよ。変更場所と確認方法が分かれば、教室紹介や料金の節を後から足しやすい。
調査で親テーマのfront-page.phpが見つかりました。そこを直接直す案が出たら、進めてもよいですか？
いったん止めよう。親テーマの更新で消えることがあるから、子テーマ、固定ページ、テーマが用意した編集方法で実現できないか先に比べよう。
実装前に必ず見る変更予定
Codexの報告に、次の四点が揃っているか確認します。ここが曖昧ならファイル変更へ進みません。
| 確認点 | 合格例 | 止める例 |
|---|---|---|
| 変更元 | 子テーマのfront-page.phpと専用CSS | たぶんこのテーマ |
| 影響範囲 | トップページのheroクラス内だけ | style.css全体を整理 |
| 完成状態 | 指定文言とボタンがPC・390pxで見える | いい感じにする |
| 戻し方 | 変更前ファイルまたは差分で復元 | 問題があれば考える |
既存ファイルにユーザー自身の未保存変更や別作業の差分があれば、それを消さずに止めてもらいます。Codexへ任せた作業と、すでにあった変更を混ぜません。
変更後はファイルではなく画面で判定する
コードにエラーがないだけでは合格ではありません。実際のトップページを開き、入口からボタンまでを目で確認します。
- 変更前と変更後のファイル差分を読む。
- PC幅1280px前後でトップページを開く。
- スマートフォン幅390pxで同じ場所を見る。
- 見出しの改行、説明文、ボタンの文字を読む。
- ボタンを押し、予定した場所へ移動するか確認する。
- ページ全体に横スクロールがないか確認する。
- ヘッダー、メニュー、既存ページが変わっていないか比べる。
表示確認の詳しい頼み方は PC・スマホでWordPressの表示崩れを確認する方法 で解説しています。
変更したトップページを読者として確認してください。
確認幅：1280px、768px、390px。
見るもの：補足、大見出し、説明文、ボタン、リンク先、文字の重なり、横スクロール、画像切れ。
変更対象外のヘッダー、フッター、メニュー、他ページも比較してください。
DOM要素数やHTTP 200だけで合格にせず、各幅で先頭からボタンまで実際に表示して読んでください。
不合格があれば、症状、幅、原因候補、最小修正案を先に報告してください。
許可なく本番へアップロード・公開しないでください。
390pxで見ると、教室名が三行になりました。横にはみ出していませんが、これなら合格にしてよいですか？
はみ出さなくても、途中で意味が切れて読みにくければ直そう。文字を極端に小さくせず、見出し幅、字間、文の区切りを調整するよ。
ボタンは押せましたが、移動先の見出しが固定ヘッダーに隠れました。リンク自体は動くので大丈夫ですか？
読者が着いた先を読めないから未完成だね。スクロール位置の余白を調整して、見出しが見える状態を合格にしよう。
よくある不合格と戻し方
| 症状 | 最初に疑うこと | 安全な戻し方 |
|---|---|---|
| 変更が表示されない | 別テンプレート、キャッシュ、DB側本文 | 追加変更せず表示経路を再調査 |
| 他ページまで色が変わった | 共通セレクタやグローバルスタイル | 差分を戻し、トップページ専用範囲へ限定 |
| スマホで横にはみ出す | 固定幅、長い文字、画像や余白 | 問題要素だけを特定して最小修正 |
| 画面が真っ白・エラー | PHP構文、読み込み、関数の重複 | 変更前ファイルへ戻し、エラー記録を確認 |
| 管理画面の変更が消えた | テンプレートファイルとの優先関係 | どちらを正しい変更元にするか再設計 |
エラーが出た時に、別のファイルへ同じ変更を重ねないでください。まず今回の差分を戻し、元の表示が復旧することを確かめてから原因を調べます。
ここまでできれば最初の一周は完了
- 現在のトップページの表示経路を説明できる。
- 読者、提供内容、次の行動が一文で決まっている。
- 変更ファイルと影響範囲が特定できている。
- 入口部分の四つの部品が表示されている。
- PC・タブレット・スマホで読める。
- ボタンの到着先まで確認できる。
- 変更対象外と本番環境は変えていない。
- 不合格なら変更前へ戻せる。
この時点では「サイト全体が完成」ではありません。しかし、Codexへ安全に調査を頼み、狙った場所だけを変え、画面で合否を決める基本の一周を経験できています。
公開環境がまだない人へ
すでにサーバーやローカル環境がある人は、下の商品を契約する必要はありません。これからWordPressを設置して実際のURLで練習する人だけ、環境の候補として確認してください。
エックスサーバー
向いている人： これからWordPressの練習用・公開用サーバーを用意し、トップページを実際のURLで確認したい人。
不要な人： すでにWordPressが動くサーバーやローカル検証環境がある人は、新しく契約する必要はありません。
注意点： Codexとは別のサービスです。料金、利用条件、バックアップ範囲は申込当日の公式情報を確認してください。
WordPressを試せる環境を確認する広告・PRを含みます。
よくある質問
「トップページを作って」だけではだめですか？
変更元、読者、完成状態が曖昧なまま広範囲を変更する可能性があります。最初は調査と実装を分け、対象を確認してください。
前の記事の作業フォルダだけで画面確認できますか？
テーマ等のファイルコピーだけでは表示できない場合があります。DBを含むローカルWordPressまたは本番と分離した検証環境が必要です。どちらもなければ実装前で止めます。
固定ページとfront-page.phpのどちらを直しますか？
テーマと表示設定によります。ブロックテーマではFront Pageテンプレートが優先される場合もあるため、現在の表示経路を先に調査します。
親テーマを直接編集してよいですか？
更新で変更が失われる可能性があります。子テーマ、固定ページ、サイトエディター、テーマ公式の方法を先に検討してください。
画像がないとトップページは作れませんか？
作れます。最初は事実に基づく文章、余白、色、ボタンで入口を作り、権利と用途を確認できた画像を後から追加できます。
Codexに文章も考えてもらえますか？
候補作成はできますが、教室の実績、料金、対象年齢などの事実は本人が確認します。根拠のない数字や評判は作らせません。
390pxで改行が増えても横スクロールがなければ合格ですか？
自動合格ではありません。文字が極端に小さくないか、意味の切れ方、ボタンの押しやすさまで実画面で読みます。
変更が表示されない時は別ファイルも直しますか？
先に表示経路とキャッシュを再確認します。根拠なく複数ファイルへ同じ変更を重ねると、原因と戻し方が分からなくなります。
完成したらすぐ本番へアップロードしますか？
この記事の範囲では行いません。検証環境での合格、公開前チェック、バックアップ、反映手順を確認してから進めます。
最初は「全部作る」と考えて固まっていました。でも、表示の仕組みを調べて、入口だけ作り、スマホで読むところまでなら進められそうです。
いい進み方だよ。どこを変えたか分かり、戻せて、読者の画面で確かめられる。それが次の節を安心して足せる土台になる。
見た目が整うと、すぐサーバーへ戻したくなりそうです。まだ少し急いでしまう気がします。
その時は「ローカルで合格」と「本番公開済み」を分けて書こう。次は教室紹介や料金への導線を足し、サイト全体の設計へ広げていこう。
次はトップページをサイト全体の入口へ育てる
今回できたのは、調査、設計、小さな変更、表示確認の一周です。次は「教室紹介」「レッスン内容」「料金」「体験の流れ」など、必要なページとトップページからの導線を決めます。
公開前には、まず CodexでWordPressの変更差分を確認する方法 でファイルとDB側の変更を整理し、続けて WordPress公開前の最終チェック を使ってください。ローカルでの完成と本番反映を混同しないことが大切です。