.webp)
前の記事でWordPressのファイルをPCへコピーしました。でもURLを開いても、ホームページとして表示されません。コピーに失敗したのでしょうか？
失敗とは限らないよ。WordPressはテーマのファイルだけでなく、ページ本文や設定を持つデータベースと、PHPを動かす環境がそろって初めて表示できるんだ。
では、変更するたびに本番サーバーへ戻して確認するしかありませんか？
その前に、自分のPC内だけで動く練習用WordPressを作ろう。今回はWordPress Studioを使い、ブラウザで表示できるところまで一緒に進めるよ。
WordPressのファイルをCodexで読めても、そのフォルダだけでサイトが表示できるとは限りません。 この記事では無料のデスクトップアプリ「WordPress Studio」を使い、PC内にWordPressが動くローカル環境を作ります。
新しい練習サイトを作る方法と、手元のバックアップを読み込む方法を分けます。最後に、トップページと管理画面が開くこと、外部へ送信しない状態であること、Codexへ渡すフォルダが正しいことまで確認します。
ローカル環境は「自分のPC内にある練習場」
公開サイトはインターネット上にあり、訪問者が見ています。ローカル環境は基本的に自分のPC内だけで動く別のWordPressです。見た目が似ていても、同じサイトではありません。
| 場所 | 誰が見られるか | 主な用途 | 注意 |
|---|---|---|---|
| 本番サイト | インターネット上の訪問者 | 実際の公開 | 練習変更を直接入れない |
| ローカル環境 | 原則、そのPCを使う本人 | 調査、練習、表示確認 | 本番へ自動反映されない |
| ステージング | 制限された関係者 | 本番に近い最終検証 | 検索公開・パスワードを確認 |
| 作業用ファイルコピー | フォルダを持つ本人 | コード調査と編集 | DBや実行環境がなく表示できない場合がある |
ローカル環境を作っただけで公開サイトが変わることはありません。逆に、ローカルで完成しても本番は変わりません。「ローカルで合格」と「本番へ反映済み」を作業メモで分けてください。
始める前に新規作成かバックアップ読込かを決める
初めての人には、個人情報を含まない空の練習サイトをおすすめします。本番と同じ状態が必要な時だけ、バックアップの中身と保管場所を確認して読み込みます。
| 目的 | 選ぶ方法 | 持ち込むもの | 向いている人 |
|---|---|---|---|
| 操作を最初から練習 | 新しいサイトを作る | 何も不要 | 完全初心者 |
| テーマを試す | 新規作成後にテーマだけ追加 | テーマのコピー | 見た目を試したい人 |
| 既存サイトを再現 | バックアップをインポート | ファイルとDBを含むバックアップ | 復旧手順と情報管理が分かる人 |
| 本番固有の機能を最終確認 | 分離したステージング | ホスト側の複製機能等 | 決済・メール・特殊構成がある人 |
顧客名、問い合わせ、注文、会員、アクセスキーなどを含む本番DBは、練習目的で安易にコピーしません。 必要なら先にデータを匿名化し、バックアップ自体もCodexへ渡す作業フォルダの外へ保管します。
DBにはページの文章だけが入っていると思っていました。問い合わせや利用者の情報まで入ることがあるんですね。
プラグインによって保存内容は違うよ。だから最初の練習は新規サイトが安心。本番の再現が本当に必要な時だけ、何が入っているか確認しよう。
空のサイトだと、本番と同じトップページを直す練習にならないのでは？
まずWordPressが動く仕組みを体験しよう。その後、必要なテーマと架空の文章だけを入れれば、個人情報を持ち込まずに十分練習できるよ。
WordPress Studioをインストールする
WordPress StudioはWordPress.comの開発者向けツールで、Windows、macOS、Linuxに対応しています。この記事ではWindows版の画面を想定します。入手先は公式の WordPress Studioページ です。
- 公式ページから自分のOS用インストーラーを入手する。
- 表示された提供元とファイル名を確認してインストールする。
- Studioを起動する。
- 通知や通信許可が出たら、内容がStudioに関するものか読む。
ローカルサイトを作るだけなら、WordPress.comアカウントへのログインは必須ではありません。プレビュー公開や対応ホスティングとの同期など、オンライン機能を使う時に必要になります。
WordPress Studioの導入を手伝ってください。
OS：【Windows 11】
目的：【PC内だけで新しい練習用WordPressを表示する】
公式ページ以外からダウンロードさせないでください。
本番サイトへの接続、同期、アップロード、バックアップの読込はまだ行いません。
私が画面で確認する項目を、一画面ずつ短く案内してください。
空の練習サイトを一つ作る
Studioの「Add site」から「Build a new site」を選びます。サイト名は本番と区別できるものにします。たとえば「piano-practice-local」です。「本番」「公式」だけでは後で取り違えやすいため避けます。
- 「Add site」を押す。
- 「Build a new site」を選ぶ。
- 今回は余計な構成を足さない「Empty site」を選ぶ。
- 本番と区別できるサイト名を入力する。
- 必要ならAdvanced settingsで保存先を確認する。
- 「Add site」を押し、作成が終わるまで待つ。
- 通常は作成後に自動起動するため、緑色のRunning表示を確認する。停止中ならStartする。
- 「Open site」でトップページを開く。
- 「WP Admin」で管理画面を開く。
Studioの標準設定では、
http://localhost:8881
のようなローカルURLが使われます。Advanced settingsでカスタムドメインを有効にした場合は、
example.local
のような「.local」ドメインを設定でき、必要ならHTTPSも有効にできます。どちらの場合も本番URLとは別物です。
最初の表示確認は四つだけでよい
| 確認場所 | 合格 | 不合格時の行動 |
|---|---|---|
| Studio | 対象サイトがRunning | Stop/Startを一度確認 |
| Open site | WordPressのトップが開く | URLと稼働状態を確認 |
| WP Admin | 管理画面へ入れる | 別サイトのログイン画面でないか確認 |
| URL | ローカル用ドメイン | 本番URLなら操作を止める |
この時点でテーマやプラグインを大量に追加しません。まず何も変更していない状態を一度表示し、スクリーンショットか作業メモを残します。後で不具合が出た時の比較元になります。
トップページと管理画面が開きました。URLもlocalhostなので、本番サイトではないと確認できました。これでもう本番を壊す心配はありませんか？
本番とは別にできたね。ただしフォーム、メール、決済、外部APIを設定すると、ローカルから外部へ通信する可能性はあるよ。
問い合わせフォームも本番と同じ設定にすれば、動作確認しやすそうですが……。
本物の宛先やキーは持ち込まないでおこう。最初は送信機能を無効にするか、テスト専用設定を用意してから確認するんだ。
外部へ送らないための安全確認
- 本番のメールアドレス、SMTPパスワード、APIキーを入れない。
- 問い合わせフォームは実送信せず、表示だけ確認する。
- 決済、予約、会員、Webhook、SNS自動投稿を接続しない。
- 検索エンジンへ公開する目的でローカルURLを共有しない。
- プレビュー機能を使う場合は「PC内だけ」ではなくなると理解する。
このローカルWordPressを調査し、外部送信につながる設定候補を報告してください。
対象：【いま作成したStudioサイトのフォルダ】
まだファイルやDBを変更しないでください。
メール、問い合わせ、決済、予約、Webhook、外部API、解析、SNS投稿に関係するプラグイン名と設定ファイル候補だけを示してください。
秘密値は表示、転載、保存、外部送信しないでください。
実際の送信テスト、ログイン、同期、ネットワーク接続は行わないでください。
必要なテーマだけを練習サイトへ入れる
既存サイトの見た目を少し再現したいなら、まずテーマだけを追加します。Studioのサイトフォルダ内にある「wp-content/themes」を確認し、コピー元とコピー先を取り違えないようにします。
- 本番から取得したテーマが完全なバックアップの一部か確認する。
- 親テーマと子テーマの関係を確認する。
- Studioサイト側のwp-content/themesへ必要なテーマだけコピーする。
- 管理画面の「外観→テーマ」で名称を確認する。
- 有効化前の画面を記録する。
- 有効化後にトップと管理画面を再読込する。
テーマが要求するプラグインを一度に全部入れず、エラーに必要なものから確認します。固定ページ本文やサイトエディターで保存したテンプレートはDB側にあるため、テーマだけでは本番と同じにならない場合があります。
このStudioサイトへテーマを追加する前に、コピー元とコピー先を確認してください。
コピー元：【本番から取得した作業用コピーのテーマフォルダ】
コピー先：【Studioサイトのwp-content/themes】
親テーマ、子テーマ、必要PHPバージョン、必須プラグインの記載を読み、追加予定ファイルを一覧にしてください。
まだコピー、有効化、削除は行わないでください。
本番サーバー、バックアップ原本、wp-config.php、秘密情報は変更対象外です。
バックアップを読み込む場合は別作業として扱う
Studioにはバックアップをインポートしてサイトを作る入口があります。ただし、どのバックアップ形式でも必ず再現できるわけではありません。プラグイン固有形式、容量、PHP要件、特殊なサーバー設定によっては、元のツールで復元するかステージングを使う必要があります。
| 読込前の確認 | 理由 | 止める条件 |
|---|---|---|
| ファイルとDBを含むか | 片方だけでは再現できない | 中身が不明 |
| 個人情報を除いたか | PCへの不要な持ち出しを防ぐ | 顧客・注文・問い合わせを含む |
| バックアップ原本を別保管したか | 再試行で上書きしない | 手元に一個しかない |
| 外部接続設定を止めたか | 誤送信を防ぐ | 本番キーの有無が不明 |
| 復元後のURLを確認したか | 本番との取り違え防止 | 本番URLへ向いている |
StudioはローカルDBにSQLiteを使います。一般的な本番環境のMySQL/MariaDBとは仕組みが異なるため、DB固有機能を使うプラグインや処理は完全に同じとは限りません。そこが重要なサイトは、ホスティング会社が用意する分離済みステージングで最終確認します。
StudioにSyncという機能があるなら、エックスサーバーの本番サイトともワンクリックで往復できますか？
そうとは限らないよ。公式のSyncはWordPress.comやPressableとの連携機能だよ。一般のレンタルサーバーへ同じ操作で同期できるとは考えない方がいい。
では、ローカルで直した後の公開は別の手順になるんですね。
その通り。今回は表示できる安全な練習場を完成させるところまで。公開はバックアップと差分を確認して、サーバーに合う方法を別に選ぼう。
CodexにはStudioサイトのフォルダだけを開く
トップページと管理画面が開いたら、Studioでサイトの保存場所を確認します。Codexで開くのは、そのサイト一つのフォルダです。PC全体、ユーザーフォルダ、バックアップ保管庫をまとめて開きません。
このWordPress Studioサイトを、まだ変更せずに調査してください。
作業対象：【Studioで確認した一サイトのフォルダ】
公開本番：【変更禁止】
wp-content、使用中テーマ候補、プラグイン、WordPress設定ファイルの存在を確認してください。
秘密値は出力しないでください。
トップページ本文がファイル側かDB側か、現時点で判断できる範囲と判断できない範囲を分けて報告してください。
ファイル変更、DB直接編集、インストール、外部送信、同期、公開は行わないでください。
StudioのDBファイルを直接書き換えるのは避けます。内容を調べる必要がある場合はStudioが用意するデータベース閲覧機能やWordPress管理画面を使い、何を確認するか決めてから進めます。
Codexで一文字だけ変えて表示の流れを確認する
先にWP Adminで「固定ページ→新規追加」を開き、タイトルを「ローカル練習」、本文を「これは練習用ページです」としてローカル内で公開します。そのページがローカルURLで開くことを確認してください。ここで作った本文はDB側に保存されるため、CodexにDBを直接書き換えさせる実習には使いません。
最初のCodex実験は大改修ではなく、使用中テーマの中にある、安全に戻せる表示箇所を一か所だけ変えます。変更前の文字、変更場所、変更後の文字を説明できる作業にします。
- ローカル練習ページがブラウザで開くことを確認する。
- Codexへ、ファイル側に安全な変更対象があるか調査だけを頼む。
- 対象が一つに絞れなければ、無理に変更せず停止する。
- 対象が見つかったら、変更予定と戻し方を確認する。
- 練習用の表示文字を一か所だけ変更する。
- ブラウザを再読込し、新しい文字を確認する。
- 元に戻し、再び表示を確認する。
変更しても表示されない場合は、キャッシュ、別テンプレート、DB側の本文、サイトエディター保存データを調べます。ファイル側に安全な対象がなければ、この実習はそこで終了です。根拠なく複数ファイルへ同じ文章を足しません。
PCとスマホ幅でローカル表示を確認する
ローカルサイトでも、最後はブラウザの見た目で判定します。PC幅1280px前後とスマートフォン幅390pxで、見出し、画像、表、ボタン、メニュー、横スクロールを確認します。
- トップページがエラーなしで開く。
- 管理画面も別タブで開ける。
- 変更した文字が一か所だけ変わっている。
- 390pxで画面全体が横へはみ出さない。
- 画像切れと不明なプレースホルダーがない。
- フォームや決済を実送信していない。
詳しい表示確認は CodexでWordPressの表示崩れをPC・スマホ確認する方法 を使ってください。
見出しを一文字変え、ブラウザで確認して、元にも戻せました。ファイル編集と画面表示がやっとつながりました。
それが今回の大事な成果だよ。大きなページを作る前に、変更場所、表示結果、戻し方を一周できた。
ここで本番へ送るのではなく、次の記事のトップページ実践をこの環境で進めるんですね。
そうしよう。ローカルで入口を作って合格させてから、公開前チェックと本番用の反映方法へ進めば、状態を混同しにくいよ。
うまく動かない時は原因を一つずつ切り分ける
| 症状 | 最初に見る場所 | 避ける行動 |
|---|---|---|
| サイトが開かない | StudioのRunning表示とURL | 本番へアップロードして試す |
| 白画面・重大エラー | 直前に有効化したテーマやプラグイン | 複数を同時に追加する |
| 見た目が本番と違う | 固定ページ、DB、必須プラグイン、画像 | テーマだけで完全再現と思い込む |
| 変更が出ない | 表示中テンプレートとキャッシュ | 同じ変更を各所へ重複追加 |
| 本番固有機能が動かない | DB方式、PHP、サーバー機能 | ローカル結果だけで本番合格にする |
壊れた練習サイトを直すより、新しい空のサイトを作り直した方が早い場合もあります。ただし削除前に、対象がローカルサイトであること、残したい変更がないこと、バックアップ原本ではないことを確認してください。本番サイトは削除対象にしません。
今回の完了条件
- WordPress Studioに練習サイトが一つある。
- Running状態になり、ローカルURLのトップページが開く。
- WP Adminへ入り、対象サイト名を確認できる。
- 本番の秘密情報や個人情報を持ち込んでいない。
- メール、決済、Webhook等を実送信していない。
- Codexで一サイトのフォルダだけを開ける。
- 一か所の変更と復元をブラウザで確認できる。
- 「ローカル合格」であり「本番公開済み」ではないと記録した。
よくある質問
WordPress Studioは無料ですか？
公式では無料のローカル開発アプリとして提供されています。オンラインのプレビューやホスティングは別の条件があるため、利用時の公式案内を確認してください。
WordPress.comのアカウントは必要ですか？
PC内でローカルサイトを作るだけなら必須ではありません。プレビューや対応サービスとのSyncなどオンライン機能で必要になります。
ファイルをコピーしたのに表示できないのはなぜですか？
WordPressはPHPの実行環境とDBを使います。テーマ等のファイルだけでは、固定ページ本文や設定を含む現在のサイトを再現できない場合があります。
本番サイトを丸ごとインポートしてよいですか？
個人情報、注文、問い合わせ、秘密値を含む可能性があるため、内容不明のまま行いません。匿名化したバックアップを別保管し、外部送信機能を止めてから判断します。
Studioと本番でDBが違っても大丈夫ですか？
通常のページ制作練習には使えますが、DB固有機能を使う処理は差が出る可能性があります。重要機能は本番に近い分離済みステージングで最終確認してください。
StudioからレンタルサーバーへSyncできますか？
一般のサーバーすべてが対象ではありません。公式Syncの対応先と、利用中サーバーの移行方法を別々に確認してください。
ローカルならフォームを送っても安全ですか？
外部サービスの設定が残っていれば通信する可能性があります。本物の宛先やキーを使わず、送信を止めた状態で表示確認から始めてください。
CodexにStudioのDBファイルを直接編集させますか？
初心者の最初の作業では行いません。固定ページ等はWordPressの通常の管理画面から編集し、DB調査も目的と範囲を決めて安全な閲覧手段を使います。
ローカルで完成したら公開済みですか？
いいえ。PC内での合格です。本番反映はバックアップ、差分、公開手順、復旧方法を確認する別工程です。
次はこの練習場でトップページを作る
表示できる環境が整ったら、 Codexで最初のWordPressトップページを作る実践 へ進みます。いまの表示元を調べ、読者と完成像を決め、入口だけを小さく変更します。
作業フォルダの準備から戻って確認したい場合は サーバー上のWordPressをCodexで扱う方法 、バックアップは WordPressのバックアップと復元手順 、公開直前は WordPress公開前の最終チェックリスト を参照してください。
最初はファイルを開けばサイトも見られると思っていました。DBと動かす環境が必要だと分かり、やっと迷いが消えました。
ローカル、本番、ファイルコピーを言葉で分けられたのが大きいね。次はこの練習場で、実際のトップページ作りへ進もう。
まだ公開用サーバーを持っていない場合は、今すぐ契約しないと練習できませんか？
Studioでの練習だけなら不要だよ。公開する段階になってから、必要な期間、料金、バックアップを比べて選べば大丈夫。
まだ公開用サーバーがない人へ
WordPress StudioでPC内の練習をするだけなら、サーバー契約は必要ありません。公開URLが必要になった人だけ、候補の一つとして確認してください。
エックスサーバー
向いている人： ローカルで練習した後、初めて公開用サーバーを用意したい人。
不要な人： すでに公開用サーバーがある人、今回はPC内だけで練習する人は契約不要です。
注意点： WordPress StudioやCodexとは別のサービスです。料金と移行方法は申込当日の公式情報を確認してください。
公開用サーバーの情報を見る広告・PRを含みます。