XAMMPのインストールを行う

まず、ご自身のパソコンの中でWordPressが動かせるように、ローカル環境を作っていきましょう。本講座ではwindowsで使用するXAMPPのインストール方法を解説します。

Macの方は、こちらの動画講座 https://skillhub.jp/classroom/courses/43/lessons/162 を参考に、MAMPを導入してください。

1.ローカル開発環境とは

「ローカル環境」とは、個人のコンピューター内に構築された環境を指します。
HTMLやCSSはテキストエディタでコードを書いて、そのままブラウザで確認してきましたよね。しかし、WordPress(PHP)はコードを書いてファイルを保存→ブラウザで確認しようとしても上手く動いてくれません。

そのため、ローカル環境でこうしたプログラム/アプリケーションを動かせるようにする必要があります。この、自分のパソコンだけで開発や確認が出来る状態にローカル環境をカスタマイズすることを「ローカル開発環境」を作ると言います。

簡単にまとめてしまうと…
Windows/MacそのままだとWordPressは動かないので、動かせる状態にしよう。
という事です。

MAMPとXAMPP

WordPressサイトを作成する際、制作環境作りに多く使用されているのが

  • Windowsの場合は「XAMPP」
  • Macの場合は「MAMP」

というソフトウェアです。

どちらもweb開発環境を立ち上げるために必要なソフトウェアをまとめた(パッケージ化した)もので、インストールと初期設定を行うだけでローカル環境内でWordPressを動かすことが出来るようになります。

2.XAMPPインストール(win向け)

windowsで、XAMPPをインストールしていきましょう。

1.ダウンロード

XAMPPの公式サイト https://www.apachefriends.org/jp/index.html を開いてください。

赤線で囲った「windows向けXAMPP」ダウンロードボタンをクリックします。
ページが切り替わり、自動タウンロードが始まります。
自動ダウンロードされない方は「ここをクリック」をクリックしましょう。

2.インストール

ダウンロードしたXAMPPインストーラーをダブルクリックします。

ウィルス対策ソフトやセキュリティ設定によっては、下図のようなポップアップが表示されることもあります。Yesもしくは実行を選択してください。

XAMPPのインストーラーが立ち上がります。

Nextをクリックして進めましょう。
インストールしたいソフトウェアを選んでください、という画面に変わります。

初期状態では全てにチェックが入っているはずです。
全てにチェックを入れたまま、Nextをクリックしてください。

XAMPPのインストール先を指定する画面になりました。
デフォルトの「C:\xampp」のままでOKです。
Nextをクリックしてください。


  ↓

LanguageもデフォルトのEnglishのまま、Nextをクリックします。

“BitNami for XAMPP”の紹介が表示されます。
チェックを入れて「Next」をクリックすると、ブラウザでアプリケーションの紹介ページが開かれます。今回BitNamiは必要ないので、チェックを外してNextをクリック。

インストールの準備が出来ました、という画面になります。
Nextをクリックするとインストールが実行されます。
完了までしばらく待ちましょう。


  ↓

途中でセキュリティ警告が出る場合があります。
その場合は「アクセスを許可」を選択してください。

インストール完了画面に切り替わりました。

点線部にチェックを入れて「Finish」をクリックすると、XAMPPのコントロールパネルが経ち画がります。続けて設定を行う方はチェックを入れておいて下さい。

次回からのXAMPP起動

XAMPPはインストール時に、自動でデスクトップにショートカットアイコンを作成してくれません。使用する時にはwindowsのスタートボタンから、「XAMPP」内にあるXAMPP Control Panelをクリックします。面倒な方はショートカットを作っておいても良いかもしれません。

3.XAMPPの動作確認

XAMPPのコントロールパネルを開いてください。

ApacheMySQL2つのStartボタンをクリックしてください。


  ↓

上図のようにApacheとMySQLが動いている状態になったら、
ブラウザを立ち上げてURLバーに「http://localhost 」と入力して開いてみましょう。

下図のような画面が表示されれば、インストールが完了し、正常に起動しています。

次回、WordPressを導入していきましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×