ブログのテーマ更新 - minimalflat2 v1.0.0

April 12, 2015開発minimalflat2, WordPress, テーマ

ひさしぶりに WordPress テーマを作成した。

akabekobeko/wp-theme-minimalflat2

当初、直前まで利用していた minimalflat を更新するつもりだったが style.css のあまりの長さにめげてしまった。そのため色調や大まかな構成だけ引き継いだ新テーマとして実装することにした。名前は安直に minimalflat2。プロダクト名に数字が入るのはどうかと思いつつ ID3v1 と ID3v2 なんて先例もあるのでよしとする。

以下、開発メモ。

gulp

最近、公私ともに gulp を利用している。Node モジュールの充実と gulp 自体の管理しやすさから、なにか定形作業があばとりあえず gulp か Node 向け自作スクリプトで対応という感じ。今回のテーマ開発でも Stylus で記述した CSS のコンパイル & 結合、リリース用イメージ生成に gulp を採用した。

記事冒頭の GitHub リポジトリにあるとおりプロジェクト内の src ディレクトリで開発して dist にリリース用イメージを出力するようにした。こうすることで src 内の構成は自由にできる。例えばレイアウトや外観の検討用 HTML などラフスケッチみたいなものを入れてもよい。

Stylus と CSS 結合

WordPress テーマは style.css が必須でこれにテーマ情報や CSS を定義してゆく。しかしファイル単体でスタイルを管理すると長大になりがちで非常に辛い。複数ファイルに分けることも可能だが、そうすると読み込みを functions.php に定義するのが面倒だ。

というわけで Web フロントエンド開発によくあるファイル結合を利用することにした。開発時は複数のファイルに分割しておき必要に応じて単一の style.css を生成する。

CSS は Stylus で記述しているため gulp タスクではコンパイル後に結合。処理は以下のようになる。

var gulp   = require( 'gulp' );
var $      = require( 'gulp-load-plugins' )();
var config = require( '../config.js' ).css;

/**
 * Stylus ファイルをコンパイル & 結合します。
 *
 * @return {Object} ストリーム。
 */
gulp.task( 'css', config.depends, function() {
    return gulp.src( config.src )
        .pipe( $.plumber() )
        .pipe( $.sourcemaps.init() )
        .pipe( $.stylus() )
        .pipe( $.concat( config.bundle ) )
        .pipe( $.sourcemaps.write( '.' ) )
        .pipe( gulp.dest( config.dest ) );
} );

結合を前提とすることで、分割されたファイル名は自由につけられる。そのため視認しやすい PascalCase を採用。

結合には gulp-concat を利用しているのだが、これで結合順を固定する場合は gulp.src の配列で制御する。style.css 先頭にテーマ情報を記述したいのと normalize.css や基本レイアウト情報などの定義順依存を考慮して全ファイルを明示的に指定している。詳細は Git リポジトリの /gulp/config.js を参照のこと。

私のマシンではこのタスクを実行しても 1 秒かからない感じだから開発中は gulp watch でファイル監視 & タスク実行させている。

WordPress テスト環境

これまで WordPress テーマやプラグインの動作テストは XAMPP/MAMPP や VMware 上に構築した CentOS で実施していたのだが、今回は Varying Vagrant Vagrants (以下 VVV) を利用してみた。

Varying-Vagrant-Vagrants/VVV

これは Vagrant で管理する WordPress 環境イメージ。Vagrant が動くならリポジトリを取得して vagrant up するだけで WordPress 環境が手に入る。以下、セットアップ手順。

VirtualBox をインストール
Vagrant をインストール
VVV リポジトリを clone、または ZIP ダウンロードする
ターミナル、またはコマンドプロンプトで Varying Vagrant Vagrants リポジトリのフォルダに移動
ターミナル、またはコマンドプロンプトで vagrant up を実行、VM 起動 & 初期設定が自動実行される (初回は時間がかかる)
Web ブラウザで http://192.168.50.4/ にアクセスしてインデックスページが表示されることを確認
SSH 接続は vagrant ssh、VM 終了は vagrant halt で

デフォルトだとインデックスページのリンク先が IP ではなく local.wordpress.dev などとなっているため、これらを hosts ファイルに追加しておく。OS X なら /etc/hosts、Windows は C:\Windows\System32\Drivers\etc\hosts を編集することになる。このファイルを見つけたらテキストエディターで開き、以下を追記。

192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev src.wordpress-develop.dev build.wordpress-develop.dev

保存には管理者権限が必要。OS X ならターミナルから sudo vi /etc/hosts するか GUI エディタで編集保存するとユーザーのパスワードを求められるので、そこで入力すればよい。Windows の場合はテキストエディターを管理者として実行しておくのが楽。

保存後に VM を起動した後、Web ブラウザから http://local.wordpress.dev/ などにアクセスすると WordPress サイトが表示されるようになるはず。

次は自作テーマやプラグインを VM 上の WordPress へ認識させる。VVV リポジトリ内の /www/wordpress-default/wp-content にある themes や plugins が http://local.wordpress.dev/ でアクセスした時のテーマとプラグインの参照先。ここにテーマやフォルダの実体を配置すれば VM 上の WordPress から認識される。

しかし開発フォルダがここに縛られるのは嫌なのでシンボリックリンク運用したくなる。しかし試してみると分かるがシンボリックリンクは VM から認識されない。開発フォルダと VM 用フォルダを個別に用意して rsync で同期する手もあるが、これはいかにも冗長だ。

こうした方法を利用せずとも Vagrant にはホスト環境と VM 上のフォルダを同期させる仕組みが標準で用意されているので、こちらを使おう。VVV リポジトリ直下にある Vagrantfile をテキストエディターで開くと override.vm.synced_folder という設定がいくつか見つかる。これが同期設定。標準だと

  # The Parallels Provider does not understand "dmode"/"fmode" in the "mount_options" as
  # those are specific to Virtualbox. The folder is therefore overridden with one that
  # uses corresponding Parallels mount options.
  config.vm.provider :parallels do |v, override|
    override.vm.synced_folder "www/", "/srv/www/", :owner => "www-data", :mount_options => []
  end

のような感じで VVV リポジトリ内の www フォルダを VM 上の /srv/www と同期させている。自前の設定はこれらの後に追加すればよい。今回のテーマ開発では以下のようにした。

  # My WordPress Theme
  config.vm.synced_folder "~/Documents/dev/web/app/wp-theme-minimalflat2/src", "/srv/www/wordpress-default/wp-content/themes/minimalflat2"

これで開発用フォルダ内の src で編集した内容が VM 上のテーマ内 minimalflat2 フォルダに同期される。プラグインも同じ方法でゆけるはず。

IcoMoon

minimalflat ではアイコンに Font Awesome を利用していたが WordPress テーマで利用するにはアイコンが多すぎるしサイズも大きい。そこで今回は IcoMoon を採用した。

Icon Font & SVG Icon Sets ❍ IcoMoon

このサイトでは公開されているアイコンと自前でアップロードした SVG を組み合わせたフォントを生成できる。はじめは gulp でアイコンフォント生成する記事で書いた方法で自作するつもりだったけど、アイコンが少ないとはいえ面倒な図形もあったので IconFont の公開しているものへ頼ることにした。

IcoMoon でフォント生成すると各 Web ブラウザー向けのフォントファイルと共に font-face などを指定した CSS も付属する。今回のテーマでは CSS を Stylus で書いているため、これを Stylus 化して CSS 結合に含めている。

アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

ブログのテーマ更新 - minimalflat2 v1.0.0

gulp

Stylus と CSS 結合

WordPress テスト環境

IcoMoon