【Local】【WordPress】ローカルでのWordPress環境構築に挑戦

# サマリ
localというローカル環境でWordPressを使えるようにするツールを使って
WordPressに挑戦してみました！

# 背景
ITスキルを身につけたい者として、まず思うのが自分のWebページを持つことですよね（偏見
HTMLやCSSの勉強は着手しているのですがなかなか進んでおらず…
手始めにWordPressなら簡単と聞くもののドメインとったりサーバレンタルしたりとかなかなか億劫だしなぁとずっと思っていたところ、
なんとローカル環境でWordPressを触れるツールがあるとのこと！
やってみるしかないですよねぇ！

# ゴール
- localのインストール
- WordPressページの表示確認

# 対象読者
- localが気になっている方
- サーバ借りるまでは面倒だけどWordPressを触りたい方
- 自分（備忘のため）

# 前提
必須：PC、インターネット環境
推奨：WordPressの操作
　　（がっつりページ作りこむならある程度知識・学習時間が必要かと思いますが、本記事ではとりあえずページの表示確認するところまでなので、そこまでであれば知識や時間はなくても大丈夫です）
# 環境
- ホストOS：Window10 Home
- local：8.2.1

# 手順
以下のサイトの手順を参考に実施しました。
ありがとうございます…！

https://www.kagoya.jp/howto/rentalserver/wppractice/wp_local/

### そもそも
- WordPressとは
本記事を目にされている方はご存じかと思いますが、
Wiki先生の言葉を借りるとオープンソースのブログソフトです。（ざっくりすぎ）

https://ja.wikipedia.org/wiki/WordPress

- Localとは
Local Wordpress Development toolとのことです。

https://localwp.com/

ローカルでWordPress環境を作るためのツールと理解しています。（そのまま）

- WordPressのローカル環境構築について
他のやり方として、[XAMPP](https://www.apachefriends.org/jp/index.html)（クロスプラットフォーム＋Apache＋MariaDB＋PHP＋Perl）や[MAMP](https://www.mamp.info/en/windows/)（Macintosh＋Apache＋MySQL＋PHP）などの環境・ツールもあるようですが、一番localが簡単なようなので、今回はlocalでの導入をしています。

### localのインストール

まずは[公式HP](https://localwp.com/)にアクセスします。




`DOWNLOAD FOR FREE`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/8d497f95-df71-06f2-f3ae-95c735081a9d.png)

プラットフォームの選択が出るので、自環境に合わせて選択します（今回はWindows）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/959ebdec-f13d-4e07-32bf-f319fce00259.png)

名前とアドレスを打ち込みます。
organization typeはよくわからなかったので、Otherを選択しました。（おい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/b53d03b3-da5f-ae9f-612b-70b6690034aa.png)

`GET IT NOW!`をクリックすると
こんな感じで、実行ファイルのダウンロードが始まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/14172440-3ec3-1887-8cce-60e693fa3737.png)

「local-8.2.1-windows.exe」というファイルがダウンロードできたので、ダブルクリックで実行します。
（バージョンは2024.2.25時点）

インストールオプションの画面が出るのでお好みで選択いただければと思います。
自分は下の「現在のユーザーのみにインストールする」を選択しました。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/38b408b2-2ffb-c9aa-b164-3d8ba4b13942.png)

続いてこのような画面が出ます、自分はそのままにしました。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/1808b93f-05f9-d8ee-eb00-5f5604b348ee.png)

とりあえず、インストールは完了しました。
（時間的には数秒で完了しました。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e2870e13-1ec9-e881-69f3-82d9ea4145d4.png)

利用規約みたいなものがでますが脳死で`I agree`です（おい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/b7850f15-c399-c579-729b-82ce26fe7663.png)

アカウント作成の画面がでます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e6477c3d-a298-756a-040f-2eb03ab862ec.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/ed121722-6ac3-f823-2ad1-f3685603799e.png)

必要な情報を投入…
と思いましたが、localのアプリ上は特にアカウント必要なくても動作しそうだったので、そのまま進めたいと思います。（ローカル外に共有する機能を使う場合などで必要になってくるようです）

気づくとlocalのアプリが開いており、無事サイト作成の画面が表示されています。おぉ～！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/84c65dbc-c27b-1eca-79bf-8f7de5f5732f.png)

### サイトの作成

`Create a new site`を選択し、右下Continueを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/80753412-6460-7cf8-3880-e09add6716f7.png)


sitenameは自分が作成したい名前を入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e77f1fa9-eb0b-56c8-0f16-ada58a300243.png)

必要に応じてドメインなど編集できるようですが、今回は練習用に触るだけなので、デフォルトのもので行きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/2fb29de6-bf15-0ece-9721-28c12bfb1fcf.png)

続いて環境選択の画面です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/f43398ce-ad51-ba4b-792d-928eb934bc31.png)

推奨では画面の通りPHP8.1.23、nginx、MySQL8.0.16になっているようです。

右のCustomを選択すると、ある程度のバージョンを選択できるようになっています。
（が今回は特に触りません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/da684ed6-1a85-8a8b-3a54-db4358640d14.png)

続いて、WordPressのユーザ名を投入する画面がでます。
ユーザ名とPWを投入します。
メールアドレスは画面の通りデフォルトで入っているので、特に変更したいということがなければそのままで大丈夫そうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/d41fa480-e3df-f582-7d22-f7a553adf2e8.png)

すると無事画面が開きました…！
（途中、mailhog.exeとnginx.exeの実行許可のポップアップがでましが、許可しました）

mailhogは初見だったのですが開発用のメールサーバなんですね…

https://chigusa-web.com/blog/laravel-mailhog/#:~:text=%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82-,MailHog%E3%81%A8%E3%81%AF,%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

今回がっつりページを触らないためメールを使うような場面はないのですが、今後必要に応じて学習したいと思います。

そしてlocalアプリの右上`OpenSite`をクリックするとブラウザでページが開きました。
おお…！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/ef0dd872-5fbc-d000-cf69-afb287b20822.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/317c25fe-fbc5-a3c4-cc59-8097dd13e116.png)

### WordPressダッシュボードのアクセス
右上の`WP Admin`をクリックすると、WordPressのログイン画面が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/07f85033-5b0c-58ee-dec0-af91b882ba4f.png)


先ほど投入したユーザ名、PWを入れてログインします。


ダッシュボードの画面が開きました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/45ad42b4-327e-844f-99e7-3012de87a7b5.png)


あとはWordPressの操作の部分になるので、今回そこまで深堀はしないのですが、
試しに別のテーマをインストールしてみて、
軽く文字を触ったりしてみました！

めちゃくちゃ簡単に編集できて、これは確かに利用者が多いのも納得と思いました…！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/76c96bae-c7e5-5805-a45e-30e731874141.png)


### 備考
- ローカルで作成したページを外部へ共有する方法もあるようです。[今回参考にさせていただいたサイト](https://www.kagoya.jp/howto/rentalserver/wppractice/wp_local/)下部に記載がありますが、Live Linkという機能を使うようです。
- また、サーバ環境への移行もできるとのことです。（All-in-One WP Migrationというメジャーなプラグインを使用）
- localでの環境構築方法は以下のページにも非常にわかりやすく手順が載っていました。

https://www.onamae.com/column/wordpress/27/

# 結果
localのインストールによりローカルでのWordPress環境構築し、画面を確認出来ました。

# 学び
WordPressは食わず嫌いで長らく触ったことがなかったですが、
無料で比較的簡単に導入できることがわかりかなりハードルが下がりました。
また、外部への共有やサーバ環境への移行もあるということで拡張性もあり、便利なツールがあるんだなぁと感動しました…！

# まとめ
Webサイトの学習にあたり、WordPressを触ってみるというアプローチが取れるようになったので、
今後もHTMLやCSSなどベースの学習を続けつつもWordPressをいじりながら引き続き勉強したいと思います。