1
1

ローカルで動くWordpress環境を作ってみた

Posted at

#はじめに

最近の流行りであるWordpressを使ってみたい。
だけど、そのためにサーバーを契約するのはちょっと... という方向けの記事になります。

と思って色々調べてみたところ、ローカルでも動かせる環境を構築できることがわかったので書いていきます。

#環境
今回使うのはmac book Pro
OSバージョンは以下の通り
スクリーンショット 2019-04-11 10.30.17.png

#Wordpressをmacのローカル環境で動かすために

【1】アプリをゲットする
今回使うLocalは以下のリンクから手に入る。
Local by Flywheel | Local WordPress development made simple
https://local.getflywheel.com/

【2】Free download!をクリック
スクリーンショット 2019-04-11 10.32.23.png

【3】必要事項を記入する

Mac or Windows: OSを選択【必須】
First Name: 名前
Last name: 苗字
Work Email: メールアドレス【必須】
Company Name: 会社名
Phone Number: 電話番号
Number of websites: サイト数【必須】

スクリーンショット 2019-04-11 10.34.41.png

記入が終わったら、Get it now! をクリックすると、ダウンロードが開始されます。

【4】Local by Flywheel.appの起動
ダウンロードが終わったら解凍してLocal by Flywheel.app
をアプリケーションフォルダに移動してください。

移動が終わりましたら、Local by Flywheel.appをダブルクリックして起動させます。
スクリーンショット 2019-04-11 10.47.58.png
こんなポップアップが出てきますが、「開く」を押下しましょう。

スクリーンショット 2019-04-11 10.48.46.png スクリーンショット 2019-04-11 10.49.34.png

+CREATE A NEW SITEをクリックしてサイトを作ります。

サイトの名前を入れます

スクリーンショット 2019-04-11 10.50.20.png

環境を選びます

スクリーンショット 2019-04-11 10.50.42.png Prefrredはお任せです。初心者はこちらを選ぶといいでしょう。 スクリーンショット 2019-04-11 10.50.44.png CustomはPHPのバージョン、WEBサーバー、MySQLバージョンを選択できるので、受注した案件によって変えることができます。 ある程度慣れてきたら、こちらを選択してみましょう。

WordPressの設定

スクリーンショット 2019-04-11 10.53.16.png

WordPress Username,WordPress Password,WordPress Email
を入れていきましょう

おわったら、Add Siteを押下しましょう。

サイトを作っています。
スクリーンショット 2019-04-11 10.55.30.png
スクリーンショット 2019-04-11 10.56.46.png

管理画面をみてみる

スクリーンショット 2019-04-11 11.05.29.png

ADMINをクリックして管理画面に遷移します。
するとこのような画面が出てきますので上で決めた
スクリーンショット 2019-04-11 11.06.39.png
Username、Paswordを入力して、Log inを押下します。

スクリーンショット 2019-04-11 11.10.17.png
するとこのような画面になったと思います。

これでもいいと思うのですが、やはり日本語にしましょう。

ってことで早速設定を変更していきます。
「言語設定」は、Setting - General - Site Language
スクリーンショット 2019-04-11 11.14.20.png

から設定できます。
この中をみてみると、日本語という文字がありません。
スクリーンショット 2019-04-11 11.15.33.png

写真にはありますがwww

https://ja.wordpress.org/about-wp-ja/
このサイトによるとどうやらWordPress5以降では日本語を設定するためにプラグインをインストールする必要があるみたいです。

WP MULTIBYTE PATCH

上記をコピーしてPlugins - Add newを選択し、検索ボックスに先ほどコピーした
WP MULTIBYTE PATCH を入力してEnterを押下します。
スクリーンショット 2019-04-11 11.24.21.png

検索結果に出てきた赤枠で囲った WP MULTIBYTE PATCHのINstallを押下してInstallします。

終わりましたら、再度、言語設定をしていきたいと思います。
「言語設定」は、Setting - General - Site Language
スクリーンショット 2019-04-11 11.14.20.png

から設定できます。
この中をみてみると、日本語という文字がありました。
スクリーンショット 2019-04-11 11.15.33.png

スクリーンショット 2019-04-11 11.27.38.png

Site Language を日本語にした後で、Save Changesを選択すると、
スクリーンショット 2019-04-11 11.29.02.png
日本語になっていることを確認できましたね。

ページをみてみる

管理画面からは ![スクリーンショット 2019-04-11 11.50.12.png](https://qiita-image-store.s3.amazonaws.com/0/343721/6d78b0f7-8aae-7f08-6502-e900ea908f30.png)

Local Siteからは

スクリーンショット 2019-04-11 11.49.19.png それぞれ赤枠で囲った部分を選択すると、このようなページに遷移できます。 ![スクリーンショット 2019-04-11 11.51.34.png](https://qiita-image-store.s3.amazonaws.com/0/343721/d68543a0-7789-cd20-da90-0e8a9e54ef2e.png)

#WordPress案件を受注したんだけど、お客さんにいちいち見せに行くの面倒臭い
そんなあなたに朗報です。Local Siteでは1時的なアドレスを発行して、先方と画面を共有する方法が用意されています。
早速見ていきましょう。

スクリーンショット 2019-04-11 11.54.59.png

赤枠で囲った部分のLive Linkが画面を共有するためのアドレスになります。
ENABLEを押下すると
スクリーンショット 2019-04-11 11.56.09.png

アドレスが発行されますので、そちらのリンクを押下すると
スクリーンショット 2019-04-11 11.58.40.png

先ほど見たページをみることができました。
これならば、案件を受注した際に、先方とわざわざ打ち合わせに品川あたりまで行く必要は無くなりますねwww

最後に

作成したサイトを閉じる時、寝るときや、長時間離席する際には、ブラウザを閉じるだけではいけません。
スクリーンショット 2019-04-11 12.01.12.png
必ずSTOP SITEを押下してください。
出ないバックフラウンドで動き続け、排熱、電気代がすごいことになります((((;゚Д゚)))))))

では、また

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1