WordPress のテーマをフルスクラッチしてみた
ここ最近、ブログのテーマを変えたいなぁと考えてた。
今までのテーマは iNove を改造 (初代) したり Twenty Eleven の子として作成 (二代目) していたっけ。しかし元があるとカスタマイズにおいてその構造を意識せざるをえない。そしてなんとなく窮屈に感じられてイマイチ手を入れる気がおきなかった。
ならばいっそテーマのフルスクラッチに挑戦するのはどうだろう？ゼロから作ることで WordPress への理解も深まるだろうし今回はその機会として最適ではないか。というわけでここ二週間ほどテーマ開発をおこない、そこそこ動くようになったので本ブログに反映してみた。テーマ名は akabeko2013。通算で三代目。
WordPress 公式テーマへの申請は審査とか面倒そうなので迷ってるがテーマ一式は GitHub リポジトリに公開したので興味を持たれた方はどうぞ。ライセンスは GPL。改変、フォークはご自由に。
おまけとして開発にあたり参考にした資料やサービス、考察などを書いておく。
開発環境
テーマの開発は MacBook Pro 15 Retina ME665J/A 上でおこなった。使用したアプリは以下。
MAMP
ローカル環境におけるテーマの動作確認は MAMP 上の WordPress を利用。Windows では XAMP を利用していたが使用感はほとんど一緒で環境構築もスムーズだった。WordPress 向きの導入記事としては以下がわかりやすい。
当初このブログが稼働している環境をバックアップしてそのデータを VMware FUSION 上でリストアしようと考えていた。方法としては以下の記事が参考になる。
ただ、どうせバックアップするなら差分で VPS と環境を同期させたくなるし非常に手間がかかりそう。また WordPress 部分だけなら環境移行は容易なので MAMP + WordPress でも十分と判断。
MAMP における htdocs の位置は標準だと /Applications/MAMP/htdocs になる。WordPress はこの直下の blog というフォルダにインストールした。htdocs は任意の場所に変更可能だが、フォルダが MAMP に依存していることを考えると標準のままにしておきたい。とはいえここでそのままテーマ開発するのはやりにくいからテーマ開発用フォルダから以下のようにシンボリック リンクを貼った。
$ cd /Applications/MAMP/htdocs/blog/wp-content/themes
$ ln -d テーマの開発用フォルダ テーマ名テーマの動作確認をおこなうためのデータはブログからバックアップしたものでもよいし、以下をインポートすることもできる。
このデータは WordPress でよく利用するものが網羅的に入っているので便利。自分のブログ記事については全てインポートしても管理が面倒なだけなので気になる部分だけコピペした。
Coda 2
だいぶ前、半額セールだった時に購入した Web 系の開発ツール。
※2019/1 現在、このアプリは Mac App Store から削除されておりベンダー直販となっている
テーマ開発はこれに zen-coding と Wordpress Syntax Mode for Coda 2 を入れた環境でおこなった。
昔は HTML/CSS の編集にテキスト エディタを愛用していたけど入力補完やファイル管理の便利さから最近では IDE を好むようになった。エディタや周辺ツールを工夫して環境構築するのも楽しい。けれどあらかじめ必要な機能が網羅されているのもありがたいものだ。
zen-coding は定形入力に役立つ。最近のプログラミングでは IDE のスニペット機能を利用する機会が増えたが、あれの HTML/CSS 版みたいなものだ。Coda 2 以外にも様々な環境で利用可能なため慣れておくと他のツールへ移行した時にも便利に使えるだろう。
Wordpress Syntax Mode は WordPress 標準の API を補完してくれる。たとえば Coda 2 でテーマやプラグインの PHP ファイルを開きコード上で wp_ を入力すると wp_enqueue_style などがリストアップされる。API 名のタイポが減るしリアルタイムに候補が絞り込まれるためコーディングの負担を大幅に軽減してくれる。
Diet Coda、Firebug、Chrome デベロッパーツール
後述するテーマ作成のチュートリアルではテーマのひな形を HTML/CSS 形式で用意する。この時点のプレビューに Diet Coda を利用してみた。
※2019/1 現在、アプリ名称が Coda に変更されている
レンダリング結果を見ながら CSS を調整することを考えたら Firebug や Chrome デベロッパーツールのほうが便利かもしれない。こうした操作は数値入力が多くタッチ操作では厳しいので Diet Coda が高機能化しても代用は難しい感じ。実際、はじめは感動したものの途中から Web ブラウザのツール中心でプレビューしていた。
とはいえ iPad を IDE のサブディスプレイにするアイディアは面白いためこの路線のアプリには期待している。たとえば Xcode の Interface Builder なんかは数値入力もすくなくタッチ操作との相性もよさそうだ。
テーマ作成チュートリアル
WordPress のテーマには必須ファイルや定番の構成がある。よって初めはシンプルなテンプレートを起点に開発するつもりだった。以下のサービスはそういうテンプレートを生成してくれる。
テキストボックスにテーマ名を入力するとテンプレート一式を ZIP に固めたものがダウンロードできる。
内容は WordPress 公式の Twenty シリーズを簡素化したような感じ。WordPress のテーマを作り慣れているユーザーならばこれをベースに開発を始めるのがよさそうだ。
しかしこれだけシンプルでも私には難しく感じられた。すなわち理解力が不足している。やはりゼロから、それもテーマの部位や動作から解説してくれるチュートリアルが必要。というわけでより初心者むけのアプローチとして以下を参照することにした。
このチュートリアルでは初めに HTML/CSS でスケルトンを作成し、それを順にテーマ化してゆく。
表示可能なページから用意するため、いきなりテーマ開発するよりもはるかに分かりやすい。また HTML を用意することで WordPress を起動させなくてもデザインを確認できる点もよい。記事の手順では HTML をテーマ化するとき例えば index.html を index.php というように拡張子を変更するのだが、ここで元の HTML を残しておくと便利である。
HTML、PHP で共通の style.css を参照させ実験的なデザインやレイアウトは HTML で試す。落ち着いてきたらテーマに反映する。テーマを開発してゆく間は頻繁にデザインを変更したくなる。そんな時 WordPress 上で確認するとしたら、まずはサーバーを起動して確認用の記事を作成して...といった感じで非常に面倒。
一方、HTML なら単に確認用のページを作成するだけで済むため手軽だ。ページの内容は記事の形をしていなくてもよく、試したい部分だけ切り分けることも可能である。
チュートリアルでは作成した index.php を更に header.php や footer.php へ分割してゆく。このように作業することで WordPress のテーマが持つ機能を自然に理解できる。部位の再利用についても触れられており分割の意義も分かりやすい。
作成されるテーマの機能は最小限な感じ (ただしサイドバーとウィジェットをサポートしている) だが、それゆえに基礎知識を身につけるためにちょうどよいボリュームで非常に参考になった。
Font Awesome
テーマ中のアイコン画像はビットマップのかわりに Font Awesome の Web フォントを利用している。
ビットマップを Retina などの高解像度ディスプレイへ対応させるのは面倒だけど Web フォントならば解像度へ依存せずスケーリング表示されるので対応不要。今回のテーマはシンプルな感じなので Web フォントは絵的にも相性よい。
最終的にビットマップ画像は背景用テクスチャのみとなった。これは簡素な模様をタイリングしているため高解像度ディスプレイでも粗は目立たない。
Font Awesome の利用方法は組み込みと CDN が用意されている。今回は後者を選択。Web フォント部分のサイズが 300 KB 以上あるためテーマ内へ抱えるより Web ブラウザのキャッシュで共有されるほうが親切だと判断。CDN は公式サイトの Get Started にも紹介されているとおりに指定すればよい。IE7 対応についてはサンプル URL になっているけど、これは通常版 URL のファイル名だけ変えれば OK。
functions.php の読み込む処理は、以下のようになる。
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' );
wp_enqueue_style( 'font-awesome-ie7', '//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css' );
$GLOBALS[ 'wp_scripts' ]->add_data( 'font-awesome-ie7', 'conditional', 'IE 7' );IE 7 用の条件式もあわせて指定。functions.php で処理すると header.php の記述が減るうえ CSS の読み込み順を制御しやすくなって便利だ。
WordPress で Web フォントなどを利用する場合は GPL ライセンスとの兼ね合いを考慮する必要があるのだけど公式の Theme Review によれば Font Awesome の SIL Open-Font License は適合しており候補にも挙げられている。
Normalize.css
今回のテーマではブラウザ間で生じる HTML 要素の振る舞いの差を吸収するため Normarlize.css を利用。
かつてこの用途では CSS リセットが一般的だった。しかし有用な定義まで消してしまうことや大量のリセットにより CSS が汚染され、Firebug や Chrome デベロッパー ツールなどで表示したときに本体定義と見分けにくい問題がある。そのため最近では必要最小限の差やバグを吸収する Normarlize.css のほうが好ましいとされている。
この辺の話は、以下の記事が分かりやすい。
一度でも Normalise.css を使うと CSS リセットを利用したくなくなる。特に CSS 汚染は Twenty Eleven の子テーマを作るときに悩まされたため、これが解決されるのは実にありがたい。Normarlize.css も Font Awesome と同様に CDN から参照したかったのだが Google コードのもの を見るとバージョンが古そうなので公式サイトの最新版をテーマに組み込んで利用している。
所感
はじめてテーマをフルスクラッチしてみたが前テーマを作成した 2 年前にくらべてツールや初心者向けの情報が充実しており、開発は非常に楽しかった。
テーマ構成やルールへの理解が深まったので Twenty シリーズや _s の生成したテンプレートもだいぶ読みやすくなった。学習の壁をひとつ超えた感じ。今後はもうすこし高度な機能やデザインを盛り込めるかもしれない。
Webデザインレシピのチュートリアルは入門系の記事の見本ともいえる完成度で、スタイルそのものが参考になる。読者がどのように段階学習してゆくのか。どこで失敗しやすいかについて熟知されておりテンポよく読み進められる。仕事で作成するドキュメントもこう書きたいものだ。
テーマ作成してみて最もよかった点はそれが稼働しているという事実。これまでのテーマに比べると劣化している部分もあるけれど、自作したものが動く嬉しさはそうした問題も帳消しにしてくれる。
眺めてるだけで楽しく達成感もあるので、もしテーマを自作しようと考えている方がいればぜひやるべきです！とオススメしたい。