「XAMPP」を利用したWordPressのローカル環境構築 その1

xamppでローカル環境構築

wordpressでブログを運用していると、プラグインを適用したことによりブログの表示が崩れたり、誤って記事を削除したり、
デザインを調整するためにCSSを修正したらブログデザインが崩れたり、、、
そのような目にあったことはないですか?

当ブログは、まだあまり目に留まるようなサイトではないので、そこまで気にしていないのですが、そうでなければ、慎重を期せねばなりませんよね。

そこで、そのようなことを避けるために、今からローカルに環境を構築しておこうと思います。基本的にローカル環境であれば、何をしてもOKです。壊してもOKなのです。
僕も、ローカル環境で色々試してからサーバー環境にアップする癖を付けるため、実際に「XAMPP」でローカル環境を構築したので、その手法を紹介します。
ちょっと長くなりますので、まずは「XAMPP」のインストールとwordpressに必要なツールの起動方法を紹介します。

 

XAMPPとは

XAMPP(ザンプ)とは、

ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもの

で、パッケージ群の頭文字を取った名称になっています。

X – Windows、Linux、macOS、Solarisのクロスプラットフォーム
A – ApacheのA
M – MySQLまたはMariaDBのM
P – PHPのP
P – PerlのP

 

フリー(無料)ですし、手軽に導入できるとあって、今回、XAMPPの上にwordpress環境を構築することで当ブログのローカル環境を構築しようということです。
ちなみに、MAC環境の場合は、XAMPPではなく「MAMP(マンプ)」を使って環境構築しましょう。

 

早速、XAMPP環境を構築しよう

まずはXAMPPをインストールしよう

1. XAMPPの公式サイトにアクセスして、「Windows 向け XAMPP」リンクをクリックします。

xampp公式HP

 

2. 素晴らしい!と表示されたページに遷移し、保存ダイアログが表示されるので、任意の場所に保存します。なお、保存ダイアログが表示されなければ、「ここをクリック」をクリックしてください。

xamppダウンロード

 

「Download Latest Varsion」をクリックすると保存ダイアログが表示されます。

xamppダウンロード

 

3. ダウンロードしたファイルをダブルクリックすると、このダイアログが表示されるので、「Yes」ボタンをクリックしてください。ダウンロードするPCにウイルス対策ソフトがインストールされている場合に表示されるようです。

xamppインストール

 

4. このような警告ダイアログも表示されますが、「OK」ボタンをクリックしてください。

xamppインストール

 

5. ようやくセットアップダイアログが表示されるので、「Next」ボタンをクリックします。

xamppインストール

 

6. セットアップコンポーネントは、wordpressに関係するもののみ選択します。最初はすべて選択されているので、下図のとおりチェックを外してください。ただし、すべてインストールしたとしても何か影響があるわけではないので、インストールしても良いです。

xamppインストール

必要なコンポーネント
Apache:ウェブサーバー(サイトを表示してくれるツール)です。
MySQL:データベースです。
PHP:プログラム言語です(wordpressはPHPで開発されています)。
phpMyAdmin:データベースの管理ツールです。

 

7. XAMPPの保存先を選択します。何も操作せず、「Next」ボタンをクリックします。

xamppインストール

 

8. 「Bitnami」について表示されますが、これはチェックを外して「Next」ボタンをクリックします。wordpressを別途でインストールするため、ここでは触れません。

xamppインストール

 

9. インストールする準備ができたので、「 Next」ボタンをクリックします。

xamppインストール

 

10. インストール中の画面はこんな感じです。

xamppインストール

 

11. インストール中に、ファイアーウォールの警告画面が表示されます。その際は、「プライベートネットワーク」をチェックして、「アクセスを許可する」ボタンをクリックしてください。

xamppインストール

 

12. インストール完了画面が表示されるので、「Finish」ボタンをクリックしてください。「Do you want to start …」にチェックが入っていなかったら、チェックしましょう(最初からチェックされていると思いますが)。

xamppインストール

 

13. 起動するとアメリカとドイツの国旗が…、アメリカ国旗を選択した状態で「Save」ボタンをクリックします。

xampp設定

 

14. 起動されました!これで「XAMPP」のインストールは完了です。

xampp設定

 

各種サービスの設定

wordpressを利用するためには、XAMPPでセットアップしたウェブサーバーとデータベースソフトを起動する必要があります。
以下に起動手順を解説します。

 

1. ウェブサーバーの起動方法

Apache行の「Start」ボタンをクリックします。

xampp設定

 

クリック後、Apacheの背景色が緑色になり、PID(s)に数値が表示されればOKです。

xampp設定

 

「Admin」ボタンをクリックします。

xampp設定

 

ブラウザに以下のような内容が表示されればOKです。なお、アドレスバーに「localhost/…」と表示されているかと思いますが、これがローカル環境ですよ。ということを表しています。

xampp設定

 

2. データベースソフトの起動方法

次は、MySQLを起動します。手順は、Apacheと全く同じです。MySQL行の「Start」ボタンをクリックします。

xampp設定

 

クリック後、MySQLの背景色が緑色になり、PID(s)に数値が表示されればOKです。

xampp設定

 

ただし、起動中に、ファイアウォールの警告画面が表示されますので、XAMPPのインストール時と同様、「プライベートネットワーク」をチェックして、「アクセスを許可する」ボタンをクリックしてください。

xampp設定

 

「Admin」ボタンをクリックします。

xampp設定

 

ブラウザに「phpMyAdmin」が表示されればOKです。なお、この際もアドレスバーは「localhost…」となり、ローカル環境であることが分かります。

xampp設定

 

これでウェブサーバーとデータベースソフトの起動が完了しました!

 

まとめ

今回は、「XAMPP」のインストールとwordpressに必要なツールの起動方法を紹介しました。
簡単に環境構築できましたね。

次回「「XAMPP」を利用したWordPressのローカル環境構築 その2」では、wordpressをインストールして、ローカル環境を構築する方法を紹介します。

 

スポンサーリンク


Pocket


SNSでもご購読できます。

コメント

コメントを残す

*

タスlife