WordPress #4 | オリジナルテーマの開発スタート

WordPress開発4日目。
もうこれ以上は遅らせられないと、とりあえず旧式のPHPベースでいいからとテーマ開発をはじめた。今日は最初の一歩ということで少しずつ勘を取り戻しながらフロントページの開発を進める。

手間どったのはgulpを使ったTypeScriptの自動コンパイルで最終的にWordPressのテーマ開発用に組むのに調べ物含めて3時間程度かかってしまった。そもそもこれで正しいのかどうかも分からないが、とりあえずは思った通りにコンパイル出来ているので良い。

gulpfile.js

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));
// TypeScriptをコンパイルするプラグインの読み込み
const ts = require("gulp-typescript");
const tsProject = ts.createProject("./tsconfig.json");

const srcFile = "./src/main.ts";
const output = "./assets/js";

function scss(cb) {
  gulp.watch("src/styles/**/*.scss", () => {
    // style.scssの更新があった場合の処理

    // style.scssファイルを取得
    return (
      gulp
        .src("src/styles/style.scss")
	// Sassのコンパイルを実行
	.pipe(
	  sass({
            outputStyle: "expanded",
            sourceComments: true
          })
	  // Sassのコンパイルエラーを表示
	  // (これがないと自動的に止まってしまう)
          .on("error", sass.logError)
        )
        // cssフォルダー以下に保存
        .pipe(gulp.dest("./"))
    );
  });
  cb();
}

function typescript(cb) {
  gulp.watch("src/**/*.ts", () => {
    return (
      gulp
        .src(srcFile)
	.pipe(tsProject())
	.pipe(gulp.dest(output))
      )
  });
  cb();
}

exports.default = gulp.series(scss, typescript);

最終的なテーマディレクトリのファイル構成はこんな感じ

とりあえずフロントページのメインエリアは実装完了。明日中にはフロントページを完成させたいなあ。