🤗

WordPressのサイト制作にFull site editingの時代がやってきた！！

2023/05/10に公開

今、WordpressをインストールするとTwenty twentythreeというテーマが付属しています。
私は既存のテーマを使ってサイト構築するというようなことはしないので、あまり気にしていなかったのですが、ある時、このテーマの中味を見る機会がありました。
すると、テーマのルートディレクトリにはfunctions.phpはおろか、front-page.php,home.php,index.phpもないのです。フォルダをのぞいても慣れ親しんだPHPファイルはほとんどなく、テンプレートとして用意されたのだろうと思われるHTMLが数個あるだけ。しかも、そのHTMLファイルの中味は半分以上コメント要素。
これでどうやって動くのか。ChatGPTに聞いてもよくわからないし、関連するようなブログやサイトもあまりない。
それでようやく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(get_header,get_footerを含む。)という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"} /-->

と書きます。以上を図式化するとこんな感じです。

本日のまとめ

本日は第１回ということで、WordPressにおける今までのWeb制作とFSEの違いの概略をイメージしていただけるような内容にしました。最後にFSEを使っていく上で理解しておかなければならないポイントをまとめました。これだけ覚えていただくだけでも随分と具体的なイメージがわくと思います。

でも、これだけでは実際のWebサイトは作れないと思いますので、次回は実際にコードを書いてみてFSEを体験できるような投稿にしたいと思っています。お楽しみに！！！