1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。

WordPress テーマ自作シリーズ、第2回目です。
今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。

このシリーズの前回の記事はこちらです。
WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

目次
  1. gulp について
  2. ディレクトリについて
  3. gulp-sass
  4. gulp-pug
  5. gulp-rename
  6. pug-php-filter
  7. gulp-babel
  8. gulp-watch
  9. gulp-plumber
  10. browser-sync
  11. run-sequence
  12. まとめ。(全体の gulpfile.js サンプル)

gulp について

gulpは、sassのコンパイルをはじめとし、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。

gulp
gulp

詳しい使い方はこちらのページをご覧ください。
gulpでsassをcssにコンパイル。インストール&便利な使い方。

ディレクトリについて

今回はこのようなフォルダ構成になっております。

theme/
∟vccw/wordpress/wp-content/themes/mytheme/
∟src/
    ∟js/
        ∟script.js
    ∟pug/
        ∟index.pug
    ∟sass/
        ∟style.sass
∟gulpfile.js
∟node_modules/

gulp-sass

gulp-sass は、 Sass を CSS にコンパイルしてくれるプラグインです。
Sass
sass

SCSS , SASS どちらにも対応しています。

インストールは以下のコマンドを入力してください。

$ npm install gulp-sass --save-dev

私は SASS 派ですので、SASSの例を挙げておきます。

gulpfile.js

'use strict';

const
gulp = require('gulp'),
sass = require('gulp-sass');

gulp.task('sass', () => {
	gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});


コンパイル前(style.sass)

.nav
  padding: 0
  margin: 0
  &.nav--horizontal
    display: table
    width: 100%
    table-layout: fixed
    list-style: none

コンパイル後(style.css)

.nav {
  padding: 0;
  margin: 0; }
  .nav.nav--horizontal {
    display: table;
    width: 100%;
    table-layout: fixed;
    list-style: none; }

SASS と SCSS の違いを知りたい人は、こちらの記事をご覧ください。
SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

※SASS を強要するものではありません。

gulp-pug

gulp-pug で、Pug を HTML にコンパイルできます。

インストールは以下のコマンドを入力してください。

$ npm install gulp-pug --save-dev

gulpfile.js

'use strict';

const
gulp = require('gulp'),
pug = require('gulp-pug');

gulp.task('pug', () => {
	gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});


コンパイル前(index.pug)

doctype html
html
	head
		title タイトル
	body
		h1 見出し
		p 本文

コンパイル後(index.html)

<!DOCTYPE html><html><head><title>タイトル</title></head><body><h1>見出し</h1><p>本文</p></body></html>

ただ、このままでは HTML ファイルが出力されてしまいますので、 WordPress のテーマを作ることができません。
そこで、 HTML を PHP に変換(リネーム)します。

gulp-rename

gulp-rename を使うことで、拡張子を変更することができます。

インストールは以下のコマンドを実行してください。

$ npm install gulp-rename --save-dev

gulpfile.js

'use strict';

const
gulp	= require('gulp'),
pug	= require('gulp-pug'),
rename	= require('gulp-rename');

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

これで、 HTML ではなく PHP ファイルが吐き出されます。
しかし、 Pug を使う上で、 PHP を使うには、少し工夫が必要です。

一つは、 | などの記号を使って、書く方法もありますが、今回は Pug で PHP が使えるプラグインを使おうと思います。

pug-php-filter

pug-php-filter を使えば、 Pug 上で簡単に PHP を使うことができます。

インストールは以下のコマンドを実行してください。

$ npm install pug-php-filter --save-dev

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
pug		= require('gulp-pug'),
rename		= require('gulp-rename'),
pugPHPFilter	= require('pug-php-filter');

gulp.task('pug', () => {
	let option = {
		pretty: true,
		filters: {
			php: pugPHPFilter
		}
	}
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug(option))
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});


コンパイル前(index.pug)

doctype html
html
	head
		title タイトル
	body
		:php
			echo "hello world";

コンパイル後(index.html)

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body><?php echo "hello world"; ?></body>
</html>

gulp-babel

gulp-babel を使うと、 ES6 以降のソースを、古いブラウザでも使えるように変換してくれます。

Babel
babel

gulp-babel と同時に、 babel-preset-env も使うといいと思います。

インストール

$ npm install gulp-babel babel-preset-env --save-dev

gulpfile.js

'use strict';

const
gulp = require('gulp'),
babel = require('gulp-babel');

gulp.task('babel', () => {
	return gulp.src('theme/src/js/**/*.js')
	.pipe(babel({
		presets: ['env']
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme/js'));
});

script.js (コンパイル前)

class Monster {
    constructor(name, atk, def) {
        this.name = name;
        this.atk = atk;
        this.def = def;
    }
    info() {
        console.log(`名前 : ${this.name}
攻撃力 : ${this.atk}
守備力 : ${this.def}`);
    }
}
 
let slime = new Monster('スライム', 120, 150);
let zombie = new Monster('ゾンビ', 300, 230);
let dragon = new Monster('ドラゴン', 15300, 14200);
 
slime.info();
zombie.info();
dragon.info();

script.js (コンパイル後)

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Monster = function () {
    function Monster(name, atk, def) {
        _classCallCheck(this, Monster);

        this.name = name;
        this.atk = atk;
        this.def = def;
    }

    _createClass(Monster, [{
        key: 'info',
        value: function info() {
            console.log('\u540D\u524D : ' + this.name + '\n\u653B\u6483\u529B : ' + this.atk + '\n\u5B88\u5099\u529B : ' + this.def);
        }
    }]);

    return Monster;
}();

var slime = new Monster('スライム', 120, 150);
var zombie = new Monster('ゾンビ', 300, 230);
var dragon = new Monster('ドラゴン', 15300, 14200);

slime.info();
zombie.info();
dragon.info();

gulp-watch

gulp-watch を使うことで、ファイルを監視し、変更があった場合に自動でタスクを実行します。
インストールは以下のコマンドを実行してください。

$ npm install gulp-watch --save-dev

gulpfile.js

'use strict';

const
gulp	= require('gulp'),
sass	= require('gulp-sass'),
pug	= require('gulp-pug'),
watch	= require('gulp-watch');

gulp.task('watch', () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

こうすることで、 sass や pug ファイルに変更があった時に、それぞれのコンパイルを実行します。

gulp-plumber

先ほど紹介した gulp-watch では、コードにエラーがあったりすると、強制終了してしまい、再度 gulp watch を実行する必要があります。
gulp-plumber を使うことで、強制終了を防ぐことができます。

インストール

$ npm install gulp-plumber --save-dev

gulpfile.js

'use strict';

const
gulp			= require('gulp'),
sass			= require('gulp-sass'),
pug				= require('gulp-pug'),
watch			= require('gulp-watch'),
plumber			= require('gulp-plumber');

gulp.task('watch', () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(plumber())
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(plumber())
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

browser-sync

browser-sync を使うことで、様々なブラウザや端末で同期させ、確認することができるようになります。
コンパイル時にブラウザを再読み込みする機能もありますが、それは後ほど紹介します。

インストール

$ npm install browser-sync --save-dev

今回は、 vccw にて、ローカル WordPress 環境を整えましたので、 proxy に vccw.test を指定します。

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
sass		= require('gulp-sass'),
pug		= require('gulp-pug'),
watch		= require('gulp-watch'),
browserSync	= require('browser-sync').create();

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

スマホで確認したい場合は、gulp watchを実行した時にターミナルに表示される、 Access URLs の External の右のアドレスをスマホで見れば、スマホとPCで同期することもできます。

[Browsersync] Access URLs:
 ---------------------------------------
Local: http://localhost:3000
External: http://192.168.xx.xxx:xxxx   <- この部分
 ---------------------------------------
 UI: http://localhost:3001
 UI External: http://192.168.xx.xxx:xxxx
 ---------------------------------------

run-sequence

run-sequence を使えば、 gulp のタスク処理の、並列、直列を指定することができます。
つまり、順番に行うタスクと、同時に行うタスクを指定できるということです。

というわけで、 run-sequence を使って、先ほど紹介した browser-sync のブラウザの再読み込み機能を、コンパイルが実行された後に行うというふうにしてみます。
インストール

$ npm install run-sequence --save-dev

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
sass		= require('gulp-sass'),
pug		= require('gulp-pug'),
watch		= require('gulp-watch'),
browserSync	= require('browser-sync').create(),
runSequence	= require('run-sequence');

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('execution');
	})
});

gulp.task('execution', (calback) => {
	runSequence(
		['sass', 'pug'],
		'reload',
		calback
	)
});

gulp.task('reload', () => {
    browserSync.reload();
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

まとめ。(全体の gulpfile.js サンプル)

今回のまとめとして、使ったプラグインの設定全体の gulpfile.js のサンプルです。

gulpfile.js

'use strict';

const
gulp			= require('gulp'),
sass			= require('gulp-sass'),
pug				= require('gulp-pug'),
pugPHPFilter	= require('pug-php-filter'),
rename			= require('gulp-rename'),
babel			= require('gulp-babel'),
watch			= require('gulp-watch'),
plumber			= require('gulp-plumber'),
runSequence		= require('run-sequence'),
browserSync		= require('browser-sync').create();

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('execution');
	})
});

gulp.task('execution', (calback) => {
	runSequence(
		['sass', 'pug', 'babel'],
		'reload',
		calback
	)
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('reload', () => {
    browserSync.reload();
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(plumber())
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	let option = {
		pretty: true,
		filters: {
			php: pugPHPFilter
		}
	}
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(plumber())
	.pipe(pug(option))
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('babel', () => {
	return gulp.src('theme/src/js/**/*.js')
	.pipe(plumber())
	.pipe(babel({
		presets: ['env']
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme/js'));
});

自分の環境に合わせて、使ってください。
以上、WordPress のテーマ開発に、絶対必須な gulp プラグイン9選とその使い方でした。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

コメントをどうぞ!

メールアドレスが公開されることはありません。