---
title: "いまさら始めるGulpでWordPressテーマ開発"
canonical_url: "https://olein-design.com/blog/gulp-wp-starter"
language: "ja"
date_published: "2018-10-17T13:55:11+09:00"
date_modified: "2018-10-17T13:55:11+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "Gulp"
    - "WordPress"
---

# いまさら始めるGulpでWordPressテーマ開発

前回、静的ウェブサイトの開発環境をGulpで作ってみました。 https://olein-design.com/blog/gulp-starter こちらを元にして、今回はWordPressテーマのGulp開発環境を作ってみようと思います。といっても、ベースはすでに出来上がっているので、少し変更を加えたりする程度になります。 あと、環境としては**Local by Flywheel**を使うことを想定しています。 内容としては、 - WordPress開発環境を作るベースの環境を作る
- 自動でrtl.cssを書き出す
- 監視タスクを作る

 というような感じになります。他の**SassコンパイルやJavaScriptの結合・圧縮部分は前回のコードに書き出し先を変更したりする程度で大丈夫です。**では始めていきましょう。 ## WordPress開発環境を作るベースの環境を作る

 まずは、前回作った環境の**package.jsonとgulpfile.js**をコピーした新しいディレクトリを作ります。今回は**wp-starter**という名前で作っていきます。  今回は、**Local by Flewheel**でWordPress環境を作り、その中の`/app/public/wp-content/themes`に`wp-starter`というテーマを作りました。そして、動作検証用に[WordPressテーマ制作スターターであるunderscores](https://underscores.me/)を入れてあります。  現在のディレクトリ内はこのようになっています。赤い丸が付いているファイルがコピーしてきたファイル、それ以外はunderscoresのファイルになります。 ![](https://olein-design.com/wp-content/uploads/2018/10/wp-starter.png) ### まずはnpm init

 ターミナルで`wp-starter`ディレクトリにアクセスします。`cd`とスペースを入れて、フォルダをぽいっとやるだけですね。（[前回の記事](https://olein-design.com/blog/gulp-starter)をご覧ください） ```
$ npm init
```

 実行すると、ターミナルで`package name`を聞かれます。何も入力せずにエンターを押していくと、元々の名称のままになりますので、今回はこちらは`wp-starter`と入力しておきました。 ```
package name: (myproject) wp-starter
```

 他はエンター連打で大丈夫です。 ### package.jsonに記載されているプラグインをインストールする

 コピーしてきた`package.json`に記載されているプラグインをインストールしておきましょう。 ```
$ npm install
```

 少し時間が必要になるかもしれませんが、これで以前作った環境で使用したプラグインを`node_modukes`にダウンロードしてくれます。（`node_modules`ディレクトリはこのタイミングではないはずなので、自動で作られます） これで準備完了です。ここから**WordPressテーマ開発用に編集**していきましょう。 ## 自動でrtl.cssを書き出す

 みなさん、rtlスタイルシートって知ってますか？**rtlはRight to Leftの略**で、**右から左に文字を書く文化圏の表示に対応するためのスタイルシート**となります。アラビア文字とかが該当しますね。 WordPressの場合には、該当する環境で表示された場合に自動的に`rtl.css`が読み込まれる仕組みになっています。 普段のクライアントワークには必要ないかもしれませんが、**WordPress公式ディレクトリに掲載することを考えているテーマには必要**になります。なので、対応する方法を覚えておきましょう。 必要なプラグインは、 - gulp-rtlcss

 だけです。 インストールしていきましょう。 ```
$ npm install gulp-rtlcss --save-dev
```

 そしてタスクを作ります。 ```

var rtlcss       = require( 'gulp-rtlcss' );

// create rtl.css
gulp.task( 'rtl', function() {
    gulp.src( './style.css' )
        .pipe( plumber() )
        .pipe( sourcemaps.init() )
        .pipe( rtlcss() )
        .pipe( rename({
            basename: 'rtl'
        }))
        .pipe( sourcemaps.write( './' ) )
        .pipe(gulp.dest( './' ) );
} );
```

 当初はSassコンパイル部分に追加しようと思いましたが別にしておきました。WordPressテーマ開発においては、基本的にルートにstyle.cssを置くことがほとんどだと思いますので、そのファイルをターゲットにして処理しています。 `rtlcss()`でLTR形式からRTL形式に変換して、`rename()`でファイル名を変更しています。そして、ルートに書き出しています。 試しに`src/assets/sass/`にstyle.scssなどを用意して以下のコマンドをターミナルで打ってみましょう。 ```
$ gulp rtl
```

 新しくルートに`rtl.css`が作られていれば問題ありません。 ## 監視タスクを作る

 以前は`default`タスクの中に`watch`させるコードを書いていました。（下は前回作ったコード） ```

//
// Default task
//
gulp.task( 'default', [ 'bs', 'sass', 'js.concat', 'js.compress', 'imagemin' ], function() {
    gulp.watch("./**/*.html", ['bs-reload']);
    gulp.watch("./src/assets/sass/**/*.scss", [ 'sass', 'bs-reload' ]);
    gulp.watch("./src/assets/js/*.js", [ 'js.concat', 'js.compress', 'bs-reload' ]);
    gulp.watch("./src/assets/image/*", [ 'imagemin', 'bs-reload' ]);
});
```

 今回は、`watch`タスクを作っておいて、それを`default`を動かした時に走らせるようにしたいと思います。また、ブラウザシンク部分も少し変更します。 この部分に必要なプラグインなどは特にありません。 ```

var reload = browserSync.reload; // reload を設定

// watch
gulp.task( 'watch', function(){
    browserSync.init({
        files: [ './**/*.php' ],
        proxy: 'http://*****.***' // 下の画像を例にすると http://gulpdev.wordpress
    });
    gulp.watch( './src/assets/sass/**/*.scss', ['sass', 'rtl', reload ]);
    gulp.watch( './src/assets/images/*', [ 'imagemin', reload ] );
    gulp.watch( './src/assets/js/**/*.js', [ 'js.concat', 'js.compress', reload ]);
});

// default task
gulp.task( 'default', [ 'watch' ] );
```

 `browserSyn.init()`で監視するPHPファイルを指定して、ローカル開発環境のURLを指定しています。`proxy`部分は、例えばLocal by FlywheelでWordPressを立ち上げたとして、その**サイトドメイン**をそのまま入力してください。 ![](https://olein-design.com/wp-content/uploads/2018/10/Local_by_Flywheel-1024x682.png) あとは、**Sassコンパイル、画像最適化、JavaScript結合・圧縮**部分の監視するディレクトリを指定しています。そして、先ほど作った`rtl`タスクはSassコンパイル部分に追記してあります。 最後に ```
gulp.task( 'default', [ 'watch' ] );
```

 で、`default`タスクを設定します。処理の内容は先ほど作った`watch`タスクを実行するだけになっています。 これで完成になります。 実行してみましょう。Local by Flywheelで使うWordPressを起動しておいてから下のコマンドを実行してみてください。 ```

$ gulp
```

 すると、こんな感じでターミナルに情報が出てきて、ブラウザが立ち上がりローカルのWordPressのトップページが表示されるはずです。 ```

[13:38:41] Using gulpfile ~/Local Sites/gulpdev/app/public/wp-content/themes/wp-starter/gulpfile.js
[13:38:41] Starting 'watch'...
[13:38:41] Finished 'watch' after 63 ms
[13:38:41] Starting 'default'...
[13:38:41] Finished 'default' after 20 μs
[Browsersync] Proxying: http://gulpdev.wordpress
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.11:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
```

 以上でWordPressテーマのGulp開発環境が出来上がりました。もっと便利な作り方はたくさんありますので、ご自身が使って便利な環境を作る足がかりにしていただければ幸いです。 今回のソースコードはこちらにあげてありますので、よろしければ参考にしてください。 https://github.com/Olein-jp/wp-starter