【初心者がやってみた】MAMPでWordpressのローカル環境を構築

この記事をかいたきっかけ
　WordPressをローカルのデータベースで構築した際に手間取ったので構築方法をメモしておきたく書きました。
　OS:Mac Big Sur 11.1
　エディタ:Visual Studio Code 1.57.1

1. **MAMPをダウンロード・解凍**

    [Downloads - MAMP & MAMP PRO](https://www.mamp.info/en/downloads/)

    OSを選択してダウンロード

    ※PROも一緒にダウンロードされるので不要ならば削除する

    1. **MAMP PRO**のアイコンを右クリック→パッケージの内容を表示
    2. するとフォルダとファイルが表示されるので**MAMP PRO Uninstaller**をクリックしてウィザードに沿うだけでアンインストール可能

    ---

2. **MAMPの起動**

    アイコンをクリックして起動したら右上にstartボタンがありますがその前に変更が必要なので左上の歯車のアイコン**`Preferences`**をクリック

    
    ![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2b19c3c3-6746-db2b-f683-20c4af791b41.png)
    ![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/f4c739e8-8ad1-5ee3-32c3-2ed86bc90578.png)

    **Ports**の中の数字を手入力か中央右下ボタン `80 & 3306` で入力

    **Apache Port、Nginx Port**：80

    **MySQL Port**：3306

    **`OK`** を押したら最初の画面右上のメニューの**`Start`**を押すと読み込み中のアイコンが出て規定のブラウザで welcome to MAMP と表示されれば完了

    ![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/ccd2b636-be32-3587-f188-cc26a953c245.png)

    ※もしブラウザが起動しない場合は右上のメニューの**`web Start`**を押すと起動
    ブラウザが起動しない、または表示がおかしい場合は上で紹介した**Ports**の設定を確認してみる(自分はここで引っかかりました)

    ---

3. **WordPressを準備する**

    [**wordpress.org**](https://ja.wordpress.org/download/)

    wordpress.comはレンタルサーバーのサイトなので、配布サイトであるwordpress.orgにアクセスしてダウンロード

    解凍したファイルをアプリケーション→MAMP→htdocsに移動させて名前を変更する

    ※ここで付けた名前がディレクトリ名`(http://localhost/付けた名前/)`になる

    ![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/edeb1a04-dc0e-28ed-71b8-e3f54ceb4eb0.png)

    ---

4. **データベースとの接続**

    2で表示したMAMPのトップページ左上のメニューのTools→phpmyadminをクリック

    ![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/e0ab85a4-c246-7a1c-3a3f-107acb270c32.png)
    左カラムの**New**(日本語だと**新規作成**)をクリックしwordpressと入力し**Create**(**作成**)
    右側のプルダウンはutf8_general_ciを選択(おそらく初期値で入っているはず)
    ![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/5951b6e8-bbd4-1041-cc21-d29930607e99.png)

    ブラウザに**localhost/3で付けた名前**でアクセスするとデータベースの接続開始画面が表示されるので`さあ、始めましょう!` を押して次の画面へ
    
    ![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/a54c99bc-0c80-273e-5f4b-c9937a9cdeea.png)

    以下の項目を入力

    **データベース名：**phpmyadminで作成したデータベースの名前

    **ユーザー名：**root

    **パスワード：**root

    **データベースのホスト名：**localhost(初期値)

    **テーブル接頭辞：**wp_(初期値)、WordPressを複数データベースに登録する場合に変更が必要詳しくは[補足](#-複数のWordPressを導入する場合)へ
    ![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/0e6686d8-b2e8-a1c8-011d-4858d6dcf62d.png)

    `インストール実行`を押すと次の画面へ

    ---

5. **ログイン情報・サイト名の設定**

    WordPressにログインする為の情報などを入力

    ![9.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/5b4c31b8-4d9f-088c-81c4-c92c14c0fd78.png)

    **サイトのタイトル**

    **ユーザー名：**投稿者として表示される名前

    ※上２つは後から変更可能

    **パスワード：**自分で設定するか自動生成されるものを使用(必ずクリップボードに残しておくこと)

    **メールアドレス**

    **検索エンジンでの表示：✅入れる**

    `WordPressをインストール` で確定

    ![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/a7930bea-0ea9-2d72-13ce-122777c78168.png)

    `ログイン` をクリックするとログイン画面になるので先程設定したメールアドレスとパスワードでログインする

    ![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/dd21ce71-02f3-10ab-5e0c-e392e524bb6b.png)
    ※次回以降ログイン画面を表示させる場合は`(http://localhost/付けた名前/admin(またはlogin))`でアクセス
    ダッシュボードが表示されたら導入は完了！

    ![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/bce0db0b-6c8f-1d5d-4772-0b943e7bbfd5.png)

---

### 複数のWordPressを導入する場合

上記の通りデータベースの接続情報を入力すると「wp-config.php ファイルがすでに存在しています」とエラーになるため wp-config.php を編集

1. 一旦前のページに戻り、導入したいWordPressのフォルダをエディターで開く

2. wp-config.phpを開き、データベーステーブルの接頭辞(コメントアウトで書かれている)を探し、`$table_prefix = 'wp_'` の部分を変更

    今回はローカル環境のため単純に2を追加

    サーバー使用の場合は_wpのままだと脆弱性があるため別の名前にしたほうがよい

    ![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/9b255e47-0da7-bb3a-8143-07f797313066.png)


3. WordPressの画面に戻り2で変更したテーブル接頭辞を入力して再度送信すればOK！

    ![9・14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/1ce6e5b6-5801-e167-be2d-740d23373d29.png)