XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

こんにちは、@cappeeです。

FTPでアップせずに、ローカル環境でさくっと制作したいことってありますよね。

そんな局面に出会ってしまったので、XAMPPをインストールしてローカルにテスト環境を構築してみました。

PHPも実行できるのでWordPressのテスト構築にも便利ですよ。

[2013.4.26]XAMPPのインストール方法に詳細を追加しました。

XAMPP(ザンプ)とは

XAMPPは、ウェブサーバーなど開発に必要な「Apache」「MySQL」「PHP」などのソフトウェアをまとめてインストールすることができます。

自分のPCにインストールすれば、簡単にローカルにテスト環境を構築することができます。

ちなみに、XAMPP(ザンプ)は各ソフトウェアの頭文字をとっているので、覚えやすいですね。

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

Wikipediaより

XAMPP for Windowsのインストール

私はWindowsを使用しているのでこちらの「XAMPP for Windows」からインストールしてみます。

apache friends xampp for windows 300x124 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

インストールしたバージョンは現時点でリリースされたばかりの 1.8.1 です。

「インストーラ」「ZIP」「7zip」よりお好きなものを選択してダウンロードしてください。

インストーラならダブルクリックするとXAMPPのインストール画面が表示されますので、何も変更しないまま「Next>」で進めばインストール完了です。

XAMPPの起動

xampp 300x194 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

「Apache」と「MySQL」の「Start」ボタンを押してください。

ファイヤーウォールのアラートが表示されることがありますので、その時は解除してください。

設定画面を開く

XAMPP 1.8.1 300x228 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記起動画面の「Apache」の「Admin」ボタンを押すか、「http://localhost/xampp/」をクリックして設定画面を開きます。

初めて表示した場合は言語の選択ページになりますので、「日本語」をクリックします。

次に左メニューにある「セキュリティ」をクリックして設定を…と思ったら文字化けしています。

セキュリティ画面の文字化けを直す

バグなのかセキュリティ画面だけ文字化けしています。

e13fd3bc1bc929cf1a31dd87bd6d202e 300x172 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

「C:\xampp\security\htdocs」フォルダにある「navi.php」を開いてください。

45行目あたりに言語系の指定があると思うので、一番最後に日本語を追加し、navi-chineseの最後を<p>から<br>に変更します。

下記よりコピーして貼り付けてください。

<a target=_parent href="lang.php?de"><?php print $TEXT['navi-german']; ?></a><br>
<a target=_parent href="lang.php?en"><?php print $TEXT['navi-english']; ?></a><br>
<a target=_parent href="lang.php?es"><?php print $TEXT['navi-spanish']; ?></a><br>
<a target=_parent href="lang.php?fr"><?php print $TEXT['navi-french']; ?></a><br>
<a target=_parent href="lang.php?it"><?php print $TEXT['navi-italian']; ?></a><br>
<a target=_parent href="lang.php?nl"><?php print $TEXT['navi-dutch']; ?></a><br>
<a target=_parent href="lang.php?no"><?php print $TEXT['navi-norwegian']; ?></a><br>
<a target=_parent href="lang.php?pl"><?php print $TEXT['navi-polish']; ?></a><br>
<a target=_parent href="lang.php?pt"><?php print $TEXT['navi-portuguese']; ?></a><br>
<a target=_parent href="lang.php?sl"><?php print $TEXT['navi-slovenian']; ?></a><br>
<a target=_parent href="lang.php?zh"><?php print $TEXT['navi-chinese']; ?></a><br>
<a target=_parent href="lang.php?zh"><?php print $TEXT['navi-japanese']; ?></a><p>

変更したらエンコーディングがUTF-8になっているかを確認してから保存します。UTF-8ですよ!

もうひとつ、「C:\xampp\security\htdocs\lang」フォルダの「jp.php」を開きます。

47行目あたりに「$TEXT['navi-languages'] = “各国語”;」と書いてあると思いますので、その下に以下を追記します。

$TEXT['navi-english'] = "English";
$TEXT['navi-german'] = "Deutsch";
$TEXT['navi-spanish'] = "Espanol";
$TEXT['navi-french'] = "Francais";
$TEXT['navi-italian'] = "Italiano";
$TEXT['navi-dutch'] = "Nederlands";
$TEXT['navi-norwegian'] = "Norsk";
$TEXT['navi-polish'] = "Polski";
$TEXT['navi-portuguese'] = "Portugues";
$TEXT['navi-slovenian'] = "Slovenian";
$TEXT['navi-chinese'] = "中文";
$TEXT['navi-japanese'] = "日本語";

これもUTF-8で保存したら、セキュリティ画面を確認してみてください。

文字化けが直りましたか?

セキュリティ設定

a9252db7759e08e7389c2ecabb762fe1 267x300 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

初回ではセキュリティの各ステータスが「要注意」となってますので、セキュリティ画面の中盤にあるリンク「http://localhost/security/xamppsecurity.php」を開いて設定します。

9cadda860750b2b0467b57f276d5498f XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記の画面が開きますので、MySQLのパスワードXAMPPのベーシック認証のアイパスを設定してください。

パスワードは忘れないようにしてくださいね。

先ほどのセキュリティ画面に戻るとステータスが「安全」にかわりました。

ローカル環境の作業場所

C:\xampp\htdocs

にデータを保存すると下記のURLで見えるようになります。「xxxxx」は保存したファイル名に変更してください。

http://localhost/xxxxx

PHPMyAdminでデータベース作成

PHPMyAdminからデータベースを簡単に作成することができます。

xampp1 300x194 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

起動画面の「MySQL」の「Admin」ボタンを押すか、「http://localhost/phpmyadmin/」をクリックしてください。

phpMyAdmin 249x300 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

ユーザ名:root
パスワード:セキュリティ画面で設定したMySQLのパスワード

PHPMyAdminにログインしてください。

9d7feb60ea78e2d1d8d211213e7bd4b3 300x190 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上のユーザタブからユーザー画面を開き、「ユーザを追加する」をクリックします。

9d7feb60ea78e2d1d8d211213e7bd4b31 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

上記を参考に設定してユーザーを追加したら、PHPMyAdminでの作業はとりあえず終了です。

WordPressをインストール

WordPressの公式サイトより最新版をダウンロードしてください。

解凍したファイルは「wordpress」フォルダごと、作業場所の「C:\xampp\htdocs」に移動してください。

http://localhost/wordpress/」にアクセスすると初期画面が表示されます。

あとは画面の表示に従って進めばOKです。

695cdc2fa42220068fbb5b9bf96f37f6 XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法

設定ファイルを作成すると、データベースの設定画面が表示されますので、先ほど作成したものを入力します。

データベース名はユーザー名と同一で作成していますので、同じ名前を入力してください。

あとは、サイトの設定画面になるので必要な項目を入力します。

http://localhost/wordpress/」にアクセスし、サイトが問題なく表示されているのを確認してください。

これでWordPressは完了です!

WordPressのテーマをカスタマイズする

下記のフォルダにテーマ用のファイルが格納されています。

wp-content\themes

デフォルトのテーマが2つ入っていると思います。

テーマファイルの構造やファイル名を変更すると動かなくなる可能性があるので、デフォルトのテーマを一旦コピーしてカスタマイズしていくのが早いです。

とてもまとまっているこちらの記事の下の方にある「style.cssの書き方」を参考にテーマ名など入力して、ファイルを変更しテーマをカスタマイズしてみてください。(それにしても良記事ですね。)

WordPressのオリジナルテーマ作成フロー・基本マニュアル

以上です!

みなさんのステキなWordPressライフを願っています。

Pocket
article clipper XAMPPでローカルにテスト環境を構築し、WordPressのテーマをカスタマイズする方法