Webの記録

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

投稿日:

この記事は約 6 分で読めます。

WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。

「XAMPP for Windows」上でWordpressを動作させるまでをメモを残してなかったので、今回書いてみることにしました。

「XAMPP for Windows」のダウンロードからWordpressを入れるまで・・・なので、ちょっと作業が多いです。

バージョンやパソコンの環境によって、画面が違うこともあるかと思いますが、参考になれば・・・でメモ残します。

XAMPPのダウンロードページが新しくなり、「BitNami」というアドオン導入によってとても簡単にWordpress環境が構築できるようになりました。

以下の手順は以前のものとなりますので、新しいものをご覧ください。

※「XAMPP(Bitnami)で簡単にWordPressローカル環境を構築してみた。(for Windows)」に書きました。

目次

  1. XAMPP for Windowsの設定
  2. WordPressの設定

XAMPP for Windowsの設定

1.XAMPP for Windowsをダウンロード

XAMPPサイトからファイルをダウンロードします。今回は、「インストーラ」を選んでみました。

2.XAMPP for Windowsをインストール

インストーラーがダウンロード出来たら、ダウンロードしたファイルをダブルクリックしてインストールをします。その時に言語設定の画面が出るのですが、EnglishしかないのでそのままOKボタンを押します。

Windowsのバージョンによって、UACの警告画面が表示される場合があります。とりあえず、OKボタンを押してそのまま進みます。

セットアップの案内画面。ここは「Next」ボタンを押して次に進めます。

インストール先のフォルダーの指定をする画面。ここはそのまま「Next」ボタンを押して次に進めます。

インストールオプションの画面。これは後でも変更が出来るようです。ひとまずここは「Install」ボタンを押して次に進みます。

インストール完了画面が出ます。「Finish」ボタンを押して次に進みます。

コントロールパネルを起動するかどうかを聞いてきます。ここは「はい」ボタンを押して、起動させます。

Apacheを起動させます。「Apache」の隣の「Start」ボタンを押します。押した後に、「Apache」とボタンの間に「Running」が表示されます。表示されない場合は、80番ポートが他のアプリケーションとバッティングしている可能性があるようです。

Apacheが起動したら、ブラウザを起動させてURL欄に「http://localhost/」と入力して、ローカルサーバーにアクセスします。XAMPPという画面が表示されたら「日本語」という部分のリンクをクリックします。すると、システム上に正しくインストールされたことが書かれている「XAMPP for Windows」の管理画面が表示されます。


【補足】Skypeなどを使っていると設定によっては、「XAMPP for Windows」と動作がバッティングすることもあるようです。これについては今回試すことが出来なかったので、説明をすることが出来ないことをご了承ください。またセキュリティ関係の設定も環境によって違うので、セキュリティ関係設定に関してはお使いのウィルス対策ソフトやルーターのマニュアルをご覧ください。

3.MySQLの設定

MySQLを起動させます。
「MySQL」の左横にある「Svc」にチェックを入れます。「Click OK to inatall the MySQL Service」の画面が出たら「OK」ボタンを押して、先ほどチェックボタンを入れた「MySQL」の項目の「Start」ボタンを押します。

ブラウザのURL欄に「http://localhost/security/xamppsecurity.php」と入力して、「MySQLのセキュリティコンソール&XAMPPのディレクトリ制御」のページを開きます。パスワードを考えて2回入力します。画面が文字化けを今回してしまいましたが、「パスワードを変更しました」ボタンを押して次に進みます。

コントロールパネルの右上にある「SCM」ボタンを押します。

「サービス」画面が開きます。右側の名前の部分に「MySQL」を見つけてスクロールし、クリック。左側に「サービスの再起動」の文字をクリックします。

WordPress用のデータベースを作成します。
ブラウザのURL欄に「http://localhost/phpmyadmin/」と入力して、「phpMyAdmin」のログインページへアクセスします。ユーザ名に「root」、パスワードに「先ほど決めたパスワード」を入力して、「実行する」ボタンを押します。

「phpMyAdmin」にログインしたら、左上の「データベース」タブを選択します。

「新規データベースを作成する」の文字の下の枠の中に「wordpress」と入力、その隣は「utf8_general_ci」を選択して、「作成」ボタンを押します。

やっと、データベースが出来ました!

WordPressの設定

WordPressをインストールする

やっとWordpressを導入出来ます!ブラウザのURL欄に「http://ja.wordpress.org/」と入力して、右下にある「ダウンロード」ボタンを押してWordpressのファイルをダウンロードします。

ダウンロードしたファイルを解凍して、Cドライブの中の「xampp」→「htdocs」に「Wordpress」のフォルダーごとファイルを入れ込みます。「htdocs」にファイルを入れると「http://localhost/ファイル名」というアドレスになります。

ここで「http://localhost/wordpress/」とブラウザのURL欄に入力してみると、まだ設定が残っているので以下のような画面が出てきました。ここはそのまま指示に従って、「次に進みましょう!」ボタンを押します。

すると「wp-config.php」ファイルが存在しないという画面が出てきました。これも自分で作るテもあるようですが、簡単にやっちゃいましょう!そのまま「設定ファイルを作成する」ボタンを押します。

データベース関係の設定画面が出てきます。ここはユーザ名に「root」、パスワードに「今までの設定で入れたパスワード」を入れて、「作成する」ボタンを押します。

データベースと通信出来るようになりました…のメッセージ画面が出ました。あと一息です!ここは「インストール実行」ボタンを押します。

WordPress自体の設定画面です。「サイトのタイトル」、「ユーザー名(デフォルトはadmin)」、「パスワード(ログイン用なので今までと違うパスワードOK)」、「メールアドレス」を入力します。テスト環境なので、「プライバシー」のチェックは外しました。ここまで出来たら「Wordpressをインストール」ボタンを押します。

無事に設定が全て完了すると以下のような画面が出ます。これでWordpressがテスト環境で使えるようになりました!ひとまず、ログインしてみます♪

ログイン画面で、先ほど設定した「ユーザー名」と「パスワード」を入力して「ログイン」ボタンを押します!

無事にWordpressのダッシュボード(管理画面)が開けました!さて、これでテスト環境を作るさ作業は終わりです♪お疲れ様でした!!

今回はWindowsでのテスト環境設定を試してみました。環境はバージョンで違う部分もあるかと思いますが、今回試したことが参考になれば良いなぁと思います。

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

WordPress 管理画面でメモが自由に書けるプラグイン「Plugin Memorandum」

この記事は約 1 分で読めます。 WordPressには便利なプラグインがたくさんあって、いろいろ試していたら・・・気がつくと大量のプラグインで画面がいっぱい!!「コレ何だったっけ?」というプラグイン …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …