CleanUp

備忘録と豆の知識

備忘録 Gulpを使ってローカルでWordPress動かす

あらすじ

 オリジナルテーマを作ってくれって学校から頼まれたので、とりあえずテーマ制作に便利な環境を整えようと思った。
 とりあえずWordPressを起動してダッシュボードに到達するところまで。


1. 必要なもの

① gulp-connect-php
 (PHP動かすやつ。必要に応じてその他のプラグインも)

WordPress
 (多分最新版でいい)

SQLite Integration
 (WordPressSQLiteで動かせるようにするWordPressプラグイン)

PHP.exeとPHP.ini
 (XAMPPとかに付属してくるやつでいい。C:\xampp\php\ にある)
 

2. gulp-connect-phpのインストール

 プロジェクト用のフォルダを作り、そこにgulpとgulp-connect-phpをインストール

npm i --save-dev gulp gulp-connect-php


 とりあえず最小構成インストール。BrowserSyncとかgulp-sassとか必要に応じて。
 あとパス通してなかったらグローバルでgulpのインストールもしといてください。
 インストールが済んだらgulpfile.jsに書き込んでいきます。

gulp.task('connect-sync', function() {
  connect.server({
    base:'wordpress',
    bin: 'C:/xampp/php/php.exe',
    ini: 'C:/xampp/php/php.ini'
  }, function (){
    browserSync({
      proxy: 'localhost:8000'
    });
  });
});


 binとiniにはそれぞれphp.exeの場所とphp.iniの場所を指定してください。
 XAMPPインストールしてたら楽でいいよね。XAMPPの起動は必要ないです。

 connect-phpに関してはざっとこんな感じ。

 今始めて知ったんだけど、はてなのコード記述できるやつめっちゃ便利ね!!!

3. WordPressSQLite Integrationを準備する

 準備します。まずはダウンロードしてきてください。
 ・WordPress
 ・SQLite Integration
 
 先程作ったプロジェクトフォルダにWordPressを解凍します。

f:id:ntha:20170211143025p:plain

 次にSQLite IntegrationをWordPressのPluginsフォルダに解凍します。

f:id:ntha:20170211143033p:plain

 解凍が終わったら、SQLite Integrationのフォルダの中にあるdb.phpをwp-contentに移動させます。
 コピーではないので注意。

wp-configを編集する

 wordpress直下にあるwp-config-sampleを編集します。

 まずは秘密鍵を作ります。
 WordPress秘密鍵を作ってくれるサービスを提供しているので、以下にアクセスしてコピペ。
 https://api.wordpress.org/secret-key/1.1/salt/

 それをwp-config-sampleの55行目辺りにある

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

 と置き換えます。
 置換したら保存。

 最後にwp-config-sampleをwp-configとリネームしておきます。

Gulpを起動してWordPressをインストールする

 プロジェクトフォルダでgulpを起動するとWordPressの初期設定画面が表示され、サイト名などの記述を求められます。
 適当に決めて進めるとダッシュボードまで直通です。


 お疲れ様でした。