これからWordPressでショップサイトを作成していきます。そのために、まず、ご自身のパソコンの中でWordPressが動かせるようにローカル環境を作っていきましょう。
今回はwindowsで使用するXAMPPのインストール方法を解説します。
Macの方は、こちらの動画講座 https://ai.skillhub.jp/courses/187 を参考に、MAMPを導入してください。
１.ローカル開発環境とは
「ローカル環境」とは、個人のコンピューター内に構築された環境を指します。 HTMLやCSSはテキストエディタでコードを書いて、そのままブラウザで確認してきましたよね。しかし、WordPress(PHP)はコードを書いてファイルを保存→ブラウザで確認しようとしても上手く動いてくれません。
そのため、ローカル環境でこうしたプログラム/アプリケーションを動かせるようにする必要があります。この、自分のパソコンだけで開発や確認が出来る状態にローカル環境をカスタマイズすることを「ローカル開発環境」を作ると言います。
簡単にまとめてしまうと… Windows/MacそのままだとWordPressは動かないので、動かせる状態にしよう。 という事です。
MAMPとXAMPP
WordPressサイトを作成する際、制作環境作りに多く使用されているのが * Windowsの場合は「XAMPP」 * Macの場合は「MAMP」
というソフトウェアです。
どちらもweb開発環境を立ち上げるために必要なソフトウェアをまとめた（パッケージ化した）もので、インストールと初期設定を行うだけでローカル環境内でWordPressを動かすことが出来るようになります。
２.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をクリックします。面倒な方はショートカットを作っておいても良いかもしれません。
３.XAMPPの動作確認
XAMPPのコントロールパネルを開いてください。
ApacheとMySQL２つのStartボタンをクリックしてください。
↓
上図のようにApacheとMySQLが動いている状態になったら、 ブラウザを立ち上げてURLバーに「http://localhost 」と入力して開いてみましょう。
下図のような画面が表示されれば、インストールが完了し、正常に起動しています。
次回、WordPressを導入していきましょう。