WordPressの解説を読んでいると、「まずローカル環境で試しましょう」と書かれていることがあります。
ローカル環境とは何なのか。
自分はサイトのテーマを丸ごと作り替えたとき、本番に出す前に、ローカル環境で見た目と重さを確かめました。
その経験と一緒に、基本をまとめます。
先に結論です。
ローカル環境は、ふつうは外に公開せず、自分のPCの中で動かすWebサイトの練習場です。
本番のサイトを触らずに、テーマやプラグインの変更を試せます。
ただ、本番と完全に同じではないので、最後は本番でも確かめます。
ローカル環境って、どこにあるの？
自分のMacの中だよ。ふつうはインターネットには公開しないサイト。
ローカル環境とは？自分のPCで動かすWebサイト
ふだんのWebサイトは、レンタルサーバーのような、インターネットにつながったサーバーで動いています。
これを「本番環境」と呼びます。
ローカル環境は、その仕組みを自分のPCの中に用意したものです。
WordPressを動かすには、Webサーバー、PHP、データベース(MySQLなど)が要ります。
それをまとめてPCに入れて、ブラウザでhttp://localhost/のようなアドレスを開いて見ます。
自分のサイトなら、ローカルはhttp://localhost:8888/cats-hand/、本番はhttps://cats-hand.pro/です。
見た目は同じでも、ローカルのほうはインターネットには公開されていません。
(ただ、あとで書くように、自分のMAMPは起動中なら同じWi-Fiの別の機器からも開ける設定でした)
どんなときに使う？
- テーマやCSSを大きく変える前に、見た目を確かめたいとき
- プラグインやWordPress本体の更新を、本番の前に試したいとき
- 新しい機能やコードを、壊してもいい場所で動かしたいとき
ローカル環境の作り方
Macなら、WordPressに必要なものをまとめて入れてくれるアプリを使うのが手軽です。
- MAMP: Webサーバー・PHP・MySQLをまとめて入れられる。自分はこれを使っています
- Local(旧Local by Flywheel): WordPress向けのローカル環境アプリ
MAMPの場合、やることは「アプリを入れる→データベースを用意する→WordPressのファイルを置く→ブラウザで開いて初期設定をする」の流れです。
具体的には、アプリを起動してサーバーを動かし、データベースを作ってから、WordPressのファイルをhtdocsというフォルダに置きます。
あとはブラウザでhttp://localhost:8888/(置いたフォルダ名を後ろに付ける)を開いて、WordPressの初期設定をすれば完成です。
Localのように、WordPressの用意までボタンひとつでやってくれるアプリもあります。
ローカルで動けば、本番でも動く？
だいたいはね。でも、PHPのバージョンとかが違うと、本番だけ動かないこともあるよ。
本番との違いと、注意点
ローカルと本番は、同じに見えて中身が違うことがあります。
- PHPなどのバージョン: 自分の場合、ローカルのMAMPのPHPは8.3.14、本番のサーバーは8.3.36でした
- 記事やデータ: ローカルのデータベースは、本番と自動ではそろいません。自分は記事を入れるとき、ローカルと本番の両方に同じ内容を入れています
- 速さ: 外のサーバーまで通信しない分、ローカルのほうが速く見えることがあります
もうひとつ、ローカル環境のアプリが、同じWi-Fiの別の機器からも開ける設定になっていることがあります。
古いPHPのまま動かし続けると、そこが弱点になるかもしれません。
自分は、使わないときはMAMPを止めるようにしています。
自分はこう使ってます
テーマを作り替えたとき、ローカルで先に確かめた
9月の終わりに、このサイトのテーマを、Cocoonから自作のテーマに作り替えました。
そのとき、本番に出す前に、ローカルのMAMPで新しいテーマを動かしています。
ローカルでは、トップページのHTML・CSS・JavaScriptの合計を同じ数え方で比べて、970KBから102KBに軽くなるのを確かめました。
さらに、171のURLを一括でチェックしてから切り替えました。
本番に切り替えたのは、そのあとです。
本番でいきなり変えなかったんだ。
崩れたら、読んでる人にそのまま見えちゃうからね。
テーマの更新も、ローカルから
今もテーマを直すときは、ローカルで編集して見た目を確かめてから、本番に反映しています。
反映はGitを使って、本番のサーバーで新しいファイルを取りこむ形です。
切り替えから2週間ちょっとたったときに本番でも重さを数えたら、ローカルとほぼ同じでした。
ローカル環境でハマった例
ローカルと本番の違いで、本番だけで止まったことがあります。
テーマを作り替えたときの数字や手順は、こちらにまとめています。
迷ったときの確認ポイント
- 大きな変更は、まずローカルで試す
- ローカルと本番で、PHPやWordPressのバージョンが同じか見る
- 本番に反映したら、本番でも表示を確かめる
- 使わないときは、ローカル環境のアプリを止める
