”シンプル”なデザインを、”フツー”のWEBサイトを

WordPressをつかってサイトを構築しようとするとき、いきなりサーバー上で構築していくのも手だとは思うのですが、例えばオリジナルのテーマを作成するときなんかは結構ためらってしまいます。性格的なものだと思うのですが。

もちろんサーバー上で作業をするとしても、こまめにバックアップさえとっていればいざというときは復元できます。それでもやっぱり、個人的にはまずローカル環境で作業を始めることをお勧めします。ということで、XAMPPをつかったWordPressを動かすためのローカル環境の作り方について書いていきます。

ローカル環境でWordPressをいじることのメリット

あくまで個人的な観点からですが、ローカル環境でWordPressの作業を行えることのメリットは以下になると思います。

  • 既に運営しているサイトに新しいテーマをあてがう場合などに便利
  • ローカル上のファイルを編集するので、普段つかっているエディタでソースがいじれる
  • 何より気兼ねなくカスタマイズできる、そしてどうしようもないほど壊れても精神的ダメージは少ない

WordPressをローカル環境で動かすために

WordPressをローカル環境で動かすとき、僕はXAMPPをつかいます。他に似たようなパッケージだとLocalというものもあります。

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel
仕事でWordPressのカスタマイズをする際、ローカル環境で作業が出来るとかなり便利。というか安心してカスタマイズを進められます。最悪どうしようもなくなったら最初か...

導入はLocalの方が簡単なのですが、つかってみたところCSSの反映が遅かったりして、Ctrl+F5大好き人間の僕にはストレスが半端なかったです。もしかしたら僕の環境下のみの話かもしれませんが、このような理由から結局はXAMPPをつかっています。

XAMPPの設定

XAMPPをインストールする

まずはXAMPPを下記よりダウンロードします。

XAMPP Installers and Downloads for Apache Friends
XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

ダウンロードしたexeファイルを実行して、どんどん進みます。基本英語ですが、「Yes」と「Next」を選んでいけば問題ないはずです。(本当はきちんと書いてあることを理解してから進むべきです・・・)

進んでいくと下記のような画面になります。このとき、WordPressを動かすだけだったらMySQL、PHP、phpMyadminを選択すれば良いのですが、僕はいつもデフォルトのままインストールしてしまっています。

その後もどんどん設定等はいじらずに先に進んでいき、インストールが無事終わると下記のような画面になります。

XAMPPでApacheとMySQLを動かす

XAMPPのインストールが終わったら、XAMPPのControl Panelを開きます。先ほどのインストール時に何も設定をいじっていなければ、C:\xamppにxampp-control.exeというファイルがあると思うので、これを実行。

すると下記のような画面が立ち上がるので、赤枠で囲った2箇所の「Start」をクリックして、ApacheとMySQLを起動します。

こんな感じになります。

データベースを作成する

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

「http://localhost/phpmyadmin」にアクセスし、phpMyAdminの画面を開きます。その後、トップページの左上にある「データベース」をクリック。

すると下記の画面になるので、

①「データベース名」に任意のデータベース名を入力。(例では「wp_db」)
②「照合順序」では「utf8_general_ci」を選択。
③「作成」をクリック。

データベースを操作するユーザーを設定する

上記の手順でデータベースを作成すると、データベースの管理画面に移動しますので、「特権」というタブをクリックし、画面下部にある「Add user account」をクリックしてください。

次の画面でユーザーの情報を設定していきます。ここで設定した情報は後ほどWordPressをインストールする際につかいますので、忘れないようにしてください。

①User name
「テキスト入力項目の値を利用する」を選択し、その右隣に任意の名称を入力する。(例では「testadmin」)

②Host name
「ローカル」を選択し、その右隣に「localhost」を入力。(自動で入ります)

③パスワード
「テキスト入力項目の値を利用する」を選択し、任意のパスワードを設定する。

④Re-type
③で設定したパスワードを再度入力する。

その後、画面の一番下の右側にある「実行」ボタンをクリックします。これでWordPressを動かすための準備が整いました。

WordPressをインストールする

WordPressをXAMPPに入れる

WordPressの公式サイトからWordPressをダウンロードします。

日本語
WordPress 日本語ローカルサイトブログ

ダウンロードしたzipファイルを解凍し、C:\xampp\htdocs(インストール時に設定をいじっていなければ、ですよ)にぶち込みます。

このとき、そのまま入れるよりも何かわかりやすい名前にしておいた方が良いです。僕はオリジナルのテーマを作るときにこの手順を踏むことが多いので、テーマ名にしています。(大体はそのテーマをつかうサイトの名前です。)

例えば、C:\xampp\htdocsの中に移したwordpressというフォルダ名を「wp_test」とします。すると、ブラウザからは「http://localhost/wp_test/」でこのWordPressにアクセスすることが出来るようになります。

WordPressの設定

「http://localhost/wp_test/」にアクセスして、お馴染みのWordPressの初期設定を行っていきます。

①データベース名
phpMyAdmin画面で作成したデータベース名を入力します。ここでは「wp_db」です。

②ユーザー名
phpMyAdminのユーザー設定で設定したユーザー名を入力します。ここでは「testadmin」となります。

③パスワード
phpMyAdminのユーザー設定で設定したデータベースのパスワードを入力します。

④データベースのホスト名
「localhost」と入力します。

その後、「送信」、「インストール実行」と進み、下記の画面でサイト情報を入力します。ちなみにここで設定したものは後ほどいくらでも変更出来ます。

ログイン画面になるので、先ほど設定したWordPressのユーザー名とパスワードを入力してログインします。

後はもう好きなようにいじり倒しちゃってください。

ローカルにテスト環境を作れば安心して作業できる

先にも書いたように、WordPressの作業で万全を期すなら、まずはローカルでテスト環境を構築してから作業を始めるのがいいと思います。最初は環境の構築が少し面倒かも知れませんが、基本的には一度やってしまえば済むことなので、やはりメリットの方が大きいです。

なお、設定がうまくいかなかったとしても、好きなだけ最初からやり直せるので、ゆっくり落ち着いて作業をするのが個人的にはポイントかな、と。