XAMPP でローカル環境を構築して WordPress をインストールする方法

XAMPP とは

「XAMPP」というのは、Windows などのOS上にPHP とMySQL の動作環境を、簡単に構築できる無料ソフトウェアです。ほかにApache やPerl などを含んだパッケージになっています。OS はWindows、Linux、Mac OS X に対応しています。

Web サーバーに設置したWordPress の管理画面から、HTML やCSS のテーマ編集はできますが、編集中にサイトを訪問している方がおられるかもしれません。また作業手順を誤って重要なファイルを消してしまったり、誤作動を引き起こしてしまえば、閲覧している方に迷惑をかけてしまいます。

ささいな変更であれば構わないでしょうが、バックアップを復旧する練習であったり、JavaScript を追加したり、テーマファイルの編集をする際には、できるだけローカル環境で作動チェックして、問題がないかを確認したうえで変更するようにするべきです。

インターネットに公開せずにWordPress を動かしてプラグインのチェックをしたり、HTML やCSS の編集を行う際には、ローカル環境を構築する必要があります。XAMPP を利用すれば、それが手軽にセットアップできます。

以下、その手順です。

XAMPP をダウンロードする

今回はWindows 上にセットアップするので、APAHCE FRIENDS のサイトから「XAMPP for Windows」をダウンロードします。

XAMPP Installers and Downloads for Apache Friends

XAMPP Installers and Downloads for Apache Friends

「Windows向け XAMPP」をクリックしてインストーラーをダウンロードすると、以下の画面に切り替わります。

XAMPP Download Success

いろいろな説明があるので読んでおきましょう。日本語をはじめ各国語に翻訳できます。最新情報を知りたければメーリングリストに登録しておくといいですね。

XAMPP をインストールする

ダウンロードできたらインストーラーを実行させます。

XAMPP インストーラー

英文でいろいろ聞いてきますが、変なウイルスやソフトを知らないうちにインストールされることもないので、心配しなくても大丈夫です。

PCにウイルス対策ソフトがインストールされていれば、以下のように表示されます。実行していいかどうかを聞いてくるので「Yes」を選択。

インストールしていいかの確認

Windows のユーザーアカウント制御(UAC)が有効になっていれば、以下のようなメッセージが表示されますが、こちらも「OK」を。

インストールしていいかの確認の次

セットアップがはじまります。「Next」をクリックして進みます。

インストール順01

何をインストールするのか詳細に選択できます。全部入れておいてかまいません。

インストール手順02

インストールするフォルダも特別な理由がなければ変更せず、そのままにしておきます。

インストール手順03

Bitnami」という無償ソフトを使ってWordPress のインストールまでを簡単にすることもできます。

インストール手順04

この記事では紹介しませんが、「Bitnami」に興味があればボックスにチェックを入れたままにしてください。該当ページをブラウザで自動的に開きます。

今回はチェックを外して「Next」をクリックします。

インストール手順06

あとは終わるのを待つだけです。

インストール手順07

これが表示されたらPCへのインストールは完了です。XAMPP コントロールパネルで初期設定を行うので、チェックを入れたまま「Finish」をクリックしてください。

XAMPP コントロールパネルを起動

XAMPP のコントロールパネルを起動したらこのようなウインドウが開きます。

XAMPP コントロールパネルの初期画面

いまから行うのはApache とMySQL を適切に動かすことです。

Apache とMySQL とは

Apache はWebサーバーを構築する無料ソフトウェアのひとつです。多くのレンタルサーバーで利用され、自宅PCにサーバーを構築する際にも利用される、古くから利用者の多い、最もポピュラーなソフトといえるでしょう。コミュニティも充実して、解説をしているサイトも豊富にあります。OS に依存せず使えるので、開発環境への制限が少ないのが特長です。

MySQL はリレーショナルデータベースマネジメントシステム(RDBMS)のひとつで、サーバー内のデータベースを管理します。こちらも企業から個人まで幅広く利用されています。サーバーの新規追加や移転の際などに利用することが多いでしょう。

では、順番に起動させていきます。

Apacheを起動する

まず一番上にある「Apache」の「Start」をクリックして起動させます。

XAMPPでApacheを起動させたところ

問題なく起動すれば「Apache」の部分が緑色に変わります。よく見ると下のメッセージ欄に

Status change detected: running

とあり、正しく作動していることが確認できます。

ポート番号を書き換える必要のある場合

もしかしたらエラーメッセージが表示されるかもしれません。ポート番号が使えない場合があります。「ポート番号」というのはインターネットを利用するサービスに不可欠の経路のようなものです。

しかし、たとえばWindows 8 では80番がSkype で使われています。したがって、XAMPP 用に他のポート番号を用意しなければなりません。

以下では、「Apache のポート番号を変更する手順」と「Skype のポート番号を変更する手順」紹介します。

Apache のポート番号を変更する手順

まずApache のポート番号を8888番に変更する手順です。「Config」をクリックして、「Apache (httpd.conf)」を選びます。

ポート番号を変更する

「メモ帳」が起動しますので、ファイルを編集します。

エディタでポート番号を8888番に変更する

少し下の方に

Listen 80

とあります。これを

Listen 8888

に変更してから保存してください。編集作業はこれだけです。

あとは、もう一度Apache を起動させて、変更が反映されているかを確認します。

XAMPPコントロールパネルでポート番号を8888番に変えたことを確認

このようにPort(s) で「8888」が表示されていれば、ポート番号が正しく変更されています。

いまの方法はこちらの本を参考にしました。

Skype のポート番号を変更する場合

こちらはSkype の公式ページでくわしい手順が画像つきで解説されていました。リンク先を参考にしてください。

Skype for Windows Desktopを使用するには、どのポートを開放する必要がありますか?

MySQLを起動する

続いてMySQLを起動します。同じように「Start」をクリックしてください。すると、このように、とくに問題なく作動するはずです。

XAMPPコントロールパネルでMySQLも起動したところ

これでXAMPP コントロールパネルでの設定は終了です。基本的には2回クリックするだけ。簡単でしたね。

ブラウザでXAMPP の管理画面を開く

ブラウザを起動してローカル環境のURL にアクセスします。

http://localhost/

http://localhost:8888/ (ポート番号を変更している場合)

と打ち込んでください。

ブラウザでローカル環境にアクセスした画面

この画面が表示されたら「日本語」を選択しましょう。

XAMPP 1.8.3の初期画面

XAMPP Windows版へようこそ!
おめでとうございます:
システム上にXAMPPが正しくインストールされました!

と表示されたら成功です。XAMPPは正しくインストールされています。

MySQLのパスワードを変更する

次にMySQL にパスワードの設定を行います。管理画面メニューの「セキュリティ」をクリックします。

XAMPP 1.8.3 で「セキュリティ」へ行く

以下のように、文字化けをしている場合には、エンコードを変更してみましょう。

文字化けした画面

エンコード処理を変更する方法

方法は2つありますが難易度はかなり違います。

ブラウザでエンコード処理を変更する(易しい)

ブラウザのツールにエンコードを変更する機能がついているので、その機能を利用します。

たとえばGoogle Chrome であれば、右上のツールボタンを押し、「その他のツール(L)」→「エンコード(E)」で変更できます。

「php.ini」ファイルでエンコード処理を変更する(難しい)

XAMPP のファイルを編集してエンコード処理を設定したい場合には、以下のリンク先が参考になります。

ただし、初心者には難しいので、ブラウザで変更する方が簡単です。

XAMPP セキュリティ画面

正しい表示はこのような画面です。

XAMPP Windows版   Security Section 画面

表示されているように、いまの状態ではステータスに要注意マークで警告がされています。真ん中あたりにある

そのような問題を全て解消するには、単純に次のツールを使ってください。

=> http://localhost/security/xamppsecurity.php <= [localhostからのみアクセスできます。]

とあるリンク先で、パスワードを設定します。

XAMPPのセキュリティ設定

パスワードを入力し、「phpMyAdmin を検出しました。」で「cookie」にチェックを入れてから、さいごに「パスワードを変更しました。」をクリックします。

XAMPP Windows版   Security Section【root パスワード変更】

パスワードの変更が完了すると、MySQL の再起動を指示されます。「Stop」→「Start」で再起動させましょう。

XAMPPコントロールパネルで「Stop」して「Start」する

再起動させてから、ブラウザに戻り、XAMPP のステータス画面の「MySQL データベース」の「ステータス」が「開始」(緑色)なら作業は完了です。

XAMPP 1.8.3ステータスで「MySQL」が作動中

WordPress を使うための準備

基本的にはここまでで、ほとんどの作業を終えています。もしPHPのプログミングなどで利用するなら、これ以上の作業は必要ありません。

ここから先はWordPress 用にMySQL にデータベースを作成し、WordPressをインストールしていく工程になります。

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

phpMyAdmin にログインします。XAMPP の管理画面メニューからでも、コントロールパネルの「Admin」からでもログイン画面に行けます。

XAMPP 1.8.3(1) 画面からphpMyAdminへ

または

XAMPPからphpMyAdminへログインする

「ユーザー名」には「root」を、「パスワード」には先ほど「MySQL のセキュリティコンソール & XAMPP のディレクトリ制御」で設定したパスワードを入力して「実行」をクリックしてください。

phpMyAdminのログイン画面

ログイン後の画面です。さっそく新しいデータベースを作成するので、上部にある「データベース」をクリックします。

phpMyAdmin でデータベースを作成する

「データベースを作成する」下にあるボックスに任意のデータベース名を入力して、「作成」をクリックします。ここでは「wordpress」にしてみました。

phpMyAdmin でデータベースを作成する手順

データベースが作成されると、以下のような表示が出ます。

データベースを作成したところ

データベース欄のいちばん下に「wordpress」ができているのがわかります。作業はこれで完了です。

WordPress のインストール時に必要になる情報は以下の通りになります。

  • データベース名: wordpress
  • データベースのユーザー名: root
  • データベースのパスワード: 設定したパスワード
  • データベースのホスト名: localhost

忘れないようにメモしておくといいでしょう。

WordPressをインストールする

あとはWordPress をダウンロードして、サーバー内にインストールするだけです。

公式サイトからダウンロードする

まずはダウンロードから。

WordPress › 日本語の公式サイト

WordPress.ORG 日本語 (公式サイト)

ここから最新版をzip ファイルでダウンロードします。

ダウンロードしたZIPファイルを解凍して移動させる

このままではインストールできないので、ダウンロードしたzip ファイルを解凍して、展開します。

zipファイル

展開したフォルダ内に「WordPress」フォルダがあります。そこにある全ファイルを「ローカルディスク(C:)\xampp\htdocs」内にコピーしましょう。その際、もともと「htdocs」にあるファイルは全部削除してしまってもかまいません。

インストーラーもなくコピーするだけでいいので簡単ですね。

ローカル環境のURLにブラウザでアクセスする

これが最後のステップです。ブラウザでローカル環境にアクセスしましょう。

http://localhost/

http://localhost:8888/ (ポート番号8888に変更したとき)

このような画面があらわれます。

WordPress › 設定構成ファイル

「さあ、始めましょう!」をクリックします。

データベースの情報を入力する

先ほどメモしたデータベース情報を入力します。「テーブル接頭辞」は、セキュリティ系プラグインを使えば簡単に変更ができますので、いまはこのままでもかまいません。

WordPress › 設定構成ファイル 初期設定項目の入力

入力を終えたら「送信」をクリック。

WordPress › 設定構成ファイル 設定完了

「インストール実行」をクリックします。

サイトの基本情報を入力する

5分間インストールプロセスです。表示させたい「サイト名」「ユーザー名」、それから「パスワード」と「メールアドレス」を登録します。ローカル環境なので「プライバシー」のチェックを外して、検索エンジンにインデックスをさせないようにしておきましょう。

WordPress › インストール

「WordPress をインストール」で最後の設定が終わります。

管理画面にログインする

じつはWordPress のインストール作業はこれだけです。ここまでの準備が長かっただけに、あっけない感じがしますね。

WordPress › インストール 完了画面

登録した「ユーザー名」と「パスワード」でログインして、ローカル環境のWordPress をはじめてください。

ローカル環境 › ログイン

今後のローカル環境の利用手順

最後に これからローカル環境のWordPress にアクセスしようとするときの手順を書いておきます。

【WordPress にログインする手順】

  1. XAMPP コントロールパネルを起動(xampp-control.exe)
  2. Apache の「Start」をクリックして起動
  3. MySQL の「Start」をクリックして起動
  4. WordPress にブラウザでアクセスしてログイン

そのさいログイン画面へのURLは

http://localhost/wp-admin/

です。これだけブックマークに登録しておくと素早く行くことができるので便利です。

【phpMyAdmin へのログイン】

上記の4.で以下のリンク先へ行きます。

http://localhost/phpmyadmin/

関連記事

プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

ソーシャルボタンを作るの備忘録 各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに…

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…