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

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

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

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

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

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 テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

コメントをどうぞ!

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