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

18926 ワード
Sass pug WordPress フロントエンド WordPress テキストリンク

概要

開発しやすい環境の作り方~Web系~
この記事を見て、gulpを初めて使って感動した自分です。
wordpress開発にも活用したいと思い、この記事を書きました。
基本的にこの記事の内容に沿っていますが、少しだけwordpress用に変えています。

環境

  • 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.phpとfooter.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テーマの有効化

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

terminal
gulp pug
gulp sass

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

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

gulp

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

terminal
gulp

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

ソースコード

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

参考文献