Edited at

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


概要

開発しやすい環境の作り方~Web系~

この記事を見て、gulpを初めて使って感動した自分です。

wordpress開発にも活用したいと思い、この記事を書きました。

基本的にこの記事の内容に沿っていますが、少しだけwordpress用に変えています。


環境

スクリーンショット 2018-12-06 20.39.24.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

VCCWで自作テーマを作るための準備


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

node -v

npm -v

※Node.jsをインストールすると同時にnpmもインストールされます


フォルダ構成の構築

/path/to/vccw/wordpress/wp-content/themes/ディレクトリで以下のコマンドを実行します。


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

sudo npm install -g gulp


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


terminal

npm install --save-dev gulp



gulpモジュールのインストール

gulp-pug, gulp-sass, gulp-rename,

gulp-plumber, brower-syncをインストールします。


terminal

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



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

wordpress_templateフォルダにheader.phpfooter.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(); ?>>



footer.php

    <?php wp_footer(); ?>

</body>
</html>



pugファイルの作成

pugフォルダにindex.pugを作成します。


index.pug

.

<?php get_header(); ?>

.main
h1 Hello
p wordpress template

.
<?php get_footer(); ?>



scssファイルの作成

scssフォルダにstyle.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を作成します。


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テーマの有効化

1度、pug=>html, scss=>cssのコンパイルを行っておきます。


terminal

gulp pug

gulp sass

コンパイルに成功すれば、新しいテーマとして認識されるようになっているため、

wordpressのテーマの設定を行います。

http://192.168.33.10/wp-login.php/

wordpressにログインし、外観/テーマをクリックし

WordPress Templateのテーマを有効化します。

スクリーンショット 2018-12-06 19.29.41.png


gulp

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


terminal

gulp


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

ezgif.com-gif-maker.gif


ソースコード

よりよい方法やアドバイスがあれば、教えてください。

最後まで読んでいただき、ありがとうございました。


参考文献