XAMPP + PhpStorm + WordPress の設定メモ

Category : Software, WordPress

毎回設定方法を忘れて検索するのがつらいのでメモしておきます。

  • C:\Develop 以下で構成。
  • XAMPP のドキュメントルートはそのまま、実際に使うのは C:\Develop\www 以下にディレクトリ作る。
  • WordPress のルートは C:\Develop\www\wp にする。
  • MySQL の data も XAMPP とは別ディレクトリの C:\Develop\mysql に。
  • WordPress の URL は wp.localhost にする。

バーチャルホストの設定とか

今回は C:\Develop\xampp にインストールする。
インストールが終わったら php.ini の設定。

  • mbstring.language = Japanese
  • date.timezone=Asia/Tokyo

とりあえずこれだけやって、他は本番用サーバーにあわせる。

参考リンク。
php.iniファイルの確認と修正 – XAMPPの使い方

Apache と MySQL 起動して、ちゃんとインストールできていたらセキュリティ設定して一旦終了させる。
次はバーチャルホストの設定。

C:\Develop\xampp\apache\conf\extra\httpd-vhosts.conf を開く。
一番最後に次を加える。

NameVirtualHost *:80

<VirtualHost *:80>
  DocumentRoot "C:/Develop/xampp/htdocs"
  ServerName localhost
</VirtualHost>

<VirtualHost *:80>
  DocumentRoot "C:/Develop/www/wp"
  ServerName wp.localhost
  <Directory "C:/Develop/www/wp">
    Order allow,deny
    Allow from all
    Require all granted
  </Directory> 
</VirtualHost>

C:\Windows\System32\drivers\etc\hosts を開く。
最後に次を加える。

127.0.0.1 localhost
127.0.0.1 wp.localhost

C:\Develop\www\wp<?php phpinfo() ?> だけを書いた index.php を置いて、Apache を起動したら http://wp.localhost にアクセスしてちゃんと表示されるか確認。

参考リンク
XAMPPのVirtualhostで複数のサイトを管理する方法(403対策あり) | ケーキ・先生・アドセンス

phpMyAdmin のログイン時間を変更

初期状態だと短いので変更する。

C:\Develop\xampp\phpMyAdmin\config.inc.php を開く。
最後に次を追加。

ini_set(
  'session.gc_maxlifetime',
  ($cfg['LoginCookieValidity'] = (3600 * 8))
);

参考リンク
phpMyAdminの自動ログアウト時間を延長する。 | 篠原隆司のブログ

MySQL Data を移動

C:\Develop\xampp\mysql にある data ディレクトリを C:\Develop\mysql に移動。

C:\Develop\xampp\mysql\bin\my.ini を開く。
C:/Develop/xampp/mysql/data になっている箇所を C:/Develop/mysql/data に変更。
必要ならログファイルのパスも変更する。

MySQL を起動してちゃんと動いているか確認。

参考リンク
初心者がWEB開発に挑戦 MySQLのデータディレクトリの変更方法(XAMPP)

WordPress のインストール

WordPress 用のデータベース wp_test を作成。
C:\Develop\www\wp に WordPress を置いたらインストール。
http://wp.localhost にブラウザでアクセスして表示されたら OK。

PhpStorm の設定

プロジェクト作成。
PhpStorm を起動して、ツールバー → Open Directory から C:\Develop\www\wp を指定。
(wp-config.php を触らないなら、C:\Develop\www\wp\wp-content を指定するといい。その際、次の段落の手順は飛ばす)

Settings → Project Settings → Derectories へ。
Content Root を一旦削除し、Add Content Root で C:\Develop\www\wp\wp-content を指定。

XAMPP との連携。
Settings → Project Settings → PHP へ。
Interpreter ボタンをクリックして、Interpreters ウィンドウが開いたら Add をクリック。
名前は何でもいいので「XAMPP PHP」とでもつけておく。
パスは C:\Develop\xampp\php にする。
OK をクリック。
Include path に C:\Develop\www\wp\wp-adminC:\Develop\www\wp\wp-includes を追加。

使わないと思うけど、一応 Deplyment の設定もしておく。
Settings → Project Settings → Deployment へ。
Add をクリック。
名前は何でもいいので「WordPress Test」とか。
Type は Local or mounted folder を選択。
Upload/donwload project files は C:\Develop\www\wp を指定。
Browse files on server はバーチャルホストで設定した http://wp.localhost を指定。

次はデータベースとの接続。
エディタ画面に戻って、ツールバー → View → Tool Windows → Database へ。
New → Data Srource をクリック。
名前は何でもいい。
Database タブ → JDBC driver files → MySQL Connector を選択。
ダウンロード先はどこでもいい。ダウンロード済みなら、JDBC driver files にそのパスを指定する。
Database URL は jdbc:mysql://localhost:3306/ を記入。
ユーザー名とパスワードは XAMPP で設定したデータベースのアカウント。
IDE からの書き換えを禁止するなら Read-only にもチェック。
左下の Test Connection をクリックして接続テスト。
Schemas & Tables タブ → WordPress で使うものだけにだけ Scan for Tables と Make Default にチェック。

参考リンク
Installing and Configuring XAMPP with PhpStorm IDE – PhpStorm – Confluence


簡単なテーマ作成用なので、たぶん足りないものいっぱいあります。あと間違っていたらすみません。
Xdebug の導入とかは自信ないので検索してください……。

Leave a Reply