目次・あらすじ
僕はWordPressでPHPを読み書きできるようになった
最新のWordPress公式テーマを使って、CSSとPHPを勉強しなおし
WordPressの2015年版デフォルトテーマ「Twenty Fifteen」。見た目の美しさと構造のわかりやすさが両立した素晴らしいテーマです。
最新のHTML/CSS/PHPの生きた教材となるので、僕は時々最新のテーマを元にカスタマイズして、オリジナルテーマを作る事にしています。
こうすることで、長くサイト作りをしていると陥りがちな、コードの秘伝のタレ化を防ぐ事ができるのが良いですね。
5731行CSSをSASS化してファイル分割した
ただ、CSSプリプロセッサ全盛の時代、元テーマのCSSの編集は面倒で仕方ないです。
メインのCSSファイルの「style.css」は5731行!
こんなのをまともに触ると、気が狂ってしまうので、せめてファイル分割して見通しを良くします。
幸い元テーマの上部にはコードのインデックスが示されているので、とりあえずこれに従って分割するだけで、大体整理することができます。
ここから更に変数やMixinを切り出して整理したら良いんだけど、まだこのテーマ自体の理解不足なので、とりあえず保留です。
見ていくと、特にMedia Query周りの書き方は参考になりますね。 まぁ、画面サイズ毎に7種類も作るのは大変なので、これを元にオリジナルテーマを作るにしても、実際は2,3個に減らす事になるでしょう(笑)
GitHubにアップしたよ
そんな訳で、折角ブログ作ったんだしと、ついでにGitHubにアップしてみました。 GigHubのお作法が分からない + 英語でメッセージなんか書けないけど、まぁ良いっしょ(笑)
同様の準備をされる人には少し手間が無くなって便利なはずです。
soishi/Twenty-Fifteen-to-Sass-Compass
SASS化とファイル分割以外はほぼ何も手を加えていない物なので、単純に便利に使えると思いますよ。