今、WordpressをインストールするとTwenty twentythreeというテーマが付属しています。
私は既存のテーマを使ってサイト構築するというようなことはしないので、あまり気にしていなかったのですが、ある時、このテーマの中味を見る機会がありました。
すると、テーマのルートディレクトリにはfunctions.phpはおろか、front-page.php,home.php,index.phpもないのです。フォルダをのぞいても慣れ親しんだPHPファイルはほとんどなく、テンプレートとして用意されたのだろうと思われるHTMLが数個あるだけ。しかも、そのHTMLファイルの中味は半分以上コメント要素。
これでどうやって動くのか。ChatGPTに聞いてもよくわからないし、関連するようなブログやサイトもあまりない。
それでようやくFull site editingという言葉にたどり着きました。
次のサイトは英文のサイトですが、読み解いていくと衝撃的でした。
Full site editing for theme developers – Full Site Editing
PHPのテンプレートファイルは既にクラシックスタイルと表現されています。
かなりの衝撃でした。
未だにWordPressでWeb制作を教えているスクールは、PHPでテンプレートファイルを書くように教えていますよ・・・
しかし、そんなことは言ってられません。
早く勉強して新しい技術を身につけなければいけないんですよ。
ということで、このブログもFull site editingでのテーマ作成を取り上げていこうと思っています。
WordPressがWebサイトを表示させるまで
本題の前にWordPressがWebサイトを表示させるまでの流れをおさらいしておきます。
WordPressというシステムはデータベースに保存したブログのデータ等をサーバーに保存されたテンプレートにあてはめて、HTML文書を生成し、それをブラウザに送り、ブラウザがそのHTML文書を解析してWebページとして表示させるというものです。サーバーサイドではCSSに関する情報やJavaScriptに関する情報も持っていて、これらをひっくるめてブラウザに返すような仕組みになっているのです。これによって見た目にも美しく、かつ、動きのあるページが表示されます。
FSEになったからといって、それ自体が変わるわけではありません。テンプレートへのあてはめ方が大きく変わっているのです。
これまでのテンプレートへのあてはめ方
これまでのテンプレートへのあてはめ方を図式化しました。
ブラウザからサーバーにあてて、表示したいサイトのURLが送られるとWordPressはエントリーポイントを探します。どのように探すかというのは優先順位が決まっていてfront-page.php、home.php、index.phpの存在を順に探していきます（管理画面で設定することでpage-＊＊＊.phpもエントリーポイントに設定できますが、その説明は省略します。）。そして、そのエントリーポイントのテンプレートが様々なページのテンプレートを呼び出すのです。
呼び出し方はテンプレートにURLリンクを埋め込むか、get_template_partというWordPressのコマンドを使用するのが多いと思います。
FSEにおけるテンプレートへのあてはめ方
FSEでは、テンプレートファイルがPHPファイルからHTMLファイルに代わっています。そしてページを表示するためのテンプレートはtemplateという名のフォルダに、そのテンプレートから呼び出されるテンプレートパーツはpartsというフォルダにそれぞれ保存するということが決まっています。
さらにtemplateというフォルダにはindex.htmlというファイルを保存しておかなければならず、このファイルがエントリーポイントになります。front-pageやhomeというファイルではエントリポイントして認識してくれません。
そしてテンプレートファイルからテンプレートを呼び出すのは<!--wp:template-part {"slug":"＊＊＊＊"}/-->
というHTMLタグをつかって呼び出します。”＊＊＊＊”の部分はpartsフォルダ内のhtmlファイルの拡張子を除いたファイル名です。header.htmlを呼び出したいのであれば<!--wp:template-part {"slug":"header"}/-->
と書きます。
本日のまとめ
本日は第１回ということで、今までのWeb制作とFSEの違いの概略をイメージしていただけるような内容にしました。最後にFSEを使っていく上で理解しておかなければならないポイントをまとめました。これだけ覚えていただくだけでも随分と具体的なイメージがわくと思います。
でも、これだけでは実際のWebサイトは作れないと思いますので、次回は実際にコードを書いてみてFSEを体験できるような投稿にしたいと思っています。お楽しみに！！！