WP-Note Flexible2 v1.0.0 リリース
先日の WordPress テーマ更新にあわせて WP-Note Flexible2 v1.0.0 を作成した。
以下、開発メモ。
外観
旧 WP-Note Flexible は背景を濃い色で塗りつぶしており、文字色を明るめにすることで視認性を確保していた。今回は薄いグレーを背景として文字色をいじらなくても済むようにしている。大半のテーマは白などの明るめな背景に暗い文字という構成だろうから、この仕様を標準としたほうが汎用なはず。
開発スタイル
開発スタイルは先日の記事に書いた minimalflat2 と同様に gulp と Stylus で組み、Varying Vagrant Vagrants (以下 VVV) で動作確認。先日の記事にも書いたが VVV の Vagrantfile で config.vm.synced_folder を設定すると開発用フォルダの変更が動作中の VVV 内フォルダに同期される。設定は以下のように複数、定義できる。
# My WordPress Themes and Plugins
config.vm.synced_folder "~/Documents/dev/web/app/wp-theme-minimalflat2/src", "/srv/www/wordpress-default/wp-content/themes/minimalflat2"
config.vm.synced_folder "~/Documents/dev/web/app/wp-note-flexible2/src", "/srv/www/wordpress-default/wp-content/plugins/wp-note-flexible2"あとプラグイン開発してる途中で minimalflat2 のレイアウト崩れなどを見つけたため、そちらも修正。v1.0.1 としてリリースしておいた。
IcoMoon の衝突回避
先代テーマ minimalflat と旧 WP-Note Flexible ではアイコン フォントに Font Awesome を採用していた。どちらも CDN サイトがアクセスできなくなった時を考慮してフォントを同梱。そのためこれらが同時に実行されると Font Awesome が衝突する。
たまたま同バージョンを参照していたからよかったものの、実体が異なると想定外のアイコンを表示してしまう問題が発生していただろう。なぜこの問題に気づいたのかというと minimalflat2 と現行 WP-Note Flexible で IcoMoon を利用して衝突が起きたから。
Font Awesome と異なり IcoMoon を利用するときは必要最小のアイコンだけ組み込むことが多い。そのため標準 CSS の icomoon という font-face を利用すると、それらが混在するページで衝突する。IcoMoon のグリフ割り当ては e600 から連番となるため、衝突が発生しやすい。
よってアイコン関連の名前をユニークなものとした。この設定は IcoMoon で Generate Font を選んだ時に表示される画面の Preferences から変更できる。Font Name を指定すると font-family とフォント ファイルに反映される。Class Prefix はアイコンのクラス名における接頭語となる。
font-family は wpnf、クラス名は icon- ではなく wpnf-icon- を接頭語にした。minimalflat2 も同様に独自名を適用、相互に衝突回避している。
今後 IcoMoon を利用するときは常に独自名を設定する予定。