​​フルサイト編集で実際にサイトを作ってみよう！
​​
 
User-uploaded image: 600_514792605.webp
​​フルサイト編集で実際にサイトを作ってみよう！
​​

​​フルサイト編集機能について

  • ​​ブロックエディターでの編集をサイト全体に拡張する機能。
  • ​​コレまでのWordPressではテーマの編集においてはPHPでの作業が不可欠でした。
  • ​​それらがPHPを触らずに、WordPressの管理画面から行えるようなりました。
  • ​​ここでは軽く、フルサイト編集に触れてみます。
​​

​​イベント中の質問について

  • ​​ひとまずZoomのチャットに質問があればどんどん投げておいて下さい。
  • ​​折を見て触れるか、最後にまとめてお答えします。
​​

​​クラシックテーマとブロックテーマとハイブリッドテーマ

  • ​​フルサイト編集という新しい機能が追加された結果、それをわかりやすくするために名称の変更があります。
  • ​​既存のテーマのことをクラシックテーマと呼ぶようになります。
  • ​​そしてフルサイト編集に対応したテーマをブロックテーマと呼びます。
  • ​​またその中間で、クラシックテーマだがtheme.jsonを含むものはハイブリットテーマと呼ばれています。こちらは非公式かも
​​

​​テンプレートとしてHTMLファイルが利用されるブロックテーマTwenty Twenty-Threeの紹介

​​
​​
 
User-uploaded image: image.png
​​
  • ​​ブロックテーマにおいて特徴的なのは構成ファイルの多くがHTMLファイルということです。
  • ​​ファイルの中にはブロックを呼び出すためのコメントが多く含まれます。
  • ​​ではこういったテーマをどのように開発するのか？　こちらを今回はご紹介します。 
  • ​​その実、これらを基本的に殆ど管理画面から操作で、テーマを編集します。
​​

​​theme.jsonについて

  • ​​参考
  • ​​theme.json 
  • ​​【WordPress5.9 / 6.0版】theme.json 全解説
  • ​​【WordPress6.1】theme.json の変更点
  • ​​【WordPress6.2】theme.json の変更点
  • ​​【WordPress6.3】theme.json の変更点
  • ​​json形式のフォーマットで書かれます。
  • ​​テーマやブロックがサポートする機能・レイアウト・スタイルなどの多くを、このJSONファイル一つで全体を包括し、一元的にコントロール出来るようになりました。
  • ​​たとえばフォントを例に取ると、以下のようなものをサイト全体とブロックごとにわけてそれぞれ設定できます。
  • ​​フォントファミリーの指定
  • ​​大中小やデフォルトの文字サイズ
  • ​​行間などの指定
  • ​​フォント以外にも余白、レイアウト幅、カラーパレットなどなど多くのものが設定、一元管理できます。 
  • ​​参考を見ていただくと、非常に多くの項目を設定できることがわかります。
  • ​​ではそれは、どのように編集するのか？この内容も今回ご紹介します。
  • ​​こちらも殆どを管理画面からの操作で編集します。

​​Create Block Themeプラグインについて