XAMPP(ザンプ)を使ってWordpressをパソコン内のローカル環境に構築した時の全手順をまとめました。
稼働中の本番サイトにアップロードする前にテストしたり、新しいプログラムを開発したり...ローカル環境は世界にWebを公開する前にパソコン一台で色々なテストができるテスト環境です。
XAMPPを使えばApacheやMySQLといったサーバーの知識がなくても簡単にPCを仮想Webサーバーにすることができ、すぐにPC内にローカル環境を構築することが出来ます。
ローカル環境にWordpressを構築しておくと、本番サイトに新しいテーマやプラグインを導入する前にお試しやテストができます。
また、一度構築しておくとオフライン環境でもWordpressが動かせます！
サイトやブログを運営しているなら是非整えておきたいローカル環境。
今回紹介しているソフトウェアは全て無料で利用できます。
僕は自作テーマを作る際にサーバー代をケチって作ったのが始まりでした。
PC内にWordpressを構築しローカル環境で動作させる方法です。
この記事の目次
XAMPPでWordpressローカル環境を構築する方法
では順番にやっていきましょう！
画像を見ながらやってもらえれば1時間もかからないと思いますのでご安心を。
想像通りの長文になりましたのでセキュリティー設定は別ページにしました。
(この記事内にそのページのリンクを貼っています。)
XAMPP(ザンプ)とは？
まず初めに今回パソコン内にローカル環境を作るのに役立ってくれるXAMPPというソフトについて触れておきます。
読みにくい名前がついている理由は、WEBアプリケーションの開発環境に必要なソフトウェアの頭文字を組み合わせたものだからです。
-WindowsやMac、LinaxなどいろんなOSで使えること。
A：Apache
-世界中で使用されるWEBサーバーソフトウェア。
M：MySQL(新バージョンではMariaDB)
-データベースに関するソフトウェア。
P：PHP
-プログラミング言語のひとつ。
P：Perl
-プログラミング言語のひとつ。
Webサーバーとして稼働するのに必要なソフトウェアがパッケージ化されており、XAMPPをインストールするだけでパソコンにWebサーバーと同様の機能を持たせることが出来るのです！
XAMPPのインストール方法
XAMPPをパソコンにインストールする方法です。
英語とドイツ語しか対応していませんが、一つ一つは簡単なので大丈夫。
まず公式サイトから本体をダウンロードしましょう。
【公式サイトのダウンロードページ】
XAMPP Installers and Downloads for Apache Friends
XAMPP本体のダウンロード
ダウンロードページに移動したら、パソコンのOSに合ったファイルをダウンロードします。
僕はWindows10なのでこちら...素晴らしい！
XAMPPの実行ファイル
ダウンロードしたexeファイルをダブルクリックしてインストーラーを立ち上げましょう。
すると「It seems you have an antivirus running. In some cases,this may～」という文章が出ます。
アンチウイルスを実行しているようです。 場合によっては、これによりソフトウェアのインストールが遅くなったり、干渉したりすることがあります。 詳細については、以下をご覧ください。
http://apachefriends.org/en/faq-xampp-windows.html#antivirus
インストールを続行しますか？
不具合が出たらウイルスバスターを疑いましょう。
Windowsファイアウォールは問題なしでした。YESをクリック。
進むと「Important! Because an activated User Account Control (UAC) on your system～」と出ます。
重要！システムでアクティブ化されたユーザーアカウント制御（UAC）のため、XAMPPの一部の機能が制限されている可能性があります。 UACでは、C：¥ProgramFiles（x86）にインストールしないでください（書き込み権限がありません）。または、この設定後にmsconfigを使用してUACを非アクティブ化します。
要するにXAMPPはC:ProgramFilesフォルダ以外にインストールしてね！ということです。
UACを無効化する方法も一応ありますが、玄人向けです…
セットアップウィザードが立ち上がりますので、Nextをクリック。
WordPressに必要なソフトのみ選択。
続いてコンポーネントを選ぶ画面がでます。
そのままNextを押しても問題ないのですが、ここではWordpressの動作に必要なソフトウェアのみをインストールします。
・MySQL
・PHP
・phpMyAdmin
の４つがあれば問題なく動作しますので画像の通りにチェックを絞ります。
XAMPPのインストール先を選ぶ
続いてXAMPPをインストールするフォルダを選択します。
こちらもそのままの設定でNextを押してCドライブにインストールしてもいいのですが、Cドライブはパソコンにソフトなどを入れるごとに肥大化していきますので、僕は余裕のあるDドライブに選びなおしました。
インストール先をDドライブに変更
ファイルパス右側にあるフォルダマークをクリックしてインストール先を変更します。
先に作っておいたDドライブ内のxamppというフォルダを指定しました。
以前のバージョンではDドライブにインストールすると不具合が出てしまってダメだったのですが、現在のバージョンはドライブDにインストールしても問題なく動作します。
また、ここで指定するxamppフォルダ内のhtdocsフォルダにWordpressの本体を置くため、あまり深い階層にインストールするのはおすすめしません。(ローカルでWordpress内のファイルを編集する時に面倒or忘れる)
インストール先のフォルダとして下記のようなフォルダは不具合の原因となりますので避けましょう。
・特殊文字や環境依存文字が含まれるフォルダ
・「test aa」のように空白が含まれるフォルダ
なおXAMPPのインストール先は中身が空のフォルダしか選べないようです。
空のフォルダではない場合「The selected folder is not empty.Please select a different folder」と空のフォルダを選びなおすようにエラー画面が出ます。
コントロールパネルの言語を選択
コントロールパネルの言語を選びます。EnglishのままNextをクリック。
選べる言語は二種類でもう一つはドイツ語ですw
Bitnamiのチェックを外す
Bitnamiとは他のオープンソースのソフトを簡易インストールする機能です。
今回は必要ないのでチェックを外してNextをクリック。
-
- Nextをクリック
-
- インストール中の画面
Ready to Installの画面はそのままNextをクリック。
インストールが始まるので待つ。パソコンによるが数十秒～数分程度。
インストールの途中でApache HTTP Serverアプリケーションのアクセス許可がWindowsファイアウォールより求められるので許可する。
Win10の場合「Windowsファイアウォールによるアプリケーションの許可」から後で変更可能。
-
- インストール終了画面
-
- XAMPPのメニュー画面
インストールが終了したら「Do you want to start the Control Panel now?」のチェックが入っているのでそのままFinishをクリックすればXAMPPのコントロール画面が立ち上がる。
画像の赤で囲ったStartを押すとApacheとMySQLの起動ができます。Startを押すとStopにボタンが変わりこれを押すとApacheやMySQLが終了できます。
両方起動していないとローカル環境でWordpressにアクセスできないので覚えておいて下さい。
mysqldにもアクセス許可が必要
MySQLのStarを押すと初回のみアクセス許可を求められるので、先ほどのApacheの時と同じように許可しましょう。
Apacheは80番ポートを使用するので、Skypeとバッティングしてエラーが出るのが特に有名です。
その他のエラーも検索すると解決策が出てきますのでそちらも参考に解決して下さい←
-
- ApacheのAdminを押した画面
-
- MySQLのAdminを押した画面
XAMPPコントロールパネルでApacheとMySQLの両方が起動していることを確認したのち、メニューのAdminを押すとローカル環境で動作しているかチェックできます。
ブラウザで開いたページのURLがhttp://localhost/～になっていればローカル環境の構築成功です！
とりあえずここまでお疲れ様でした・ｗ・
XAMPPの終了方法と注意点
ローカル環境での作業が終わったらXAMPPを閉じるのですが注意点があります。
XAMPPを終了する際はStopボタンでApacheとMySQLの両方を終了しましょう。
Stopボタンを押さずにQuitや×ボタンで閉じてもPCの電源が入っていてオンラインだとサービスが起動したままになる？
（↑検証しました。筆者の環境ではApacheとMySQLを両方起動したままパソコンを落とした後、同Wi－Fi上にあるスマホでローカル環境にアクセスを試みましたが繋がりませんでした。
とはいえ、きちんと終了するに越したことはありません。）
XAMPPメニューを×ボタンで何度も閉じた場合
次にXAMPPのコントロールメニューの閉じ方ですが画面右上の×ボタンでは閉じずにQuitボタンを押して閉じることを心がけましょう。
×ボタンでウィンドウは閉じますが、裏で動いています。
もし×ボタンで閉じてて知らず知らずのうちにメニューバーに増殖したザンプはロゴを右クリックしてQuitを押すと閉じれますヨ！
(パソコンを再起動してもOK)
XAMPPのセキュリティ設定方法
時間はかからないので設定しておくことをおすすめしますが、飛ばして次のデータベースの作成に進んでもらってもOKです。
さて、XAMPPのインストールは無事に済みましたか？
次はセキュリティ設定です。簡単なので大丈夫です。
インストールしただけのXAMPPはそのままではセキュリティーが貧弱です。
どう貧弱なのかというと
・phpMyAdminにネットワーク経由でパスワード無しでアクセス可能。
な状態なのです。
ローカル環境を構築したPCがオンラインでそのPCのIPアドレスが分かれば、そのパソコンでは無くてもアクセスできてしまうということです。
いくらローカル環境で使うだけとはいえ、最低限の設定はしておきましょう。
データベースにパスワードを設定し、phpMyAdminにログインページを出現させ、ローカル環境を構築したパソコンでしかアクセスできないように設定します。
こちらもやることは結構簡単なのですが、長くなりますので別のページにまとめました。
WordPress用のデータベースを作成する
XAMPPによってWebサーバー用のソフトウェア「Apache」とデータベース用のソフトウェア「MySQL」、そしてそのデータベースをブラウザで管理できる「phpMyAdmin」がパソコンにインストールされました。
そしてWordpressのコアソフトウェアの大部分はPHP言語で書かれているので、ローカル環境にWordpressを導入するまであと一歩です。
WordPressをインストールするにはデータを保管しておくためのデータベースが必要になるので、データベースの作成を行います。
XAMPPでApacheとMySQLを起動する
XAMPPのメニューを開いてApacheとMySQLが起動しているのを確認したら、
MySQLのAdminボタンをクリックしphpMyAdminのページを開きます。
セキュリティ設定をした方はログイン画面が出ますので、phpMyAdminにログインします。
設定していない方はAdminを押せばphpMyAdminのページが直接開かれます。
左上の方にある「データベース」をクリック。
任意のデータベース名を入力して、データベースキャラクタセット(データベース内で扱う文字コード)を選んで作成をクリックする。
データベース名は分かりやすい英数字でOK！
照合順序はデフォルトの「utf8mb4_general_ci」でOK！
・utf-8：1文字3バイトの情報量
・utf8mb4：1文字4バイトの情報量
であり、utf8mb4が作られ絵文字に対応しました。
お寿司とビールの絵文字が同値判定されてしまう通称：寿司ビール問題。
作成をクリックして「データベース○○を作成しました。」という表示が出ればデータベースの作成完了です！
色んな表記がMySQLとなっていますが、XAMPPの新しいバージョンでは実はMariaDBというデータベースが使われています。MySQLから派生したデータベースで多くの場合より高速に動作する。
MariaDBのVer10.～がMySQLのVer5.5～に相対するのだとか・・・玄人向けで知っていても知らなくても操作方法に変わりはありません。
XAMPPにWordpressをインストールする方法
なが～くなりました。
これでやっとXAMPPにWordpressをインストールすることができます...
サクッと終わらせましょう！
まずWordpressを公式サイトよりダウンロードします。
【公式サイトのダウンロードページ】
ダウンロード | WordPress.org 日本語
WordPressのダウンロード
ページを少しスクロールしたところにダウンロードボタンがあるのでコチラをクリック！
xampp > htdocsにwordpressフォルダを移動する
ダウンロードしたファイルはZIP形式で圧縮されていますので解凍します。
(ファイルを右クリックした時のメニューからできることが多いヨ！)
解凍したWordpressフォルダをXAMPPをインストールしたフォルダ内のhtdocsに移動します。
これでWordpressの設置は完了しました。続いてセットアップします。
http://localhost/wordpress/を開く
コピーが完了したら、「http://localhost/wordpress/」にブラウザ経由でアクセスする。
リンクを作ったので、コチラをクリックしてもらってもOK！
(XAMPPのApacheとMySQLのStarを押して両方が起動している状態でアクセスすること。)
データベース情報の入力
ユーザー名：root
パスワード：セキュリティ設定で作成したパスワード
データベースのホスト名：localhost
テーブル接頭辞：wp_
セキュリティ設定をした方は、ユーザ名とパスワードはphpMyAdminのログイン画面のものと同じです。
セキュリティ設定を行っていない方はパスワードを空白で進めます。
データベースのホスト名は「localhost」でOK、接頭辞は「WP_」でOK！
入力し終わったら送信を押す。
入力したデータベース情報に問題が無ければ、この画面になるのでインストール実行をクリック。
サイト情報の入力
続いてWordpressの5分間インストールプロセスがスタートする。有名らしい。
ユーザー名：任意のユーザー名(ログインに必要)
パスワード：任意のパスワード(ログインに必要なのでメモする)
メールアドレス：サーバーにメールの設定をしないと届きません。
検索エンジンでの表示：インデックスしないようにする。
言葉通りで任意の項目が多いので大丈夫だと思います。
注意するならユーザー名とパスワードはWordpressの管理画面(ダッシュボード)にログインするのに必要なのでどこかにメモしましょう。特にランダム生成されたパスワードを使用する場合。
インデックスとは検索エンジンの検索結果に表示するかどうか、ローカル環境なのでインデックスしない設定にしましょう。
終わったらWordpressをインストールをクリック。
ログインを押す。
先ほどWordpressの有名な5分間インストールプロセスで入力したユーザー名とパスワードを入力してログインする。
・http://localhost/wordpress/wp-login.php
・http://localhost/wordpress/wp-admin
のどちらでもOK、お気に入りに登録しておくと便利かも。
ちなみにlocalhostは人が見やすいようにつけられたドメイン名で「localhost=127.0.0.1」です。
したがって「http://127.0.0.1/wordpress」とIPアドレスを直接指定してあげてもサイトにアクセスできますヨ！
無事にダッシュボードが表示されれば終了です。
ふぇーお疲れ様でした！！
まとめ
XAMPPを起動してローカル環境のWordpressにアクセスすることにより色々なテストが出来ます。
本番サイトでは試せないようなプラグインやテーマなどもどんどん動かしてみて自分のサイトにぴったりのレイアウトや機能を発掘して下さい・ｗ・
※ただしXAMPPと本番環境のPHPバージョンなどが異なっていることに要注意！
稀に新しいバージョンのPHPで追加された関数が使われていて、古いバージョンで動作している本番サーバーにアップロードしたら、そんな関数ありません！とエラーが出ることも…
逆もしかり、古い関数は推奨されません！と警告が出ることも…
僕は以前ローカル環境で開発したphpプログラムの一部が本番環境では使えませんでした。
とはいえ代替え関数もあります。失敗ができない場合はXAMPPにインストールされているプログラムのバージョンを本番環境と合わせておくという方法もありますが…
頭の片隅に置いておいてください。
XAMPPでローカル環境を構築したPCはWordpressをオフラインでも使えるので、山の中にノートパソコンを持ち込んで記事を書いていればそれはそれはカッコいい人になれます←
ではでは～お疲れさまでした。(二回目)
■関連記事
-
-
【解決】XAMPP終了時に「Error: Cannot create file～アクセスが拒否されました」とエラーが出る。
続きを見る
-
-
WordPressの画像にフルサイズしかない！特にXAMPPの初期設定ではフルサイズのみで他の画像サイズが作成されない。
続きを見る
