未経験からのフルスタックエンジニア

スキルをつけよう!未経験からフリーランスエンジニアへの成長記録

【Wordpress】Wordpressをローカル環境で動かす~MAMP~

Wordpressを試してみたいと思っている時から、いきなり「サーバー契約して」「ドメイン取って」・・とお金がかかるのは嫌ですよね?

そんな時には、ローカル環境でWordpressを触ってみればイイんです!

自分も「実際に使うかわからないけど、どんなものか知りたい・試したい」と思い、ローカル環境を構築して作業しました。

環境構築といっても10分もあれば終わるくらい簡単なものです!

MAMP

MAMPとは「Macintosh」「Apache」「MySQL」「PHP」の頭文字を取ったもので、MySQLPHPの開発環境を簡単に構築できるパッケージソフトです。

Macしか使えないわけではなく、Windowsでも使用可能です。

無料と有料がありますが、無料のものだけでWordpressをローカルで動かせる環境を構築できます。

www.mamp.info

MAMPのダウンロード

以下のページから、あなたにあったOSを選んでダウンロードしてください。

www.mamp.info

ダウンロードしたインストーラの指示に従えばインストール完了です。

MAMP設定(Macユーザーなので環境によっては表示が違うかもしれません)

インストールしたMAMPを立ち上げてください。そうすると以下のようなインターフェースが出てくると思います。 f:id:AtlasLife:20190911151452p:plain

MAMPのインターフェースがアクティブな状態で、PCの上部にある"MAMP"→"Preference"をクリックしてください。

f:id:AtlasLife:20190911151814p:plain
設定メニューを開く

クリックして出てきた設定メニューから、まずは"Ports"を選んでください。すると以下の画面になりますので、画像通り値を記入してください。

f:id:AtlasLife:20190911152016p:plain
ポートの設定

続いてPHPのバージョンを指定します。バージョンは5.6に近いものを選んでください

f:id:AtlasLife:20190911152142p:plain
PHP設定

これでMAMPの設定は完了です。設定メニューを閉じ、Start Serversをクリックしてください。すると、右上の"Apach Server"と"MySQL Server"の右側の丸が緑色になるはずです。緑になったら正常にサーバーが起動しています。

f:id:AtlasLife:20190911152421p:plain
サーバーが正常に起動しているかチェック

PHPが正常に動いているかどうかも確認します。まず、以下の画像の"Show in Finder"をクリックします。するとMAMP>htdocsというフォルダに行き着くかと思います。のちにこのフォルダにWordpressをインストールしますので、場所を覚えておいてください。

f:id:AtlasLife:20190911153150p:plain
htdocsへとぶ
続いて、適当なテキストエディタを開き、以下のコードをコピペした"test.php"というファイルを作ってください。そのファイルをhtdocsのフォルダに格納します。

<?php
echo 'test';

格納したら、ブラウザのアドレスバーに
localhost:8888/test.php
と入力してください。PHPが正常に動作していれば、以下のように表示されるはずです。 f:id:AtlasLife:20190911153739p:plain

WordpressMAMPに導入する(以下全てMAMPでサーバーを起動した状態で行います)

まずは、WordpressのサイトからWordpressをダウンロードします。zip形式でダウンロードされるので解凍してください。

ja.wordpress.org

解凍したファイルを全て、MAMP>htdocsフォルダにいれます(先ほど作成した"test.php"は削除してください) f:id:AtlasLife:20190911154059p:plain

データベースの作成

ブログなど投稿した内容などを保存するためのデータベースを作成します。まずは以下のアドレスをブラウザのアドレスバーに入力してください。 localhost:8888/phpmyadmin
以下のような画面になれば成功です。 f:id:AtlasLife:20190911154348p:plain

サイドバーの新規作成をクリックし、以下の画像のようにデータベース名を「wpdb」として作成ボタンを押してください。 f:id:AtlasLife:20190911154629p:plain

サイドバーに「wpdb」が作成されていれば成功です。 f:id:AtlasLife:20190911154705p:plain

Wordpress起動

以下のアドレスをブラウザのアドレスバーに入力してください。
localhost:8888
表示された画面で「さあ、始めましょう!」をクリックしてください。 f:id:AtlasLife:20190911155648p:plain

クリックして表示された画面で、以下の画像通り入力し、送信ボタンを押してください。 f:id:AtlasLife:20190911155805p:plain

すると以下の画面になりますので、インストールを実行してください。 f:id:AtlasLife:20190911155926p:plain

すると以下の画面になりますので、サイトのタイトル、ユーザー名、パスワード、メールアドレスを入力してください。ユーザー名とパスワードはWordpressダッシュボードへのログインで必要になります。入力し終えたら、「Wordpressをインストール」をクリックしてください。 f:id:AtlasLife:20190911160158p:plain

インストールが完了すると以下のような画面に移行します。ここで、ダッシュボードにログインします。ここで、先ほど登録したユーザー名とパスワードが必要になります。 f:id:AtlasLife:20190911160821p:plain

ログインできれば完了です!
お疲れ様でした!!

まとめ

一回構築してしまえば、MAMPでサーバーを起動させるだけでローカル環境でWordpressを触ることができます。

もう公開しているサイトの改修などでも、ローカルでちゃんと動くか確認してからデータを移行するなどした方が安全かもしれませんね!

おまけ

ダッシュボードのページに行くには、以下のアドレスを使用します。 localhost:8888/wp-admin/