Help us understand the problem. What is going on with this article?

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

はじめに

最近の流行りである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

Local Siteからは

スクリーンショット 2019-04-11 11.49.19.png
それぞれ赤枠で囲った部分を選択すると、このようなページに遷移できます。
スクリーンショット 2019-04-11 11.51.34.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を押下してください。
出ないバックフラウンドで動き続け、排熱、電気代がすごいことになります((((;゚Д゚)))))))

では、また

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした