俺は昔、Wordpressエンジニアだった。もっとも、Wordpressエンジニアというほど大したスキルがあったわけでもない。せいぜい独自テーマでサイトを一通り実装できるかどうかといったレベルで、Wordpressガチ勢からすれば「その程度でWordpressエンジニア？w」などと失笑されかねないゴミカスレベルだったわけだが、今は紆余曲折あって、とあるWEB会社でディレクターをやっている。
俺の職場について詳しく語るつもりはないのだが、簡単に紹介しておくと我が社はいわゆる「枯れた技術」に依存したWEB会社だ。WEBサイトはWordpressで構築することが多い。だが昔ながらのphpテンプレートに頼りっきりで「FSEってなに？美味しいの？」といったレベルである。正直、我が社は時流に乗れていないと痛感している。このままでは将来案件が取れなくなるのではないか？ 俺は今や制作現場の第一線からは退いてしまっているが、せめてFSEがどんなものかくらいは知っておかないといけないのではないか？ 我が社がこんな状況で踏みとどまったいるのはディレクターの俺が知識をアップデートできていないからではないか？ このままでは早晩にも我が社は崩壊するのでは？ 焦る。気が付けば俺はレンタルサーバーを契約していた。
兎にも角にも、Wordpressをサーバーにインストールするところからだ。FTPサーバーにWordpressのzipファイルを配置して展開・・・というこれまた昔ながらのインストール方法である。本来であればSSH？だかでアップロードして、カタカタ・・・ッターン、といった具合にターミナルを操作して・・・とスマートにやりたいところだったが、下手すればFSE以前にターミナル操作で出鼻をくじかれそうだったため、ひとまず「今後の課題」とすることにした。
しかし今の時代は何かと便利なもので、俺が現役のWordpressエンジニア(笑)だった頃は、教本を読み込みつつググって調べるというのが基本だったが、今やChat GPTに質問すれば大抵のことはきちんと返答してくれる。稀にハルシネーションを起こすこともあるが、Wordpressの基礎的なノウハウについては、かなり正確な情報を提供してくれる。今日から始まるFSE学習も、当面はchatGPTにお世話になりながら進めるつもりだ。
さて、chatGPTに言われるがまま、初期ファイルを用意していく。FSE対応テーマとは言えども、themesディレクトリにテーマフォルダを作成するという流れは変わらないらしい。だが、chatGPTが列挙するファイル群は、旧来のテーマ構成と大きく異なっていた。
my-fse-theme/
├── style.css ← テーマ情報（コメントヘッダ）
├── theme.json ← FSE設定ファイル
├── templates/
│ └── index.html ← デフォルトテンプレート
├── parts/
│ ├── header.html
│ └── footer.htmlなにっ・・・・functions.phpがない・・・だと？ それに、index.phpはどこに行った・・・？
style.cssにコメントを書いてテーマファイルを認識させるのは今も変わらないらしい。
/*
Theme Name: My FSE Theme
Author: 俺
Version: 1.0
*/
だが、それ以外は全く異なる。
index.phpが消えた一方で、templatesディレクトリの中には、その代わりと思しきhtmlファイルが配置されている。
ヘッダーやフッターなどのパーツもまた、htmlファイルで作るようだ。
そして、その名前からしてテーマを司っていそうな雰囲気を醸し出すtheme.json・・・
まずはChatGPTの指示に従い、theme.jsonを編集する。
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#0073aa", "name": "Primary" }
]
},
"spacing": {
"units": [ "px", "em", "rem", "%" ]
}
}
}
どうやら、テーマ共通で用いるカラーパレットや単位の定義をしているようだ。
index.htmlは、コメントのみで構成されている。
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer"} /-->
おそらく「こういう決まり」なのだろう。phpで関数を書く代わりに
<!-- wp:関数的な何か {オプション} /-->というのがルールであるようだ。
続いて、header.html。
<!-- wp:group {"tagName":"header"} -->
<header class="site-header">
<!-- wp:site-title /-->
<!-- wp:navigation /-->
</header>
<!-- /wp:group -->おそらく、
- wp:group で範囲を指定
- tagName で指定した名称が、wp:template-partで呼び出す際に用いられる
- wp:site-title や wp:navigation でさらにコンポーネントを読み込んでいる
ということなのだろう。
最後に、footer.html。
<!-- wp:group {"tagName":"footer"} -->
<footer class="site-footer">
<!-- wp:paragraph -->
<p>© 2025 My FSE Theme</p>
<!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->wp:paragraph の役割が今ひとつ分からないが、chatGPT曰く「FSEエディターで編集できるようにするには囲んでおく必要がある」とのこと。とりあえず今は言われた通り進む。
ここまで作れば、とりあえず最低要件は満たすらしい。早速保存してみる。
不格好ではあるが、とりあえずサイトの体裁にはなった。まだまだ見た目も機能も不十分だが、初日にしては上出来だろう。
さて、続きはまた今度にするか。