ブログのテストにはXAMPPがオススメ[WordPress]

シェアしていただけるとうれしいです

XAMPP

テストの環境のオススメ

WordPressをカスタマイズしようとしてファイルを編集して、
画面が真っ白でなにも表示されない!
とか、
表示が崩れてデザインがおかしくなってしまった!
という経験はありませんか?

本番のWordPressのファイルを触ってしくじってしまったために、そういうことになってしまいます。すぐに復旧できたらいいのですが、どのファイルを触ったか覚えていない、ファイルのどの部分を修正したか覚えていない・・・

その間にあなたのブログにアクセスしてくれた人は、あなたのブログを閲覧することができず、残念ながら離脱につながってしまいます。

ぼくたちWebの中の人は、仕事で本番のサイトのWebページをいきなり編集してWebサーバーにアップしたりしません。もしファイルの編集にしくじっていたら、会社の売上に損失を与えてしまいます。重大な責任です。

そんなときのために、本番のサイトとは別に、テスト用のサイトを用意しています。テスト用のサイトで表示を確認し、OKであれば本番のサイトに導入します。そうすることで本番でのトラブルを未然に防ぐことができます。

WordPressでサイトを運用している人たちも、テストの環境さえあれば、カスタマイズする際にトラブルを未然に防ぐことができるのです。ちょっとの手間を惜しまずに、テスト用の環境を作ってみませんか?

XAMPPってなに?

Windows PCやMacの中にレンタルサーバーのような仕組みを作ることができます。XAMPP(ザンプ)というプログラムで、WordPressを動かすための、Apache(Webサーバー)、PHP(プログラム)、MySQL(データベース)などのソフトウェアがセットになったアプリケーションです。これがあれば、今お使いのWindows PCやMacの中にWordPressのテスト環境が作れてしまいます。

このXAMPPですが、ぼくたちWebの中の人も開発やテストのためによく使います。手軽に環境を作れるところが非常にうけているのです。

XAMPPをインストールしよう

XAMPPのインストールはとても簡単です。インストーラーをダウンロードして、インストールするだけです。早速インストールしてみます。今回はWindows PC向けに書いています。なぜなら、ぼくがMacを持っていないからです(≧▽≦)

XAMPPのダウンロードとインストール

XAMPPを配布しているサイトにアクセスします。
参考URLXAMPP Apache + MariaDB + PHP + Perl

「Windows向けXAMPP」をクリックします。しばらく待つと、自動的にダウンロードが始まります。

AMPPのダウンロード

ダウンロードしたファイルをダブルクリックします。インストールが始まります。
XAMPP インストーラ

アンチウイルスソフトが動いていますけどいいですか?と聞いてきますが、そのまま「Yes」をクリックします。

ウイルスソフトの確認

ユーザーアカウントコントロールが有効になっていますよ、と言われますが、「はいはい」と言いながら「OK」をクリックします。

UACの確認

「Next」をクリックします。

インストール開始

インストールするコンポーネントを選択します。そのまま「Next」をクリックします。

コンポーネントの選択

XAMPPをインストールするディレクトリを選択します。何も問題がなければ、
C:\xampp
のままでOKです。

インストールディレクトリの選択

WordPressはWordPressのサイトからダウンロードするつもりなので、学ばなくてもいいです。チェックを外して「Next」をクリックします。

インストールの準備が出来ました。「Next」をクリックします。

準備完了

インストール完了までしばらく時間がかかります。一旦コーヒーブレイクにしましょうか?

XAMPPインストール中

Windows セキュリティの重要な警告が表示されたら、「アクセスを許可する」をクリックします。

Windows セキュリティの警告

インストールが完了しました。「Finish」をクリックします。

インストール完了

お疲れ様でした。

AapacheとMySQLの起動

最後の「Finish」のところでチェックをはずさなければ、XAMPPのコントロールパネルが立ち上がってきます。スタートボタンから起動するときは、「スタート」→「XAMPP」→「XAMPP Control Panel」をクリックします。

XAMPP コントロールパネル

ApacheとMySQLを起動させましょう。MySQLを起動させたときにWindows セキュリティの重要な警告が表示されたら、「アクセスを許可する」をクリックします。

Windows セキュリティの警告

あれ?Apacheが起動しないぞ?という時は、XAMPPコントロールパネルの後ろに黒いウインドウがありませんか?そのウインドウを「×」で閉じて、再度Aapcheを起動させるとうまくいくと思います。

Apacheの「Admin」をクリックしてみてください。デフォルトのブラウザが開いて、こんなページが表示されます。

スプラッシュ

このページ、あなたのパソコンがWebサーバーになって表示されています。おめでとうございます!

URLが

になっています。この「localhost」は自分自身を指すための特殊なURLです。

一番右端の「日本語」をクリックしてください。
ウエルカムページが表示されましたか?

XAMPPウエルカムページ

左端のメニューから「phpinfo()」をクリックしましょう。インストールされているPHPの情報が表示されます。中身は見なくていいです(^^ゞ

phpinfo

設定の確認と変更

先ほどのphpinfo()のページで確認をしていただきたいのですが、ずーっと下の方にスクロールしていくと、「date」というところがあります。ここの「date.timezone」の値が何になっています?
「Europe/Berlin」になっていませんか?このまま使っていると、7時間の時差が発生します。タイムゾーンをぼくたちが住んでいる「東京」に変えます。

date.timezone=Europe/Berlin

XAMPPコントロールパネルのApacheの「Config」をクリックします。メニューが表示されて、その中に「php.ini」という項目がありますので、それをクリックします。

php.ini編集

php.iniというPHPの動作を設定するファイルが読み込まれた状態でメモ帳が立ち上がってきます。

php.iniの編集

「F3」キーを押して、「date.timezone」を検索します。

date.timezoneを検索

該当の場所が見つかりましたね。

「date.timezone=Europe/Berlin」と書かれている箇所を選択してコピーします。下の行に貼り付けて、上の行の先頭には「;」(半角セミコロン)を挿入します。下の行の「Europe/Berlin」を「Asia/Tokyo」に打ち替えてください。

php.ini編集後

変更した設定を有効化するために、Apacheを再起動します。XAMPPのコントロールパネルに戻って、Apacheの「Stop」をクリックします。Apacheが止まったら、再度「Start」をクリックします。

Apache再起動

ブラウザに戻ってF5キーを押して、ページを再読み込みします。左のメニューから「phoinfo()」をクリックして、先ほどの「date」の「date.timezone」を見てください。

date.timezone=Asia/Tokyo

「Asia/Tokyo」になっていればOKです。

Apacheが起動しなくなってしまったとき

  • 書き換えた箇所のスペルはあっていますか?
  • date.timezone=Europe/Berlinの行の先頭に挿入したのは半角のセミコロン「;」ですか?全角になっていませんか?普通のコロン「:」になっていませんか?

準備はOK!

ここまでできれば、ひとまず準備はOKです。

次回は今のWordPressのサイトのバックアップからPCの中にテスト用のWordPressの環境を作ります。
こちらで予習しておいていただけると助かります^^

ではでは。

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

関連記事