Mimizuku をアップデートして、いろいろな機能を composer で管理するようにしました

昨日「WordPressの有料テーマをつくって販売したい」という記事を書きました。複数テーマを販売するとして、必ず重複する部分というのがでるはずですが、もし重複部分に不具合があると全てのテーマでその部分にパッチをあてなければいけません。これはすごく大変だし、ミスが起こる可能性が高いです。なので薄いベーステーマ（_s のように直接カスタマイズする想定のテーマ）を用意し、重複部分は機能ごとに composer package に切り出して、ベーステーマから composer require する作戦にしました。

で、ベーステーマを0から作るのも時間がかかってもったいないので Mimizuku をベーステーマにすることにしました。Mimizuku はビューコントローラーの機能をもった薄いテーマで、single.php などのテンプレートファイルに直接 HTML を書くのではなく、テンプレートはレイアウトファイルとビューファイルのロードを行うだけにすることでレイアウト、ビューを切り離しやすくしているテーマです。なので Mimizuku をベースにすればテーマごとにデザイン（HTML）が違ってもそこは切り離して考えられるというメリットがあるのですが、ビューコントローラーの機能自体を Mimizuku が持ってしまっているので直接書き換えるベーステーマとして使うためにはその部分を外に切り出す必要があります。そういうことでいろいろ外に出してしまって、切り出したものは composer で管理するようにしました。

composer packages

いろいろつくりました。

inc2734/wp-breadcrumbs

これはもともと作っていたものですがパンくずを表示するためのライブラリです。

inc2734/wp-ogp

OGP のメタタグで使う値を生成するライブラリ。

inc2734/wp-oembed-blog-card

URL をはりつければ oEmbed で勝手にブログカードになるようにするライブラリ。一応 .scss ファイルも入っていて、使いたい人は @import すればそれっぽいデザインがあたるようにしています。

inc2734/wp-view-controller

Mimizuku の肝ともいえるビューコントローラー機能も切り出しました。ビューコントローラー機能の詳細はこちら。

inc2734/wp-basis

Mimizuku は CSS フレームワークとして Basis を使っていますが、Basis は命名規則が MindBEMding なので WordPress が出力する HTML に付与されている class を書き換える必要があります。その辺をよしなにやってくれるライブラリです。Basis の読み込みについては Sass でやりたい人もいれば CSS を使いたい人もいるでしょうし、ということでテーマ側で好きに読み込んでくださいということにしています。

inc2734/wp-customizer-framework

以前「Theme Customization API をそのまま使うと冗長で辛くなってきたのでもっと楽できるクラスを作った話」というのを書きまして、ようは Habakiri でカスタマイザーを使うときに、デフォルトの Customizer API を使うのは結構辛かったのでカスタマイザーのフレームワークを作ったという話なのですが、これは Habakiri で使うだけのために作ったので結構機能や使い勝手が中途半端でした。そこで 0 ベースで作り直したのがこのライブラリです。こんな感じで使えます。

$Panel = $Customizer->Panel(
	'panel-name',
	[
		'title' => 'panel-name',
	]
);

$Section = $Customizer->Section(
	'section-name',
	[
		'title' => 'section-name',
	]
);

$Controller = $Customizer->Control(
	'color', // Control type
	'control-id',
	[
		'label'   => 'Header Color',
		'default' => '#f00',
	]
);

$Customizer->register( $Controller )->join( $Section )->join( $Panel );

その他やりたいこと

テーマ自体はこれでだいぶ薄くできたと思うのですが、CSS 部分がちょっと微妙だなぁという気がしてきています。CSS は前述したように Basis を使っていて、Basis はどんなサイトのベースにも使えるくらい薄いというコンセプトで作ったので他のフレームワークに比べれば全然薄いのですが、使い込むに連れ、もっと最低限で良いと思うことが増えてきました。例えばデフォルトではボタンに枠線がつきますが、デフォルトでは枠線いらないとか。そうすると見た目的にはただ文字があるだけなので駄目だよなぁと思って枠線をつけていたのですが、どうせ上書きすることを考えると無いほうが良いなぁと。グリッドシステム（Flexbox)まわりももう少しスマートに書けそうな気がしているので、その辺もあわせて全体的に軽量化したいなと思います。