It's my pc life…

ふと気がつけばいつの間にやら PC と出会い20年超の、初級者以上中級者未満の徒然 PC 生活記録

ローカル環境に WordPress 動作環境を構築・インストールする

2015年7月10日 2016年1月1日

 WordPress は PHP と MySQL を利用して動作するため、WordPress を使用するには PHP と MySQL が動作する Web サーバーに導入する必要があるが、ローカル環境、すなわち自分の PC 上で WordPress 動作環境を構築すれば、サーバーを事前に用意する必要がなく、しかもテーマの開発や修正に各種試験等、WordPress を使用していく上で様々な利便性がある。

 そのためには PC に WordPress が動作するレンタルサーバーと同じ環境を構築する必要があるが、そのために使用するのが「XAMPP(ザンプ)」と呼ばれるソフトウェアになる。

XAMPP(ザンプ)とは

 XAMPP とは Web アプリケーション開発に必要なソフトウェア類をパッケージした Web サーバーソフトウェアのことで、WordPress の動作に必要な Apache(Webサーバーソフトウェア)、MySQL(データベース)と PHP(プログラム言語)、phpMyAdmin(データベース管理ツール)等、Web サーバーと同様の環境を再現するためのソフト類を一括して導入できる。

 その名前の由来は、Wikipedia によれば、

XAMPPは以下の文字から構成されている。

  • X – Windows、Linux、Mac OS X、Solarisのクロスプラットフォーム
  • A – ApacheのA
  • M – MySQLのM
  • P – PHPのP
  • P – PerlのP

元々は対応OSはLinuxのみであり、その頭文字Lを付けLAMPPと称したが、後に複数のOSに対応したためLをXに変えXAMPPとなった。

引用 – XAMPP – Wikipedia

 とのこと。X は Cross Platform のことを省略して示している。

 今回はこの XAMPP を使用して、WordPress をローカル環境で動作させるための Web サーバー機能をインストールしてみる。

公式サイトからのダウンロードと PC へのインストール

 まずは公式サイトから最新版の XAMPP をダウンロードし、インストーラーを起動する。
 2015年1月1日時点での最新版は「xampp-win32-5.6.3-0-VC11-installer.exe」。32bit版だが、64bit Windowsにも対応している。

150710-01

 インストーラーの表示は基本英語。ウイルス対策ソフトが使用中のPCにインストールされていると、起動してまず上記の画面が表示される。
 内容はウイルス対策ソフトが起動していると問題が起きることがある等の旨だが、このまま作業を続行するので「Yes」を選択して次に進む。

150710-02

 UAC(ユーザーアカウント制御)が設定されていると、続いて上記の画面が表示される。ここでも「Yes」を選択して次へ。

150710-03

 ようやくセットアップ開始。

150710-04

 まずはインストール内容の確認。内容がよく分からないようなら全て選択して「Next」を選択。

 ちなみに WordPress の動作に必要となるのは、

  • Apache
  • MySQL
  • PHP
  • phpMyAdmin

 この4つのみとなるので、WordPress 以外の用途には使用しないのならば、この4つのみにチェックを入れてインストールしてもいい。

150710-05

 インストールフォルダの選択。デフォルトでは「Program Files」ではなくルートディレクトリ直下となっているので、変更せずにそのままインストール推奨。
 XAMPP 他 WordPress 等必要なソフト類をひと通りインストールしたら最低でも約1GB以上は必要になるので、容量が比較的少ないSSD等を使用している場合は、これから先記事の追加、テーマの作成等で増加する分も見越した上で残容量に注意。

150710-06

 WordPress 導入を簡略化するソフト「Bitnami」の案内画面。チェックを入れておくと該当サイトページがブラウザで開くので、Bitnami を利用予定の場合はチェックを入れ、そうでない場合はチェックを外しておく。ここではチェックを外して無視しておく。

150710-07

 インストール準備完了画面。「Next」でインストール開始。

150710-08

 インストール経過画面。ここでも Bitnami の案内が表示されている。

150710-09

 上記画面表示で XAMPP のインストールは終了。起動後はまず XAMPP コントールパネルで初期設定を行う必要があるため、チェックを入れたまま「Finish」を選択。

 これで XAMPP のインストールは完了となる。

XAMPP コントロールパネルから初期設定を行う

 XAMPP インストール後、まずは XAMPP コントロールパネルを開いて初期設定等を行っていく。

150710-10

 いくつかの項目が並んでいるが、このパネルで行うことは基本的に「Apache」と「MySQL」(一番上と2番目の項目)を「Start」を押して起動するだけとなる。
 もし Skype 等を起動している場合、利用しているポート番号が重複して正しく起動しないことがあるため、そうした婆ポート番号等の設定を変更する必要がある。

 特に問題ないようなら、Web サーバー環境を構築する「Apache」を「Start」を押して起動してみる。するとファイアーウォールでブロックされたという旨の警告が出たので、一度 Windows のセキュリティ設定を見直してみる。

150710-11

 「プライベートネットワーク」にチェックを入れて「アクセスを許可する」を選択。

 続いてデータベースである「MySQL」を「Start」を押して起動すると、

150710-12

 同様のメッセージが表示されたので、同じく「プライベートネットワーク」にチェックを入れて「アクセスを許可する」を選択。ここら辺は PC 環境により色々と差違があるので要注意。

150710-13

 問題なく起動すれば、「Apache」「MySQL」それぞれの文字部分が緑色に変わり、「PID(s)」及び「Port(s)」に表示が現れる。
 下部ログ覧にも「Status change detected: running」と表示されていることを確認できれば、正常に動作完了していることが分かる。

 もし万が一ここでエラーが出て正しく起動しない場合、よく考えるエラー原因のひとつに「ポート番号の重複」がある。
 よくあるのが XAMPP をインストールした PC で Skype を使用している場合、使用ポートが両方とも「80」のため重複エラーとなり、結果 Apahce が起動しないこととなる。

 この場合 XAMPP あるいは Skype のポート番号を別の番号に変更すればよく、XAMPP から Apache のポート番号を変更するには「Config」から「Apache (httpd.conf)」を選択し、展開された記述内容を変更する必要がある。

 しかし今回は特に問題は起きずに無事起動できたため、ポート番号変更方法については割愛。

 これから PC で WordPress を編集するためには、まずこの XAMPP コントールパネルを起動し、上記のように「Apache」と「MySQL」を起動する必要がある。
 もし毎回この起動作業するのが煩わしい場合、「Modules Service」にチェックを入れておけばスタートアップ登録されるため、PC 起動と同時に自動的に Apache と MySQL も起動するようになる。

ブラウザの XAMPP 管理画面からセキュリティ設定を行う

 XAMPP コントールパネルからの設定が完了したら、ブラウザを起動してローカル環境の URL にアクセスする。ローカル環境の URL は初期状態から変更していない場合、

  • http://localhost/xampp/
  • localhost
  • 127.0.0.1

 上記のいずれかの URL で XAMPP 管理画面に移動できる。

150710-14

 もし言語が日本語以外に設定されていたら、「日本語」を選択。「XAMPP Windows 版にようこそ!」と表示されていたら、XAMPP のインストールは不備なく完了している。

 この管理画面では各種セキュリティの設定を行っていくため、メニューから「セキュリティ」を選択する。

150710-15

 このように文字化けしている場合、ブラウザのエンコードを変更するか、XAMPP の「php.ini」ファイルを直接編集することで正しく表示させることが可能。

 ブラウザのエンコード変更は手軽で大きなトラブルに繋がる恐れもないが、表示するたびに変更しなければならないのが欠点。
 対して「php.ini」の直接編集は一度行えばその後も正しく表示され続けるが、作業は初心者には難しく、また下手にいじると大きなトラブルに繋がる恐れがある。

 XAMPP 管理画面は一度設定してしまえばそれ以降開く機会はそれほど多くはないので、作業内容がよく分からないようならばブラウザのエンコード処理で済ませておくのが最も簡単で確実。
 今回は「php.ini」の編集ではなくブラウザのエンコード変更で済ませたため、「php.ini」の編集方法は特に明記していないが、そのうち機会があれば試してみようかと。

150710-16

 エンコードが正しく設定されれば、上記のように文字化けは消える。

 それでは初期状態のセキュリティ設定を見ていくが、上記はすでにセキュリティ設定を済ませてしまった画面のため、各ステータスが「安全」と表示されているが、初期状態だとここが赤文字で「要注意」と表示されているので、適切なセキュリティ設定をする必要がある。

 セキュリティ設定はその下に記載されている、

そのような問題をすべて修正するには、単純に次のツールを使ってください。
=> http://localhost/security/xamppsecurity.php <= [localhostからのみアクセスできます。]

 上記のリンク先から行うことができる。

150710-17

 パスワードを入力後、「phpMyAdminを検出しました。」の「cookie」にチェックを入れ、「パスワードを変更しました。」をクリック。「パスワードを変更しました。」ボタンの直前にある (File:c:\xampp\security\~) のチェックは外しておく。
 ここで選択したのは phpMyAdmin へのログイン方法をの選択項目で、「cookie」を選択すれば phpMyAdmin のログイン画面からのアクセスとなり分かりやすいため、ここでは「cookie」を選択しておく。

 ここで設定したパスワードは後に phpMyAdmin にログインする際に必要になるため、控えておくこと。またパスワードの前にある項目の MySQL SuperUser: root は phpMyAdmin にログインする際のデフォルトユーザー名となる。

 パスワード変更後MySQLの再起動が促されるため、再起動(XAMPPコントールパネルで一度「stop」をクリックし停止してから「Start」をクリック)後に再度ブラウザからXAMPP管理画面のセキュリティ及び、ステータスを確認すると、

150710-16
150710-18

 上記のように緑文字でセキュリティは「安全」、ステータスは「開始」となる。

 これで XAMPP のインストールは全て完了し、ローカル環境にWebサーバー同様の機能が備わったことになるが、これだけではまだ WordPress は動作しない。

 次は XAMPP コントロールパネルあるいはブラウザの管理画面から phpMyAdmin を起動し、WordPress で使用するデータベースの設定を行っていく。

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

 データベース作成は、データベース管理ツールの「phpMyAdmin」で行う。

150710-19

XAMPP コントロールパネルから MySQL の「Admin」をクリックするか、ブラウザ管理画面のサイドメニューから「phpMyAdmin」を選択すれば、 phpMyAdmin が起動する。

150710-20

 言語は日本語に設定し、ユーザー名にはログインユーザー名としてデフォルトで割り当てられている「root」を入力。パスワードは先ほどブラウザの管理画面で設定した MySQL のパスワードを入力する。

150710-21

 上記が phpMyAdmin のトップページ画面。ここでデータベースに関する設定を行っていく。ちなみに不自然に文字が消えている部分は、既に作成済みの個人のデータベース名を消しているだけ。

150710-22

 「データベース」タブをクリック。任意のデータベース名を入力、「照合順序」欄はWordPress公式でも指定されている「utf8_general_ci」を選択して「作成」をクリックすれば、データベースを作成できる。

 ここで作成したデータベース名は WordPress インストール時に入力する必要があるため、忘れないように控えておくこと。

WordPress をインストールする

 これでようやく WordPress をインストールするための準備は全て整ったので、これからいよいよ WordPress のインストールを行っていく。

最新版WordPress のダウンロードと解凍フォルダの移動

 まずは日本語版の公式サイトから、最新の WordPress(日本語版)をダウンロードして解凍。
 解凍してできた「wordpress」フォルダは、そのままインストールした XAMPP フォルダ内にある「htdocs」フォルダ内にコピーする。移動先フォルダの具体的な場所はXAMPPインストール時に変に操作していなければ、

 c:\xampp\htdocs

 となっているはずなので、ここにコピーする(もちろん移動でも可)。この際フォルダ名はデフォルトの「wordpress」のままでも良いが、もしこれから複数の WordPress を運営予定なら、分かりやすい名称に変更しておいた方が後々便利となる。

 解凍した wordpress フォルダの移動及び必要なら名称変更が完了したら、いよいよ WordPress のインストール作業に入る。インストール作業はブラウザ上から行うため、ブラウザから以下のいずれかのURLへアクセスする。

  • http://localhost/wordpress/
  • http://127.0.0.1/wordpress/

 127.0.0.1 はローカル・ループバック・アドレスという自分 (PC) 自身を指し示す特別なアドレスで、自身上で動作しているサービスへアクセスする場合に利用するアドレスのこと。
 そして localhost とは 127.0.0.1 を指すホスト名のことなので、つまり上記2つは全く同じアドレスということになる。

 また wordpress は解凍したデフォルトのフォルダ名そのままの場合での名称なので、もしフォルダ名を変更しているのなら、この部分は変更したフォルダ名に書き換える必要がある。

150710-23

 アクセスに成功すれば、上記画面が表示される。これから必要となる情報は、

  • phpMyAdmin で作成したデータベース名
  • データべースのユーザー名(デフォルトの「root」)
  • XAMPP 管理画面で設定したデータベースのパスワード(phpMyAdmin のログインパスワード)

 上記3つで、データベースの接頭辞はこれから設定していく項目となる。

データベース接続のための各種項目を入力

 「さあ、始めましょう!」をクリックすれば、データベース接続のための詳細入力画面に移動するので、用意しておいた各情報を入力していく。

150710-24

  • データベース名:phpMyAdmin で作成したデータベース名を入力
  • ユーザー名:phpMyAdmin のログインユーザー名(特に変更していない場合は「root」)
  • パスワード:phpMyAdmin のログインパスワード
  • データベースホスト:localhost のままでOK
  • テーブル接頭辞:任意の半角英数字(3~4文字程度、最後にアンダーバーを付加する)

 データベース名、ユーザー名、そしてパスワードは、これまでに設定したものをそのまま入力するだけになる。データベースホストも基本的に「localhost」のままで問題ない。

 テーブル接頭辞はデフォルトでは「wp_」となっており、もしローカル環境のみで利用するだけなら特に問題はないが、ローカル環境で WordPress 作成後にネット上のサーバーで公開する予定なら、以下の理由から変更しておいた方が良い。

  • デフォルトの「wp_」のままではセキュリティ上非常に大きな問題があるため
  • ローカル環境で作成した WordPress をそのままネット上サーバーに移行しやすくするため

 ネット上、つまりオンライン上で WordPress を運用する場合セキュリティに配慮する必要があり、そのためデフォルト設定のままの項目があると何かと都合が悪くなる。
 またローカル環境で WordPress を作成後、作成したテーマや記事等をネット上のサーバーに移動して本格運営を行おうとした際、テーブル接頭辞が同じでないと色々と面倒な手順を踏むハメになるため、一番最初の段階で接頭辞を変更しておけば、セキュリティの問題と本番環境移行時の問題の両方が同時に解決できるため、接頭辞はインストール時に変更しておくことを推奨する。

 テーブル接頭辞変更の際に気をつけたいのは、以下の3点。

  • 文字列は半角英数字のみ
  • 文字列は 3 ~ 4 文字程度で、長すぎないようにする
  • 文字列の一番後ろにはアンダーバー(「_」)を付加する

 要はデフォルト同様、英数字で短め、アンダーバーが最後に付加されている「wp2_」や「ts1p_」のような接頭辞が望ましいということ。
 よく用いられるのがサイト名を英語読みした場合の頭文字を接頭辞にすることだが、これだけでは推測されやすくセキュリティ面で好ましくないため、なるべく推測しにくい接頭辞にするようにしたい。

 これらの項目設定が完了すれば「送信」をクリックし、続いて次の画面で「インストール実行」をクリックすれば、WordPress本体のインストールが開始される。

WordPress サイトに必要情報を入力してインストール

 WordPress サイト名やWordPress の管理画面用パスワード等の情報をここで入力していく。

150710-25

 明記されている通りここでの情報は後からでも変更可能なので、あまり神経質にならなくてもいいが、変更の手間をかけたくないならここでしっかりと設定しておいてもいい。
 「検索エンジンによるサイトのインデックスを許可する」に関してはローカル環境で運営する分には必要ないので、チェックは外しておく。

 必要項目を入力後、「WordPressをインストール」をクリックする。

150710-26

 上記が表示されればインストール成功。

 「ログイン」をクリックすれば、作成した WordPress サイトの管理画面へのログイン画面に移動する。

150710-27

 先ほどのインストール中に設定した WordPress 管理画面へのユーザー名とパスワードを入力すればログイン可能。ちなみに管理画面へのログインURLは、

  • http://localhost/wordpress/wp-login.php
  • http://127.0.0.1/wordpress/wp-login.php

 ローカル環境にインストールしたWordPressフォルダへのURLに「wp-login.php」を付加したURLとなる(wordpress の部分を変更しているなら変更したフォルダ名に書き換える)

 WordPress 管理画面(ダッシュボード)にアクセスできたら、ダッシュボード上部にあるサイト名をクリックして WordPress サイトを表示してみる。こちらも問題なく表示されれば、WordPress のローカル環境へのインストールは無事終了となる。

 かなり長くなってしまったが、インストールするための下準備(Web サーバー環境の構築、データベースの設定等)が果てしなく長く面倒で、WordPress 自体のインストールはあっさり完了するのが WordPress の特徴なので仕方がないと言えば仕方がない……

 ちなみに最初の方でチラッと紹介した Bitnami を使用すればもう少し楽にインストールできるのだが、同時にいくつかの問題も発生するためあまり推奨していない。

 そこで蛇足ではあるが、その理由についても少し明記して効果と。

WordPress のローカル環境導入に Bitnami を薦めない理由

 その前にまずは Bitnami がどんなソフトなのかを簡単に説明すると、Bitnami とは様々なWebアプリケーションの動作環境を簡単にPC上に構築するためのものとなる。
 導入するソフトや環境により無数のバージョンがあるが、今回のように WordPress 導入時に利用するのは、事前にXAMPP をインストール済の状態で利用することで WordPress のローカル環境導入を簡略化する「Bitnami for XAMPP」というものになる。

 Bitnami for XAMPP を利用すれば、

  • データベースの作成・設定の手順を phpMyAdmin を起動せずとも半自動で行ってくれる
  • 同時に WordPress のインストール作業を同時に行ってくれる

 上記のように非常に面倒だったデータベースに関わる作業を全てすっ飛ばせるという利点があるが、同時に気になる部分も目立ち、

  • インストールフォルダが正規の場所(c:\xampp\htdocs)ではない
  • テーブル接頭辞がデフォルトの「wp_」のままインストールされる
  • インストールされる WordPress は最新版でないことが多い
  • Bitnami での作業及びインストールされる WordPress は英語版となる

 方法次第で後で何とかカバーはできるがどのみち余計な手間になってしまうものがほとんどで、特にテーブル接頭辞に関しては後々オンライン上のサーバーで運営していく上で最も致命的なデメリットになりかねない。

 結局これらのデメリットを解消するために行う後々の作業の手間を考えると、Bitnami を利用せずに WordPress をインストールした方が最終的な面倒はかなり軽減されるし、何より少しばかりの勉強にもなる。

 ただ、Bitnami の利用が万人に対してお薦めできないわけではなく、

  • あくまでテーマ等の開発環境として、ローカル環境でしか運用予定がない
  • 少しでも余計な手間を削減し、スピーディーに WordPress のローカル環境を構築したい
  • 全くの初心者なので、お試し程度にローカル環境で WordPress を試したい

 という人達にとっては有意義なソフトウェアかと。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメント更新情報

トラックバック

トラックバックURL:https://itsmy.first-pclife.com/wordpress/server-database/post-35/trackback