Full-Site Editing対応テーマについて解説いたします。
この記事の目次
ワードプレスのFull-Site Editing(FSE/フルサイトエディティング)対応テーマとは？
ワードプレスの新しい公式テーマtwentytwentyfiveはフルサイトエディティング対応テーマです。
こちらのテーマのフォルダを開くと、今までテーマには必ず含まれていたヘッダー出力用ファイルheader.phpや単一記事出力ファイルであるsingle.phpが含まれずfunctions.phpだけしかありません。
※twentytwentyfiveのpatternsフォルダに含まれるheader.php等は既存のheader.phpとは全く違う概念の物で編集してもサイトに即時反映されず、サイト作成用のひな型的なより包括的概念のファイルとなっています
このテーマはワードプレスのテーマの新しい概念である、Full-Site Editing対応テーマとなっており、ブロックエディター（Gutenberg）の技術を使って、サイト全体のデザインを“コードを書かずにブロックで編集できる”ように作られたテーマとなります。
テーマのデザインはどこに含まれる？
FSE対応テーマのデザインはワードプレスの管理画面でHTMLコードを記載せずに、ブロックパターンを追加・編集して主にデータベースに記録されます。
この記録されたテーマデザインのデータベースは
・wp_posts テーブル post_type = ‘wp_global_styles’
・wp_posts テーブルpost_type = ‘wp_template’やpost_type = ‘wp_template_part’
となります。
テーマフォルダに含まれるファイルは、そのひな形だけであり、基本的にはテーマフォルダに含まれるPHPファイルを編集してもサイトの表示に影響を与えません。
templates フォルダに含まれる。home.html、page.html、single.html 等を修正すると、上記記録されたブロックパターンの出力コードの上下を編集することは可能です。
FSE対応テーマのヘッダーやフッターのデザインの編集方法
管理画面の 外観＞エディター と進みヘッダー(編集したい箇所)をクリックします。
さらにヘッダーの編集をクリックします。
するとヘッダーのブロック編集画面に移動します。ここでサイトの共通のヘッダーをブロックとして組み合わせて作成し、保存するとサイト全体に反映されます。
※FSE対応テーマはすべてがブロックパターンでできています！
FSE対応テーマではwp_head()the_content() などもありません！しかしフックはできます
wp_head()the_content() などもございませんが、アクションやフィルターを設定するPHPコードはちゃんと動作します。
↓下記のようなコードはちゃんと動作します
function hook_css() {
echo "ヘッダーに追加するコード";
}
add_action('wp_head', 'hook_css');
この理由はsingle.html等に記載されているwp:post-content、wp:template-part slug=”header”がブロックを検出しコアファイルのblock-template-loader.phpがwp_head()the_content()を状況に応じて実行してくれるからです。
FSE対応テーマは新しい概念のテーマの為多少とっつきにくいものの、Elementorのような直感的にサイトのデザインを構築できる仕組みをワードプレス公式が導入しつつあり、HTMLやPHPの編集なしに、サイト全体を構築出来るようにする仕組みと考えていただいて差し支えないかと存じます。
ご参考になりましたら幸いです。
