WordPressテーマを自作してみる

急に思い立って、WordPressのテーマを自作してみようかと思ったのです。

最低限の運用はできるけど…

最近はWeb関連の仕事はすっかりご無沙汰になっているのですが、一時はPHPのフレームワークでサイトを構築する仕事をしたこともあって、その頃、WordPressはあまり予算はないけど急ぐ、みたいな仕事でいくつか利用してきた程度でした。入門書を見ながら、既存テーマにちょっと手を入れて、なんとかこなしましたーみたいな感じで、熟知するというにはほど遠かったというのが正直なところ。

でもここまで普及してくると、もうちょっとわかってた方がいろいろよさそうな気もするので、このサイトをWPで立ち上げたのを機に、すこしマジメにお勉強してみようかなということで、まずはテーマの自作にチャレンジしてみようかなと。

_s(アンダースコアズ)がよいらしい

とはいえ、まったくのゼロからテーマを作るってのはさすがに厳しいわけで、今回のわたくしめのような者にとって、最低限のベースを提供してくれるのが、_s(underscores https://underscores.me/) なのだそうです。WordPressの開発元たる Automattic 社の提供による、オリジナルテーマ開発用のテーマ。サイトに行って、適当な自分用のテーマ名を入れて「GNERATE」ボタンを押せば、テーマがダウンロードできます。

underscores.meのサイトのスクリーンショット
underscores.meのサイト

しかし、ここでちょっとまった、です。

普通にダウンロードされるこのテーマのstyle.cssは、854行もあります。これをそのままエディタでチクチクと修正していくということを想像すると、ちょっとモチベーション下がりますよね。

正直言って、わたくしめがWebデザインと距離をおくようになってしまった理由のひとつが、CSSの保守のめんどくささだったんですよ。セレクタやらなにやらが増えてくると、同じようなコードを何度も書かなければならず、変更があれば、延々修正を繰り返さなければならない。こんなの変数の1つも定義できれば一発だろー! とか思いながら、だんだんCSSを書かないですむ方の仕事を選ぶようになって、気づけばすっかりスタイルシート周辺の情勢に疎くなっちゃったという。

SASSってのがよいらしい

しかし、その「変数」も使える便利な記法 SASS(https://sass-lang.com)というものがあったんっすね! なんとなく名前を見かけたことはあったんだけど、Webデザインから遠ざかっていたこともあって、等閑視していたわけですが、よく調べてみると、CSS書きにまつわるめんどくささをいろいろ解消してくれそうだというわけで、今回は SASS を導入しつつのチャレンジにしようかと。

SASSの公式サイトのスクショ
SASSの公式サイト

で、脇にそれた話を本題に戻しますと、_sのダウンロード時にテーマ名を入れるテキストボックスの下に小さく「Advanced Otions」とあるじゃないですか。

underscores.meのサイトのスクショ拡大
このAdvanced Optionsね

そこをクリックしますと、いろいろオプションが展開されて、一番下に「_sassify!」というチェックボックスが出てまいります。はい、左様です。これをチェックするとCSSだけじゃなくて、その元になってるSASSファイルも合わせてダウンロードできるという寸法です。

_sassifyにチェックを入れる

さて、どうなることやら、続きは次回!

%d人のブロガーが「いいね」をつけました。