以前、「変えたばかりのWordPressテーマをすぐに変える羽目に」で記事を書いたけど、WordPressのテーマでサポートが終了して、似た別のテーマに大急ぎで変更したことがある。WordPress.comを運営しているAutomattic社が提供しているので、いわば公式が提供していると言ってもいいテーマだけど、突然に使っているテーマが廃止された。後継のテーマに乗り換えたけど、そのときから一度はテーマを自分で作ってみて、自分で作ったテーマを自分で使う方がいいのかなと考えていた。
そう考えてから時は過ぎ、いろいろとWordPressのテーマ開発に関する環境も整ってきたと思ったので、この辺でオリジナルテーマを作ってみようと思ったのだ。
いま使っているTenkuのレイアウトはかなり気に入っているので、レイアウト以外の部分を少し自分好みに変更したものを作ってみようと思った。まったくゼロから作り出すよりもお手本があったほうがいいと思うので、これをお手本に作り込むことにした。
WordPressのテーマにはクラシックテーマとブロックテーマというのがある。クラシックテーマを開発するにはPHPというプログラムを使ってテーマを開発する必要がある。PHPとWordPressの構造にかなり詳しくないと手が出せない領域だ。一方でブロックテーマというのはFSE（Full Site Editing）というものをサポートしている。このFSEとは、ユーザーがテーマを自由にカスタマイズできるもので、WordPressの画面からドラッグで作り込むことができる。ノーコード開発できるのだ。
ぶっちゃけ、FSEであれば自分でテーマを開発しなくても、FSEのテーマを引っ張ってきて、自分でがっつりカスタマイズしていけば、それなりにサイトを作り込めてしまうのだ。まあ、今回テーマを自分で作ってみるというのは趣味的な部分が大きいけど、自分でテーマを作ったことがあるという実績と自信にもなるので、一度は取り組んで経験してみることにしたのだ。
必要なツール
WordPressのテーマ開発には必要なものがあるので、それらを紹介したい。必須のものもあれば、あったほうがいいというものもある。必須のものは必ず必要だけど、あったほうがいいものは必要な場合に揃える。もちろん、すべて無料で手に入るので出費は自分の労力だけだ。
Studio by WordPress.com
まず必要なのは自分のパソコンにWordPressが動作する環境を作ることである。自分のパソコン上でWordPressを動作させて、そこでテーマを作り込んで、できたテーマを本番環境にアップロードして適用するという手順で開発をしていく。だから、パソコンでWordPressが動作しないと話にならないわけだけど、WordPressを普通に動作させるのは意外に大変である。
まずウェブサーバーがないとダメなのでそれを準備して、それからWordPress.orgからWordPressのソフトウェアそのものをダウンロードしてセットアップしていく。これらの作業が大変だけど、でも安心して欲しい。ローカルで簡単にセットアップできる方法はいくつかある。その中でも安心なのがStudio by WordPress.comである。
Studio by WordPress.com – WordPress.com Developer Resources
WordPress.com公式のローカル開発環境で、ダウンロードしてインストールして、起動すればサイトを簡単に追加できる。その追加したサイトにブラウザーでアクセスすればもうWordPressの管理画面だ。ここでテーマを作り込んでいくことになる。
Create Block Themeプラグイン
これもWordPress.comが出しているもので、プラグインとしてWordPressにインストールして使う。なので、Studio by WordPress.comでローカルにWordPressの環境を作って、そのWordPressの環境内にプラグインとしてインストールして使う。
このプラグインはテーマ開発のためのプラグインで、テーマに必要なファイルを作成してくれたり、テーマのデザイン後にファイルにデザインを書き出してくれたり、アップロードするためのzipファイル作成をしてくれたり、テーマの開発に必要な機能を備えている。
ローカルに構築したWordPressの管理画面からプラグインを選択して「新規プラグインを追加」から検索すれば出てくる。
Visual Studio Code
これは必須ではない。だけど、もしテーマのファイルを直接編集する場合はあったほうがいい。これはプログラムを書くためのコードエディターというもので、さまざまなプログラミング言語で色分けしてみやすくしてくれる（シンタックスハイライトと言う）。Studio by WordPress.comから直接Visual Studio Codeを起動してテーマのファイル群を参照することもできる。
Visual Studio Code – Code Editing. Redefined
テーマ開発やプログラムじゃなくてもテキストエディターとして何かと使えるので入れておくといいと思う。
学習リソース
簡単にできるようになったとはいえ、いきなり何をすればいいのかわからない。ある程度、こういうふうに作り込んでいくんだというのを学ぶためのリソースを紹介したい。
YouTube
以下のYouTube動画が大変参考になった。
フルサイト編集で実際にサイトを作ってみよう！ – YouTube
ローカル環境の作り方は違うけど、Create Block Themeプラグインの使い方を詳しく解説してくれているので、ほぼこの動画だけで完結する。
他にもテーマの定義を保存しているtheme.jsonというものについて詳しく解説していたりする動画もあるんだけど、ほぼ必要はないので先に挙げた動画だけで十分である。
いきなり詳細に入って、そっちを目指して開発を始めてみて、後から簡単にできる方法が見つかってやり直すということが自分はあったので、これを読んだ方にはぜひ迷わずまっすぐ道を歩んでもらいたいので、ここでは詳細な解説をしている動画は紹介しない。気になる場合は検索してみてほしい。
ChatGPT
わからないことがあるときはChatGPTに聞いてみるといい。完璧じゃないにしてもヒントになる答えを返してくれるので、そこから発展してウェブ検索してみたり、さらに詳しく聞いてみたりすることができる。
最近は検索結果にまともなサイトが出てこなくなっているので、AIに聞いてみるというアプローチのほうが早かったりする。アフィリエイト目的のものばかりが検索上位に出てきて、本当に必要としていたり本当に読みたい記事が出てこなくなっている。
そのために無料版でもいいのでChatGPTに質問を投げかけてみる。返ってきた答えを元にいろいろ試してみる。そうやって構築していった。
やってみた感想
難しくはないけど大変だった。インデックスページ、フロントページ、アーカイブページ、個別投稿ページ、固定ページ、404ページなどの多数のデザインを作り込んでいかないといけないので、難しくはないけど量をこなす必要がある。あと、デザインに凝れば凝るほど作業量は増える。
FSEでブロックテーマを作ってみて、いまは技術者じゃなくてもテーマを作り込むことができるなという印象を持ったのと、これからは学ぶべきなのは詳細なプログラムの知識よりもデザイン面だったり、ユーザビリティーだったり、人が直接見て触る部分に関する知識を増やしていったほうがいいんだろうなと思った。
これからはさまざまな分野でノーコードでいろいろできる時代になってきている。だから、プログラムの知識はあったほうがいいだろうけど、それしかできないというのは通用しなくなってくるんじゃないかなと思った次第である。
