WordPress 5.8で、フルサイトエディタのサポートが予定されています。
emulsion テーマは、WordPress 5.8でフルサイトエディタサポートテーマとして機能するための準備を行っています。
beta tester プラグイン等を使うと現在でも5.8のテストをすることができます。
フルサイトエディタ
この機能は、現在実験的な機能です。
emulsion テーマでは、通常のテーマ機能、移行準備の transitional mode、FSE（Full Site Editing mode)で、テーマを使用するための切り替えスイッチをカスタマイザーに実装します。この機能を実際に使用するためには、
- WordPress 5.8
- Gutenberg Plugin （必須）
- emulsion-addons Plugin (推奨）
上記の条件を満たす必要があります。
emulsion themeには、フルサイトエディタテーマ機能を組み込み済みです。
フルサイトエディタ対応テーマのフルサイト機能とは、
一般的なフルサイト編集テーマとの違い
| フルサイト編集テーマ | emulsion theme | |
| Customizer | theme mode : Show FSE mode: Transitional mode: Show | |
| Site Editor | Show | theme mode : hide FSE mode: Shorw Transitional mode: Show |
| Widget | Show | theme mode : Show FSE mode: Show Transitional mode: Show |
| NEW Template | Please check each theme | 404.html archive.html category.html home.html index.html page.html privacy-policy.html search.html single.html tag.html taxonomy.html the-blank.html the-front-page.html |
| NEW Template parts | Please check each theme | footer.html header.html page-footer.html page-header.html post-footer.html post-header.html rich-header.html taxsonomy.html theme-front-page-demo.html query-posts.html |
Classic Editor
クラッシックエディタが出力するHTMLに対応したCSSをサポートします。
Block Editor
プロックエディタが出力するHTML に対応したCSSをサポートします。
Classic Widget
コアがサポートしていた旧タイプのウィジェットのCSSをサポートします。
New Widget Area
現在テストが進行しており、概ねサポートできていると思います。
一般的な使用環境を考慮に入れていますが、バグなど見つかりましたら、お知らせください。
emulsionテーマは、既存テーマの機能を持ちながら、未来の新しいテンプレートシステムが、運営するサイトにどのような影響を与えるのか、テンプレートシステムの未来を覗き見ることが可能な、現在のところ唯一のテーマです。
エディタ(bata)とは何か？
従来の、ブロックエディタは、投稿の編集に特化したものでしたが、WordPressにはそれ以外にも、アーカイブページや検索ページ、カテゴリーページなどもあります。
従来投稿エディタで編集することができなかったテンプレートを、編集するためのエディタです。
編集後のテンプレートは、カスタム投稿タイプに保存されるため、チャイルドテーマを作成することなく、テンプレートの変更が保存できるようになります。
作成されたテンプレートは、外観/ テンプレート、外観/テンプレートパートに一覧表示されます。
新しい、ウィジェットエリア
従来ウィジェットエリアに配置できるのは、ウィジェットのみでしたが新しいウィジェットエリアには、すべてのブロックを自由に配置できるようになります。
この変更は、条件なしです。すべてのサイトで変更になりますので、注意が必要です。
弊害として、プラグインのウィジェットや、テーマのカスタムウィジェットの一部の動作に問題が発生する可能性があります。
従来のウィジェットエリアを維持するため、Classic Widgets – WordPress プラグイン | WordPress.org 日本語 プラグインが準備されました。
既知の問題と注意事項
emulsion テーマのチャイルドテーマ
emulsionテーマは、フルサイトエディタ対応テーマとしての準備を進めていますが、チャイルドテーマでは、フルサイトエディタテーマとして機能しません。従来通りの機能で動作します。
Theme.json
主にテーマ開発者が、ブロックの設定や、サイト共通のスタイルの設定を行うファイルです。
emulsionテーマのカスタマイザー/ テーマスキーム / フルサイト編集テーマが設定されている場合に、theme.jsonが有効になります。ヘッダー文字サイズや、ベースフォントサイズはこのファイルから変更可能になります。
クラッシックテーマを設定した場合には、カスタマイザーで、設定した値が適用されます。
投稿編集画面の、テンプレート選択ドロップダウンリストについて
テーマのカスタマイズ Tips
WordPressは、従来のテンプレートシステムの大掛かりな変更を行い始めました。
従来型のテンプレート階層を使ったテーマと、新しいフルサイトエディティングテーマは現在のところ互換性がありません。
現在WordPressを運営中で、新しいテンプレートシステムへの移行を考えている人には、現在のテンプレートシステムから、新しいテンプレートシステムへ移行するのは、困難な課題です。
FSEモードで使用中のテーマで、PHPテンプレートを使用する必要が発生した場合。
function my_custom_template_include( $template ) {
$post_id = 34588;
if ( is_single( $post_id ) ) {
$new_template = locate_template( array( 'single-post-'.$post_id.'.php' ) );
if ( '' !== $new_template ) {
return $new_template;
}
}
return $template;
}
add_filter( 'template_include', 'my_custom_template_include', 21 );上記のフィルタは post id が 34588の場合 single-post-34588.php テンプレートを使って表示します。
適用されているテンプレートの判別方法
このテーマは、PHPテンプレートとHTMLテンプレートの両方を使っているので、どのテンプレートを使って表示しているのかわかりにくいですが、以下の方法で確認できます。
HTMLソース body要素を確認します。
is-tpl-****_template
_templateというsaffixが付いたクラスが存在する場合は、 HTMLテンプレートが使用されています。
is-tpl-****-php
-php というsaffixが付いたクラスが存在する場合は、 従来のPHPテンプレートが使用されています。
CSSでのカスタマイズについて
注意
フルサイトエディタでは、ブロック毎の配色やGrobal Styleの設定で、エディタ画面から、色設定が可能になる機能があります。
このため、FSEモードでの、CSSのカスタマイズは推奨しません。
このテーマは、WordPress4.7クラッシックエディタ時代のHTMLに対応したCSS,最新のブロックエディタのHTMLに対応したCSS、フルサイトエディティング用のCSSをすべてバンドルしています。
汎用テーマのため、クラッシクエディタを使っている人でもブロックエディタを使っている人でも、FSEに移行しようとする人 誰でもが、大きくサイトのレイアウトが壊れたりしないために行っています。
カスタマイザーのカスタムCSS等でカスタマイズする際には、#emulsion というIDを付加して、記述していただくとより確実にスタイルを指定できます。
例
#emulsion h2{ color:blue; }例2 FSEモードのの時だけ、CSSを適用する
.is-presentation-fse h2{ color:blue; }特定のモードの時だけCSSを変更する場合は、is-presentation-transitional, is-presentation-fse, is-presentation-theme クラスのいずれかと組み合わせて使用できます。
FSEモードでの使用は、ブロックごとの色指定などがサイトエディタで可能になる予定のため、今のところお勧めできません。（FSEモードでは、#emulsionが存在しないので、スタイルを適用するのも、より困難です）
テーマのCSSの適用範囲
PHP テンプレートを使用する（customize/Full Site Editor/ Theme default) CSSは、emulsion/css 内の各CSSが適用されます）
HTML テンプレートを使用する（customize/Full Site Editor/ Full Site Editor) CSSは、theme.json での設定が使用されます。試験的） なので、カスタマイザーの色設定は、適用されないので、注意してください。
その他、
投稿、固定ページのエディタにはテーマ特有のスタイルという項目があります。この項目で、テーマのスタイルとスクリプトを取り除くを選択すると、テーマのスタイルを除去でき、コアのブロックスタイルだけで表示することも出来ます。
各投稿、固定ページで、カスタムフィールド「CSS」を作成しスタイルを記述すると、投稿用のスタイルを記述することも出来ます。
作成すると、body要素に、has-custom-style クラスが追加されるので、
/*has-custom-styleに、CSS変数をセットしたり*/
.has-custom-style{
--thm_background_color:#ff3333;
--thm_general_link_color: #cccccc;
--thm_general_link_hover_color:#ffffff;
--thm_general_text_color:#ffffff;
}
/*または、以下のように記述できます。*/
#emulsion.has-custom-style h2{ color:blue; }
モードに関係なく動作しますが、FSEモードでの使用はできるだけ避けた方がいいです。
FSEモードで使用した場合に、従来よく利用されていた 条件分岐タグ が存在しないため、表示非表示の切り替えがしにくい
PHPの条件分岐タグが使用できないため、例えば 検索結果が0の場合に投稿画面が空白になってしまうといった事が発生します。
今後どのように改良が進むのかはわかりませんが、このテーマの場合
search.html で、以下のようなブロックを準備しておき
<!-- wp:group {"align":"wide","className":"emulsion-not-found vh50 centered"} -->
<div class="wp-block-group alignwide emulsion-not-found vh50 centered">
<!-- wp:heading -->
<h2>No results</h2>
<!-- /wp:heading -->
<!-- wp:search {"label":"Search","buttonText":"Search"} /-->
</div>
<!-- /wp:group -->body 要素のクラス search-no-results クラスが存在した場合に限り、表示するといった工夫を行っています。
WordPressは、最近のブロックエディタ内などでは、BEMのようなクラス命名規則を使っていますが、フロントエンドは、body要素クラスは、マルチクラスとなっており、OOCSSに近いやり方で動作しています。
body class 嫌いという人も少なからずいるとは思いますが、再検討されるといいかもしれません。