XAMPPを使ってWordPressをローカル環境に構築する方法。オフラインでも使えるテスト環境は素敵に無敵!

2021-02-16

XAMPP(ザンプ)を使ってWordpressをパソコン内のローカル環境に構築した時の全手順をまとめました。

稼働中の本番サイトにアップロードする前にテストしたり、新しいプログラムを開発したり...ローカル環境は世界にWebを公開する前にパソコン一台で色々なテストができるテスト環境です。

XAMPPを使えばApacheやMySQLといったサーバーの知識がなくても簡単にPCを仮想Webサーバーにすることができ、すぐにPC内にローカル環境を構築することが出来ます。

ローカル環境にWordpressを構築しておくと、本番サイトに新しいテーマやプラグインを導入する前にお試しやテストができます。
また、一度構築しておくとオフライン環境でもWordpressが動かせます!

サイトやブログを運営しているなら是非整えておきたいローカル環境。
今回紹介しているソフトウェアは全て無料で利用できます。
僕は自作テーマを作る際にサーバー代をケチって作ったのが始まりでした。

XAMPPのインストール方法と主な使い方、セキュリティー設定。
PC内にWordpressを構築しローカル環境で動作させる方法です。

XAMPPでWordpressローカル環境を構築する方法

では順番にやっていきましょう!
画像を見ながらやってもらえれば1時間もかからないと思いますのでご安心を。
想像通りの長文になりましたのでセキュリティー設定は別ページにしました。
(この記事内にそのページのリンクを貼っています。)

XAMPP(ザンプ)とは?

まず初めに今回パソコン内にローカル環境を作るのに役立ってくれるXAMPPというソフトについて触れておきます。
読みにくい名前がついている理由は、WEBアプリケーションの開発環境に必要なソフトウェアの頭文字を組み合わせたものだからです。

X:クロスプラットフォーム
-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インストール方法1

XAMPP本体のダウンロード

ダウンロードページに移動したら、パソコンのOSに合ったファイルをダウンロードします。
僕はWindows10なのでこちら...素晴らしい!

XAMPPインストール方法2

XAMPPの実行ファイル

ダウンロードしたexeファイルをダブルクリックしてインストーラーを立ち上げましょう。

XAMPPインストール方法3

すると「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~」と出ます。
XAMPPインストール方法4

【日本語訳】
重要!システムでアクティブ化されたユーザーアカウント制御(UAC)のため、XAMPPの一部の機能が制限されている可能性があります。 UACでは、C:¥ProgramFiles(x86)にインストールしないでください(書き込み権限がありません)。または、この設定後にmsconfigを使用してUACを非アクティブ化します。

要するにXAMPPはC:ProgramFilesフォルダ以外にインストールしてね!ということです。
UACを無効化する方法も一応ありますが、玄人向けです…
XAMPPインストール方法5セットアップウィザードが立ち上がりますので、Nextをクリック。

XAMPPインストール方法6

WordPressに必要なソフトのみ選択。

続いてコンポーネントを選ぶ画面がでます。
そのままNextを押しても問題ないのですが、ここではWordpressの動作に必要なソフトウェアのみをインストールします。

・Apache
・MySQL
・PHP
・phpMyAdmin

の4つがあれば問題なく動作しますので画像の通りにチェックを絞ります。

XAMPPインストール方法7

XAMPPのインストール先を選ぶ

続いてXAMPPをインストールするフォルダを選択します。
こちらもそのままの設定でNextを押してCドライブにインストールしてもいいのですが、Cドライブはパソコンにソフトなどを入れるごとに肥大化していきますので、僕は余裕のあるDドライブに選びなおしました。

XAMPPインストール方法8

インストール先をDドライブに変更

ファイルパス右側にあるフォルダマークをクリックしてインストール先を変更します。
先に作っておいたDドライブ内のxamppというフォルダを指定しました。

以前のバージョンではDドライブにインストールすると不具合が出てしまってダメだったのですが、現在のバージョンはドライブDにインストールしても問題なく動作します。

また、ここで指定するxamppフォルダ内のhtdocsフォルダにWordpressの本体を置くため、あまり深い階層にインストールするのはおすすめしません。(ローカルでWordpress内のファイルを編集する時に面倒or忘れる)

インストール先のフォルダとして下記のようなフォルダは不具合の原因となりますので避けましょう。

・日本語が含まれるフォルダ
・特殊文字や環境依存文字が含まれるフォルダ
・「test aa」のように空白が含まれるフォルダ

なおXAMPPのインストール先は中身が空のフォルダしか選べないようです。
XAMPPインストール方法9
空のフォルダではない場合「The selected folder is not empty.Please select a different folder」と空のフォルダを選びなおすようにエラー画面が出ます。

XAMPPインストール方法10

コントロールパネルの言語を選択

コントロールパネルの言語を選びます。EnglishのままNextをクリック。
選べる言語は二種類でもう一つはドイツ語ですw

XAMPPインストール方法11

Bitnamiのチェックを外す

Bitnamiとは他のオープンソースのソフトを簡易インストールする機能です。
今回は必要ないのでチェックを外してNextをクリック。

Ready to Installの画面はそのままNextをクリック。
インストールが始まるので待つ。パソコンによるが数十秒~数分程度。

XAMPPインストール方法14

インストールの途中でApache HTTP Serverアプリケーションのアクセス許可がWindowsファイアウォールより求められるので許可する。

サーバーシステムなので念のためプライベートネットワークのみの許可の方が良いかも。
Win10の場合「Windowsファイアウォールによるアプリケーションの許可」から後で変更可能。

インストールが終了したら「Do you want to start the Control Panel now?」のチェックが入っているのでそのままFinishをクリックすればXAMPPのコントロール画面が立ち上がる。

画像の赤で囲ったStartを押すとApacheとMySQLの起動ができます。Startを押すとStopにボタンが変わりこれを押すとApacheやMySQLが終了できます。

両方起動していないとローカル環境でWordpressにアクセスできないので覚えておいて下さい。

XAMPPインストール方法17

mysqldにもアクセス許可が必要

MySQLのStarを押すと初回のみアクセス許可を求められるので、先ほどのApacheの時と同じように許可しましょう。

XAMPPはサーバー関係のソフトを一度にインストールするので、うまく動かないことも多いです。
Apacheは80番ポートを使用するので、Skypeとバッティングしてエラーが出るのが特に有名です。
その他のエラーも検索すると解決策が出てきますのでそちらも参考に解決して下さい←

XAMPPコントロールパネルでApacheとMySQLの両方が起動していることを確認したのち、メニューのAdminを押すとローカル環境で動作しているかチェックできます。

ブラウザで開いたページのURLがhttp://localhost/~になっていればローカル環境の構築成功です!

とりあえずここまでお疲れ様でした・w・

XAMPPの終了方法と注意点

ローカル環境での作業が終わったらXAMPPを閉じるのですが注意点があります。

手順はApacheとMySQLの停止(Stopボタン)→Quitでメニューを閉じる。

XAMPPを終了する際はStopボタンでApacheとMySQLの両方を終了しましょう。
Stopボタンを押さずにQuitや×ボタンで閉じてもPCの電源が入っていてオンラインだとサービスが起動したままになる?
(↑検証しました。筆者の環境ではApacheとMySQLを両方起動したままパソコンを落とした後、同Wi-Fi上にあるスマホでローカル環境にアクセスを試みましたが繋がりませんでした。
とはいえ、きちんと終了するに越したことはありません。)

XAMPPインストール方法20

XAMPPメニューを×ボタンで何度も閉じた場合

次にXAMPPのコントロールメニューの閉じ方ですが画面右上の×ボタンでは閉じずにQuitボタンを押して閉じることを心がけましょう。
×ボタンでウィンドウは閉じますが、裏で動いています。

もし×ボタンで閉じてて知らず知らずのうちにメニューバーに増殖したザンプはロゴを右クリックしてQuitを押すと閉じれますヨ!
(パソコンを再起動してもOK)

XAMPPのセキュリティ設定方法

このセキュリティ設定をしなくてもローカル環境でWordpressを動かすことは可能です。
時間はかからないので設定しておくことをおすすめしますが、飛ばして次のデータベースの作成に進んでもらってもOKです。

さて、XAMPPのインストールは無事に済みましたか?
次はセキュリティ設定です。簡単なので大丈夫です。
インストールしただけのXAMPPはそのままではセキュリティーが貧弱です。
どう貧弱なのかというと

・MySQL(MariaDB)にパスワードが設定されていない。
・phpMyAdminにネットワーク経由でパスワード無しでアクセス可能。

な状態なのです。

ローカル環境を構築したPCがオンラインでそのPCのIPアドレスが分かれば、そのパソコンでは無くてもアクセスできてしまうということです。
いくらローカル環境で使うだけとはいえ、最低限の設定はしておきましょう。

データベースにパスワードを設定し、phpMyAdminにログインページを出現させ、ローカル環境を構築したパソコンでしかアクセスできないように設定します。
こちらもやることは結構簡単なのですが、長くなりますので別のページにまとめました。

【サイト内別記事】
MySQL(MariaDB)にパスワードを設定する
(次に進んでもらいたい項目に飛びます、必須ではない項目もあるので適宜読んで下さい。)

WordPress用のデータベースを作成する

XAMPPによってWebサーバー用のソフトウェア「Apache」とデータベース用のソフトウェア「MySQL」、そしてそのデータベースをブラウザで管理できる「phpMyAdmin」がパソコンにインストールされました。
そしてWordpressのコアソフトウェアの大部分はPHP言語で書かれているので、ローカル環境にWordpressを導入するまであと一歩です。

WordPressをインストールするにはデータを保管しておくためのデータベースが必要になるので、データベースの作成を行います。

XAMPPデータベース作成1

XAMPPでApacheとMySQLを起動する

XAMPPのメニューを開いてApacheとMySQLが起動しているのを確認したら、
MySQLのAdminボタンをクリックしphpMyAdminのページを開きます。

XAMPPデータベース作成2

セキュリティ設定をした方はログイン画面が出ますので、phpMyAdminにログインします。
設定していない方はAdminを押せばphpMyAdminのページが直接開かれます。
左上の方にある「データベース」をクリック。

XAMPPデータベース作成3任意のデータベース名を入力して、データベースキャラクタセット(データベース内で扱う文字コード)を選んで作成をクリックする。

データベース名は分かりやすい英数字でOK!
照合順序はデフォルトの「utf8mb4_general_ci」でOK!

■コラム「utf-8とutf-8mb4の違いについて」
・utf-8:1文字3バイトの情報量
・utf8mb4:1文字4バイトの情報量
であり、utf8mb4が作られ絵文字に対応しました。
お寿司とビールの絵文字が同値判定されてしまう通称:寿司ビール問題。

XAMPPデータベース作成4作成をクリックして「データベース○○を作成しました。」という表示が出ればデータベースの作成完了です!

■コラム「新しいデータベースMariaDB」
色んな表記がMySQLとなっていますが、XAMPPの新しいバージョンでは実はMariaDBというデータベースが使われています。MySQLから派生したデータベースで多くの場合より高速に動作する。
MariaDBのVer10.~がMySQLのVer5.5~に相対するのだとか・・・玄人向けで知っていても知らなくても操作方法に変わりはありません。
今回インストールしたXAMPPのマリアちゃんはVer10.4.17でした。

XAMPPにWordpressをインストールする方法

なが~くなりました。
これでやっとXAMPPにWordpressをインストールすることができます...
サクッと終わらせましょう!

まずWordpressを公式サイトよりダウンロードします。
【公式サイトのダウンロードページ】
ダウンロード | WordPress.org 日本語

XAMPP_Wordpressインストール方法1

WordPressのダウンロード

ページを少しスクロールしたところにダウンロードボタンがあるのでコチラをクリック!

XAMPP_Wordpressインストール方法2

xampp > htdocsにwordpressフォルダを移動する

ダウンロードしたファイルはZIP形式で圧縮されていますので解凍します。
(ファイルを右クリックした時のメニューからできることが多いヨ!)

解凍したWordpressフォルダをXAMPPをインストールしたフォルダ内のhtdocsに移動します。

ドライブD(変更していない場合はC) > xampp > htdocs

これでWordpressの設置は完了しました。続いてセットアップします。

XAMPP_Wordpressインストール方法3

http://localhost/wordpress/を開く

コピーが完了したら、「http://localhost/wordpress/」にブラウザ経由でアクセスする。
リンクを作ったので、コチラをクリックしてもらってもOK!
(XAMPPのApacheとMySQLのStarを押して両方が起動している状態でアクセスすること。)

XAMPP_Wordpressインストール方法4

データベース情報の入力

データベース名:先ほど作成したデータベース名
ユーザー名:root
パスワード:セキュリティ設定で作成したパスワード
データベースのホスト名:localhost
テーブル接頭辞:wp_

セキュリティ設定をした方は、ユーザ名とパスワードはphpMyAdminのログイン画面のものと同じです。
セキュリティ設定を行っていない方はパスワードを空白で進めます。
データベースのホスト名は「localhost」でOK、接頭辞は「WP_」でOK!

入力し終わったら送信を押す。

XAMPP_Wordpressインストール方法5入力したデータベース情報に問題が無ければ、この画面になるのでインストール実行をクリック。

XAMPP_Wordpressインストール方法6

サイト情報の入力

続いてWordpressの5分間インストールプロセスがスタートする。有名らしい。

サイトのタイトル:任意のサイト名
ユーザー名:任意のユーザー名(ログインに必要)
パスワード:任意のパスワード(ログインに必要なのでメモする)
メールアドレス:サーバーにメールの設定をしないと届きません。
検索エンジンでの表示:インデックスしないようにする。

言葉通りで任意の項目が多いので大丈夫だと思います。
注意するならユーザー名とパスワードはWordpressの管理画面(ダッシュボード)にログインするのに必要なのでどこかにメモしましょう。特にランダム生成されたパスワードを使用する場合。

インデックスとは検索エンジンの検索結果に表示するかどうか、ローカル環境なのでインデックスしない設定にしましょう。

終わったらWordpressをインストールをクリック。

XAMPP_Wordpressインストール方法7
ログインを押す。

XAMPP_Wordpressインストール方法8
先ほどWordpressの有名な5分間インストールプロセスで入力したユーザー名とパスワードを入力してログインする。

ローカル環境でのWordpressログイン画面のURL(↑の画面)
・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インストール方法9

無事にダッシュボードが表示されれば終了です。

ふぇーお疲れ様でした!!

まとめ

XAMPPを起動してローカル環境のWordpressにアクセスすることにより色々なテストが出来ます。
本番サイトでは試せないようなプラグインやテーマなどもどんどん動かしてみて自分のサイトにぴったりのレイアウトや機能を発掘して下さい・w・

※ただしXAMPPと本番環境のPHPバージョンなどが異なっていることに要注意!
稀に新しいバージョンのPHPで追加された関数が使われていて、古いバージョンで動作している本番サーバーにアップロードしたら、そんな関数ありません!とエラーが出ることも…
逆もしかり、古い関数は推奨されません!と警告が出ることも…

僕は以前ローカル環境で開発したphpプログラムの一部が本番環境では使えませんでした。
とはいえ代替え関数もあります。失敗ができない場合はXAMPPにインストールされているプログラムのバージョンを本番環境と合わせておくという方法もありますが…
頭の片隅に置いておいてください。

XAMPPでローカル環境を構築したPCはWordpressをオフラインでも使えるので、山の中にノートパソコンを持ち込んで記事を書いていればそれはそれはカッコいい人になれます←

ではでは~お疲れさまでした。(二回目)

■関連記事

XAMPP終了時エラー1
【解決】XAMPP終了時に「Error: Cannot create file~アクセスが拒否されました」とエラーが出る。

続きを見る

Wordpress_画像がフルサイズしかない1
WordPressの画像にフルサイズしかない!特にXAMPPの初期設定ではフルサイズのみで他の画像サイズが作成されない。

続きを見る

-Wordpress

© 2021 ソロ学