本番サーバーを直接編集せず、安全に試せるように、自分のパソコンへWordPressの開発環境を作ります。この教材ではLocalを使用します。
ローカル環境を使う理由
Localを使うと、WordPressに必要な複数の仕組みを自分のパソコン内へまとめて用意できます。
ローカル環境は、自分のパソコン内でWordPressを動かすための開発環境です。公開中のサイトへ影響を与えず、テーマの編集や設定変更を試せます。
ローカルのURLはインターネットへ公開するためのURLではありません。完成後は、STEP 05でファイルとデータベースを公開サーバーへ移します。
サイト作成前に決める項目
- サイト名：管理画面で識別できる名前
- ローカルドメイン：制作中のサイトを開くためのURL
- 管理者ユーザー名：推測されにくい名前
- 管理者パスワード：ほかのサービスで使っていない強い文字列
- 管理者メールアドレス：通知や再設定に使うアドレス
公開時に変更できる項目もありますが、管理者情報は最初から安全に設定します。パスワードをソースコードやGitへ保存しないでください。
次の図では、「サイト作成前に決める項目」の仕組みや関係を確認できます。
Localで新しいサイトを作る
次の図では、「Localで新しいサイトを作る」で行う操作の流れを示しています。
- Localを起動して新しいサイトの作成を選ぶ
- 半角英数字とハイフンでサイト名を付ける
- 推奨環境を選ぶ
- 管理者ユーザー名、パスワード、メールアドレスを設定する
- 作成が終わったらサイトを起動する
サイトと管理画面を開く
「Open site」でサイト、「WP Admin」で管理画面を開きます。URLの末尾が.localなどローカル用になっていることを確認してください。
次の図では、「サイトと管理画面を開く」で行う操作の流れを示しています。
起動後に確認する画面
- ローカル環境で作成したサイトを起動する
- サイトURLを開き、WordPressの初期画面が表示されるか確認する
- 管理画面URLを開き、設定したユーザーでログインする
- 管理画面の「設定」からサイト名と言語を確認する
- ローカル環境を停止し、再起動して同じサイトを開けるか確認する
サイト画面と管理画面は役割が違います。サイト画面は閲覧者が見る表示、管理画面は制作者や運営者が内容を登録する場所です。
次の図では、「起動後に確認する画面」で行う操作の流れを示しています。
サイトフォルダーを確認する
次の図では、「サイトフォルダーを確認する」で行う操作の流れを示しています。
app/public/
├── wp-admin/
├── wp-content/
│ ├── plugins/
│ ├── themes/
│ └── uploads/
└── wp-includes/編集する場所を限定する
制作で主に触るのはwp-content/themes内の自作テーマです。wp-adminとwp-includesはWordPress本体なので直接編集しません。
起動できない場合の確認
最初に、ローカル環境で対象サイトが起動中になっているか確認します。その後、表示されたURLをコピーしてブラウザで開き、古いブックマークからアクセスしていないか確認します。
同じポートを別のアプリが使っている場合や、SSL証明書をブラウザが信頼していない場合にもエラーが出ます。エラー文を消さずに記録し、どの操作の直後に発生したかを切り分けてください。