WordPressのテーマカスタマイズの歴史

2020年12月に参加した「WordPressのカスタマイズ、子テーマ?プラグイン?カスタマイザー? WP ZoomUP #54」で子テーマやカスタマイザーの話が上がったので、翌日WordPress 2.9 から 5.6 までのカスタマイズに関して覚えてる部分をつらつらツイートしてました。
ブログにまとめるのは迷っていたのですが、ツイートへの後藤さんのレスもあったので、この投稿でまとめつつ5.6以降の方向性も記載したいと思います。

WordPress 2.9 以前のテーマカスタマイズ

まだブログとしての利用がメインの時代。プラグインは実装されていたが、テーマ(見た目)をカスタマイズしようと思ったら、テーマファイルのPHPやCSSを直接変更するしか方法がなかった。メニュー的なものもカテゴリーウィジェットなどを使うしかなく当時は本当に辛かった。

WordPress 3.0:カスタマイズのためのAPI

WordPress 3.0 の機能

2010年6月にリリースされたこのバージョンでは2.9以前から大幅な機能追加がされた。
有名どころはカスタム投稿タイプ、カスタム分類。詳しくは上記のリンク先を参考にして欲しいが、サイトの見た目に関わりそうなカスタマイズに関する機能は以下の通り。

カスタムメニュー

ダッシュボードから任意の固定ページを含めて自由にメニューの構成を変更できるようになった。

カスタムヘッダー、カスタムバックグラウンド

APIが実装されダッシュボードからテーマのヘッダー画像と背景を変更できるようになった。
3.0のデフォルトテーマ Twenty Ten で実装されている。

テーマ:Twenty Ten

子テーマ

Theme Handbook:Child Themes

すでにあるテーマの一部分だけを変更したい場合は「子テーマ」を作成し元になるテーマのコードを毀損することなくカスタマイズが可能になった。例えば Twenty Ten テーマのバージョンアップを行っても子テーマで作成したコードは影響を受けない。逆に直接コードを変更したテーマをアップデートした場合はその変更は無視される。
10年経った現時点でも言われる「WordPress のカスタマイズを行いない場合は子テーマ」という文脈はここから。

この頃から WordPress をブログではなく CMS として利用する需要が増えてきた(加えて他の CMS からの移行を含めてユーザーが増加した)こともあり、見た目・機能ともにカスタマイズの需要が高まってきた。
子テーマを利用したカスタマイズは、CSSの変更程度であれば簡易だが、HTML構造や機能面の変更をしたい場合はPHPファイルを変更する必要があり、プログラミングが苦手なライトユーザーには敷居が高くなりがちだった。
そこで登場したのが「多機能テーマ」。ダッシュボードの専用のオプションページを用意し、ノンコードで画像や要素の配色などが細かく設定できた。反面、マニュアルがないと見本の通りの見た目にできなかったり、多言語化されていないテーマの場合はドキュメントもわかりづらい場合が多かった。

テーマ開発者が3.0以降で自作のテーマを作る手法は主に4つ。現在でもこの流れは変わっていないと思われる。

  • スクラッチ開発
  • 子テーマ
  • テーマフレームワーク
  • スターター・テーマ

それぞれについては 2012年に @naokomc さんが「WordPress テーマ開発4つのアプローチ」というブログを書かれてるので参考に見て欲しい。

WordPress テーマ開発4つのアプローチ #wacja2012

前述の「多機能テーマ」の開発でもっとも難しい部分がオプションページの作成や設定した内容をデータベースに保存するAPI部分。これらのAPIはドキュメントはあってもプラグイン開発者向けということもありテーマ開発がメインのユーザーには敷居が高かった。このようなテーマ開発者向けに作られたテーマフレームワークとして2011年に「Options Framework Theme」が登場した。

Options Framework Theme | WP Theming

このフレームワークを利用するとオプションページの作成やデータベースへの保存の他にもカラーピッカーやメディアのアップローダーもコードのコピー&ペーストで実装できたため、当時はかなり画期的だった。

WordPress 3.4:テーマカスタマイザーAPI

このバージョンでテーマカスタマイザーAPIが登場。これ以降、ダッシュボードでプレビューしながらテーマのヘッダー画像や背景を変更・保存できるようになる。

WordPress 3.4 の機能

これ以降テーマカスタマイザーは徐々に強化されていきます。
推測になりますがテーマオプションを採用したテーマの乱立(各テーマで独自の手法)があり、コアの機能として統一していきたかったのかと思います。

WordPress 3.9

テーマカスタマイザーの中でウィジェットの設定とプレビュー、ヘッダー画像アップロード時のトリミング(切り抜き)とプレビューができるようになる。

WordPress 3.9 の機能

WordPress 4.3

テーマカスタマイザーの中でカスタムメニューのプレビュー、サイトアイコン(favicon)の設定ができるようになる。

WordPress 4.3 の機能

WordPress 4.5

カスタムロゴ(ヘッダーロゴ)とテーマカスタマイザーでタブレット、スマートフォン端末でのプレビューができるライブレスポンシブプレビューが実装される。

WordPress4.5 の機能


実はライブレスポンシブプレビューが実装前の4.3ぐらいの時に同僚の @Webnist さんが同じ機能をプラグイン「Customizer Theme Resizer」としてリリースしてそれが WordPress Tavern に取り上げられました。

Customizer Theme Resizer Plugin Offers Live Previews of Your Site on Mobile Devices – WordPress Tavern

WordPress 4.7:スターターコンテンツ

4.6まではまだテーマを有効化しただけでは見本と同じレイアウト・セクション構成にならない問題は残っていましたが、4.7で実装されたスターターコンテンツで解消されます。
この機能で、テーマ作者の意図したウィジェットやTOPページに掲載するコンテンツ、固定ページなどを設定・表示できるようになりました。

Starter content for themes in 4.7

4.7のデフォルトテーマ Twenty Seventeen で実装されています。

Twenty Seventeen: Merge Proposal for 4.7

また、このバージョンではヘッダー画像に動画(アップロードまたはYoutube)を設定できるようになりました。出力時には動画再生やフォールバックの処理をするjsも追加されています。

WordPress 4.9:テーマカスタマイザーの下書き・予約投稿

これまで保存したら即反映されていたテーマカスタマイザーの内容ですが、このバージョンから下書き保存と予約公開ができるようになりました。

WordPress 4.9 の機能

WordPress 5.0:ブロックエディタ(Gutenberg)の登場

このバージョンからコアの機能のうちテーマおよびカスタマイズに関わるものはブロックエディタ(Gutenberg)、アクセシビリティの強化となっていきます。

WordPress 5.0 の機能

今後の WordPress の(主に見た目)のカスタマイズ

Gutenberg のロードマップのフェーズ4に「ブロックベースのテーマ」があります。これは現在ウィジェットやヘッダー画像など別々のAPIで実装してるカスタマイズ機能をブロクエディタを「Full Site Editing」としてサイト全体のカスタマイズに利用するようになります。

Full Site Editing が次のバージョン(WordPress 4.7)ですぐ実装されるわけではないと思いますが、ロードマップにもあることからよほどのことがない限り近い将来実装されるでしょう。


テーマカスタマイズの歴史をまとめると、ユーザーがノーコード、ダッシュボードからGUIで多様なデザイン・レイアウトを設定できるように進化する歴史といえます。
大きなブレイクスルーがあるたびにテーマ開発者は覚えることも増えていく苦難の道ともいえますが。。。

現場からは以上です。