WordPressのテーマ作成( vccw + Gulp + Pug + Sass + browerSync )

# 概要
[開発しやすい環境の作り方~Web系~](https://qiita.com/ferretdayo/items/47937cfb38babcf17a20)
この記事を見て、gulpを初めて使って感動した自分です。
wordpress開発にも活用したいと思い、この記事を書きました。
基本的にこの記事の内容に沿っていますが、少しだけwordpress用に変えています。

# 環境
<img width="538" alt="スクリーンショット 2018-12-06 20.39.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/54d4bdad-9969-3d70-d337-9e031c025e3f.png">

- node v10.8.0
- npm v6.4.1
- gulp v3.9.1


# 最終的なファイル構成
最終的には、このようなファイル構成になります。
もっと綺麗にまとめていきたいですね、、。

```
wordpress_template/
├ js/
├ images/
├ scss/
│   └ style.scss
├ pug/
│   └ index.pug
├ node_modukes/
├ package-lock.json
├ package.json
├ gulpfile.js
├ header.php
├ footer.php
├ index.php
└ style.css
```
# 環境構築
## vccwの導入

wordpress開発の環境を作成します。
以下のページを参考にvccwを導入してください。

> 参考
> http://vccw.cc/
> [WordPressをVagrant環境にらくらくインストールする。 - VCCW](https://qiita.com/naru0504/items/58011181f2c271808c7f)
> [VCCWで自作テーマを作るための準備](https://qiita.com/nishina555/items/506bacd1dd7f2187567b)

wordpressのテーマを作成していくディレクトリは
`/path/to/vccw/wordpress/wp-content/themes/your_theme/`になります。

WordPress環境にアクセスできることを確認します。
http://vccw.test/
http://192.168.33.10/

WordPressにログインできることを確認します。
http://vccw.test/wp-login.php/

デフォルトでは以下の通りとなっています。

- Username: admin
- Password: admin


## Node.jsのインストール
まずGulpを使うためにはNode.jsが必要なので、インストールを行います。
https://nodejs.org/ja/

ターミナルで以下のコマンドを実行し、
バージョンが表示されることを確認してください。

```terminal:terminal
node -v
npm -v
```
※Node.jsをインストールすると同時にnpmもインストールされます

### フォルダ構成の構築
`/path/to/vccw/wordpress/wp-content/themes/`ディレクトリで以下のコマンドを実行します。

```terminal:terminal
mkdir wordpress_template
cd wordpress_template
mkdir scss pug images js
npm init -y
```
## Gulpのインストール
gulpを用いることによって、ファイルのコンパイルやブラウザのリロードを自動化することができます。
今回は以下のタスクをgulpを用いて自動化します。

|利用するモジュール|説明|
|---------------|-----|
|gulp-pug|pugファイルをhtmlファイルに変換|
|gulp-sass|sass(scss)ファイルをcssファイルに変換|
|gulp-rename|出力ファイルの名前を変える(.html=>.php)|
|gulp-plumber|gulpのタスクでエラーが出た際の強制終了を防止|
|browser-sync|ブラウザの自動リロード|

まずはグローバルにgulpをインストール。

```terminal:terminal
sudo npm install -g gulp
```

次にローカルにgulpをインストール。

```terminal:terminal
npm install --save-dev gulp
```



## gulpモジュールのインストール
`gulp-pug`, `gulp-sass`, `gulp-rename`, 
`gulp-plumber`, `brower-sync`をインストールします。

```terminal:terminal
npm install --save-dev gulp-pug gulp-sass gulp-rename gulp-plumber browser-sync
```


## wordpressに必要なファイルの作成

wordpress_templateフォルダに`header.php`と`footer.php`を作成します。

```php:header.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title><?php wp_title('|', true, 'right'); ?></title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
```

```php:footer.php
    <?php wp_footer(); ?>
  </body>
</html>

```


### pugファイルの作成
pugフォルダに`index.pug`を作成します。

```php:index.pug
.
<?php get_header(); ?>

.main
  h1 Hello
  p wordpress template

.
  <?php get_footer(); ?>
```


### scssファイルの作成
scssフォルダに`style.scss`を作成します。

```scss:style.scss
@charset "utf-8";
/*
theme Name: wordpress_template
version： 1.0.0
*/

.main {
  h1 {
    color: red;
    &:hover {
      color: blue;
    }
  }
}

```

## gulpfile.jsの作成
wordpress_templateフォルダに`gulpfile.js`を作成します。

```javascript:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var rename = require('gulp-rename');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
  var option = {
    outputStyle: 'expanded',
  };

  return gulp.src('./scss/**/*.scss')
  .pipe(plumber())
  .pipe(sass(option))
  .pipe(gulp.dest('./'))
  .pipe(browserSync.stream());
});

gulp.task('pug', function() {
  var option = {
    pretty: true,
  };

  return gulp.src(['./pug/**/*.pug'])
  .pipe(plumber())
  .pipe(pug(option))
  .pipe(rename({
    extname: '.php'
  }))
  .pipe(gulp.dest('./'));
});

gulp.task('browser-sync', function () {
    browserSync({
        // vccwで設定したipアドレス
        proxy: "192.168.33.10"
    });
});
gulp.task('reload', () => {
  browserSync.reload();
});

gulp.task('watch', function() {
  gulp.watch('./scss/**/*.scss', ['sass', 'reload']);
  gulp.watch('./pug/**/*.pug', ['pug', 'reload']);
});

gulp.task('default', ['browser-sync', 'sass', 'pug', 'watch']);

```


## 実行

### wordpressテーマの有効化
１度、pug=>html, scss=>cssのコンパイルを行っておきます。

```terminal:terminal
gulp pug
gulp sass
```

コンパイルに成功すれば、新しいテーマとして認識されるようになっているため、
wordpressのテーマの設定を行います。
http://192.168.33.10/wp-login.php/

wordpressにログインし、`外観`/`テーマ`をクリックし
`WordPress Template`のテーマを有効化します。

<img width="1294" alt="スクリーンショット 2018-12-06 19.29.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/5db54eca-ab28-ae13-bf71-14c3818bcc6a.png">

### gulp
有効化できたらteminalで以下のコマンドを実行します。

```terminal:terminal
gulp
```

ブラウザが開き、pugやscssを編集するとブラウザが自動でリロードされます。


![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.amazonaws.com/0/260131/5d3db202-72ec-1909-37bd-b324accff490.gif)

### ソースコード
- https://github.com/satokibi/wordpress_template

よりよい方法やアドバイスがあれば、教えてください。
最後まで読んでいただき、ありがとうございました。

# 参考文献
- [WordPressをVagrant環境にらくらくインストールする。 - VCCW](https://qiita.com/naru0504/items/58011181f2c271808c7f)
- [VCCWで自作テーマを作るための準備](https://qiita.com/nishina555/items/506bacd1dd7f2187567b)
- [開発しやすい環境の作り方~Web系~](https://qiita.com/ferretdayo/items/47937cfb38babcf17a20)
- [GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする](https://qiita.com/KazuyoshiGoto/items/8b788279490a6dd006d9)
- [WordPress のテーマ開発に絶対必須な gulp プラグイン９選！](https://original-game.com/how-to-make-wordpress-theme2/)