WordPress のテーマを作成した時に色々不便だなぁと思ったので、適当に環境を作ってみました。

開発環境は gulp.js, Sass, Slim で作成しています。Slim はどうも PHP のテンプレートに使えなさそうだったので、適当に PHP のコード埋め込める用にしています。

本当に出来栄えがやっつけなので、そのうち改善したいと思います。

テーマを作成して感じた事

最初にテーマを作成して感じた事を述べておこうと思うのですが、結構面倒臭い作業が多かったです。何が面倒臭かったのかと言うと、どういったテーマにしようが大体同じ様なコードになる (と思われる) 部分の (手作業での) 作成です。

例えば、ブログサイトを構築する場合、テーマに用いる関数なんてのはそうそう変わる事が無く、大体同じ用な構成になると思います。固定ページやシングルページなんてのも同様です。

なのに同じ様なコードを何回も書かないといけないのは不便すぎる、と思ったのが始まりです。
そして PHP と HTML で構成されたコードが管理し難いと思った為、Slim をコーディング時のテンプレートに使用し、PHP コードに変換する方法に至りました。

作った物

実際に作成した環境は、gulp で Sass と Slim を監視して CSS と PHP のコードを生成する物です。テーマにする際に zip 圧縮する必要があったので、ついでにセットアップ用のコードも作成しています。

興味を持って頂けた方は、gwp-theme-template という名前で GitHub にて公開していますので、どうぞ使ってクレームを入れて下さい。

使い方としてはリポジトリを clone し、そのディレクトリ内にて gulp watch するだけです。

$ git clone git@github.com:biwakonbu/gwp-theme-template.git sample_theme
$ cd sample_theme
$ gulp watch

gulp watch を実行する事で監視タスクを動かせます。後は Slim ディレクトリや Sass ディレクトリ内にて作業をすると、PHP、CSS ファイルを自動で作成してくれます。ついでに gulp compile で任意のタイミングで slim->html->php や scss-> css のコードをコンパイル出来る様にしています。

また、Slim で書いたコードに PHP を埋める方法ですが、いくつかパターンがあります。
とりあえずコードです。

doctype html
html[php=="<?php echo 'attribute embed code'; ?>"]
  head
    /! <?php echo 'sample code.'; ?>
    /!
      <?php
        echo 'multiple line code.';
      ?>

このコードには 3 種類の例を書いています。

Slim の HTML としてコメントを残す機能を利用してコードを埋め込む事が出来るのは (それによって標準のコメントが使えない問題が発生しているのですが、それは置いといて) 直ぐに理解出来ると思います。

違和感があるとすれば

php=="<?php ... ?>"

という部分ですが、これはタグの要素に PHP コードを埋め込む事が WordPress では必要だったので少々無理矢理でしたが入れる事にしました。
gulp-shell を利用して sed で処理している関係で複雑な処理はしておらず、現状では要素に入れる場合は一つのみのテンプレートの挿入となっています。これは、自分で使ってみたところ結構鬱陶しい制約だったので、早めに改善したいと思います。

後は基本的に Slim と Sass (Compass) の記述で問題無いので問題は無いかと思います。

テーマを作成する時にもう一声

このまま制作に入っても良いのですが、やはりコードの動作確認もしつつ作成をしたいと思うので、組み合わせると開発が楽な物を紹介しておきます。

それは、VCCW という Vagrant の Box です。
チームでのウェブ制作に、「Vagrant」と「VirtualBox」でMacにWordPress制作用の仮想環境を構築するで紹介されているのですが、非情に便利で、一々 WordPress の案件毎にサーバを立てる作業を行なう必要も無く、直ぐに開発を始められます。

そして、テーマの開発テンプレートをその VM 内の wordpress/wp-content/themes/ に置く事で VM 内の WordPress を自動更新しながら開発を行なえる様になります。

まとめ

ドッグフーディングしてみて分かった事は、Slim で HTML の構造を記述出来る事は簡潔で素晴しいという事と、PHP ファイル (function.php 等) そのものを利用する際には 生のHTML が PHP と混在して非常に辛いという二点でした。

今後の目的としては PHP ファイルが HTML と混在する必要が無い仕組みを考えたい (というか、Slim 主導で書きたい) という事です。現在は工夫して記述する事が求められているので、もっと自然な感じに書ける様に頑張ってみます。