2016年も3月になってしまったし、そろそろテーマをTwenty Fifteenから変えるか～と思い立って、数日前からTwenty Sixteenを試してみてました。
Twenty Sixteen、見た目がシンプルでカスタマイズのベースにするには良さそう、なんて最初は思ってたのですが、いざカスタマイズをはじめてみるとHTMLやCSSが全然シンプルじゃなくて（なんやかんやでWordPressの色んな機能に対応してるみたいですし）大変そうだなぁと思ったので、Twenty Sixteenは見限って、テーマを自作してみました。
（冷静に考えるとそっちの方が大変だろ！と思いますし、実際すごく大変でしたw）
今まで何度かWordPressのテーマを作成してきましたが、新規開発度はこれまでで一番高いかもしれません。

Semantic UIの話

自作といっても、CSSに関してはかなりSemantic UIに頼ってます。
しかしこのSemantic UIがなかなかのクセモノでした。

まずはそのクセモノっぷりの前に特徴について。
私もよく分かってないんですがなんか色々セマンティックな感じらしく、例えば以下のような可読性が高い感じでクラス指定を書くといい感じに表示してくれるわけです。
（3カラムのグリッドで画面が狭い場合は1列になる指定）

<div class="ui stackable three column grid">
  …
</div>

すごい！オシャレ！かっこいい！

でも私が思うに、他のCSSフレームワークに対するSemantic UIのアドバンテージはここだけです。
それでも他のCSSフレームワークに対してディスアドバンテージが無い or 少ないなら十分なのですが、残念ながら実際は結構ダメな点が多い感じです。

Semantic UIのダメな点（個人の印象）

1. 周囲のHTMLの構造に依存してるものが多く、クラス指定だけ書いても動かない場合が多い
2. なんかレイアウトに関係してなさそうな部分にもimportantが多用されてて、ちょっと変えたいときに困る事が多い
3. ちゃんとレスポンシブに対応してないUIパーツが多い

1に関してはドキュメントに明記されてない場合がほとんどなので、試行錯誤を繰り返したりソース読んだりして気合で乗り越えるしかない感じです。

2に関してはどうしようもない（Semantic UIのソースを書き換えてビルドし直すという手はありますが）ので、変えたい部分にimportant指定があたらないよう頑張って避けるしかないですね。

3に関しては、例えば次のような感じで、itemがたくさん入ってて横幅からはみ出しそうなmenuがあったとしても、一切折り返し等はされないです。（突き抜ける）

<div class="ui menu">
  <a class="item">…</a>
  ︙(たくさんitemがある)
  <a class="item">…</a>
</div>

こういう場合、menuのclassにstackableを追加するだけでよい、ということになっているのですが、HTMLやスタイルが複雑になってくるとちゃんと動かなかったり見た目や動きが微妙になったりすることが多いです。
なので結局メディアクエリを駆使して画面幅に応じてUIを切り替えるようHTMLやCSSを書くなんてことを、地道にやらざるをえなかったりします。

これらの問題は他のCSSフレームワークでもよくあることかもしれませんが、Semantic UIの場合はちょっと多い感じがしますね。

ただし、他と比べなければ良い点もたくさんあります。
UIパーツがそれなりに揃ってますからね。
フルスクラッチでCSS書くのに比べればやはり圧倒的に楽なのには違いないです。

Semantic UIとWordPress

WordPressでテーマを作る時って、色んなテンプレートタグを使うことになるんですが、便利なものは大抵いきなりHTMLを出力するようになっています。（例えば the_post_navigation とか）
でも先に挙げたSemantic UIのダメな点（特にHTMLの構造への依存度が高い点）のために、そのままではまともにスタイルがあたらないので、出力されるHTMLを完全にコントロールしたいわけです。

しかしそう思っても、テンプレートタグの処理の中で使用される内部データに直接アクセス出来ない事が多いので難しいです。
（というかWordPressのソース読むと、技巧的なコードの中にechoが散りばめられていたりとかザラで、データの処理と出力の処理を分けるという発想があまり無いみたいです。）

なので結局WordPressのソースを読んで、似たような関数を作って…てなことになりがちで、結構大変でした。
まぁちょっとした部分は、テンプレートタグが出力したHTMLを正規表現で置換したりして誤魔化してたりするんですが…（WordPressの仕様が変わったときがちょっと怖い）

あと、出力されるHTMLを完全にコントロールする必要がない場合はフィルターフック等で事足りることも多いのですが、それでも意外とフィルターフックって中途半端なうえに粒度が小さくないものが多いので、ちょっとしたカスタマイズをしたいだけなのに、かゆいところに手が届かない場合も多いですよね。

自作テーマについて

ビャーっと作ったので、ソースは汚いですし既に不具合もいくつか発見してます。
これから地道に育てていこうかなと思っています。

そういえばこれまで使っていたTwenty Fifteen、なんかずっと使ってたイメージが自分の中にあったのですが、今確認してみると「使い始めた」という記事を書いてから半年も経ってなかったんですよね。
短かい間だったけどありがとう > Twenty Fifteen