XAMPPでローカルサーバを立ち上げてWordpressの練習環境を作る方法


#はじめに

プログラミングをはじめて36日に素人が書いています。

Wordpressのローカル開発環境をXAMPPを使って作る方法をまとめます。

##環境

* MacBookAir-mid2014

* macOS-Mojave 


#Wordpressのダウンロード

あらかじめzipファイルをダウンロードしておきます。


#XAMPPのインストール

##XAMPP(ザンプ)とは何か

XAMPPとはweb開発に必要なツールが一通り入ったセットです。

* X: クロスプラットフォーム（WindowsでもMacでも動く）

* A: Apache（Webサーバソフト・サーバを作ります）

* M: MySQL（データベースを扱います）

* P: PHP（プログラミング言語）

* P: Perl（プログラミング言語）

以下からダウンロードしてインストールします。

https://www.apachefriends.org/jp/index.html



#XAMPPの起動

##サーバーとデータベースの起動チェック

![スクリーンショット 2019-07-17 16.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/155613fd-573e-9648-9515-2a8caafaf910.png)


1. XAMPPを起動し、「start」をクリックすると、サーバとデータベースが起動します。

2. 「Service」タブを確認すると、

* Apache（サーバ）

* MySQL（データベース）

* ProFTPD（無視してください）

が起動していることがわかります。


##ボリュームのマウント

ボリュームとは、外部記憶装置のことです。SDカードやDVDもその一つです。
マウントとは、パソコンで使えるようにすることです。SDカードでいうと、差し込むのがマウントです。

![スクリーンショット 2019-07-17 16.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/cc84150e-848d-1aaf-2385-6dc675bddd66.png)


1. 「Volume」タブの「Mount」ををクリックします。
2. 「lampp」というディレクトリが、Finderのどこかに出現するので確認します。（基本、`Users`ディレクトリの`ユーザー名`の直下かと思います）



#Wordpressプロジェクトを`htdoc`ディレクトリに入れる

![スクリーンショット 2019-07-17 16.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/496dcd48-0c0c-a8e8-c2ea-66ad31a16f52.png)


`lampp`ディレクトリ内の`htdoc`ディレクトリの中に、Wordpressのzipファイルを展開します。

なぜ`htdoc`ディレクトリの中なのかというと、ApacheサーバのWebサービスで公開される初期設定のフォルダが`htdocs`だからです。（ここがWebサービスのURLのてっぺんということです。）


#データベースの作成

![スクリーンショット 2019-07-17 16.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/35991dc9-6eb8-cd14-e41d-a2ffbaed8298.png)


XAMPPの「General」タブから「Go to Application」をクリックします。
ブラウザにXAMPPの初期画面が表示されます。

![スクリーンショット 2019-07-17 16.28.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/15f45e23-0a16-d44e-b91c-70ceb40ed913.png)


「phpMyAdmin」というボタンをクリックすると、データベースを触ることのできる画面に移動します。

![スクリーンショット 2019-07-17 16.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/933ae287-6c92-728a-3e01-815f5275e850.png)


「database」タブから、今回作成するwordpressサイト用のデータベースを作成します。

「databese name」はなんでもOKですが、あとで使うので覚えておきましょう。

「databese name」を押したら、「create」ボタンを押します。
ここでの作業はこれでおしまいです。



#Wordpressにアクセスする

XAMPPの「Network」から「localhost」を選択し「enable」にし,ローカルホストを有効にします。

`http:/localhost:8080/[folder name]`にアクセスすると、Wordpressが立ち上がります。
`folder name`は`htdocs`に入れたフォルダの名前（デフォルトは`wordpress`です）になります。


##「wp-config.phpが読み込めませんでした」の場合

![スクリーンショット 2019-07-16 10.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/6eeb468e-e2ca-31f1-ffd3-192da7ffcb53.png)


wordpressフォルダの`wp-config-sample.php`というファイルがありますので、コピーして`wp-config.php`という名前で同じフォルダに保存します。

`wp-config.php`を開き、中身をすべてwordpressに表示された内容に書き換え保存します。

wordpressに戻り、「インストール実行」します。


#データベースとWordpressの接続

![スクリーンショット 2019-07-16 10.34.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/a046a679-8dfc-b2d7-c8a0-7f2fec0501ce.png)


* 「データベース名」：　先ほどphoMyAdminで作成したデータベース名です。

* 「ユーザー名」：　root （デフォルトです）

* 「パスワード」:　空欄（デフォルトです）

* その他はいじらずそのまま「送信」して進めます。


#Wordpressにサインアップして完了

「ユーザー名」「パスワード」「メールアドレス」は自由に設定します。


#テーマやプラグインのインストール、画像のアップロードができない場合

フォルダやファイルへの書き込みができない設定になっている可能性があります。

`wp-config.php` に、以下のコードを追加します。

```
define('FS_METHOD', 'direct');
```

![スクリーンショット 2019-07-17 16.56.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/2ac7ded7-237e-84e4-753b-ab673e2ebbf0.png)


`wp-content`フォルダや、`themes`や`plugin`フォルダをFinderから開き、右クリック。
「情報を見る」から「共有とアクセス権」をすべて「読み/書き」に変更します。

![スクリーンショット 2019-07-17 16.12.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452235/b39becb2-9206-eafa-57d2-f806b1616844.png)


XAMPPの「Service」から、「Restart」をクリックし、サーバを再起動します。

治っていたら、ラッキーです。


#まとめ

Wordpressの環境構築手順をまとめました。
「共有とアクセス権」でたびたびエラーがでますので、なにかあったら「共有とアクセス権」をチェックしてもいいかもしれません。