WordPress 5.8とemulsion theme FSEサポートについて

tenman

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
Customizerhide Show(5.9)theme mode : Show
FSE mode: Hide Show
Transitional mode: Show
Site EditorShowtheme mode : hide
FSE mode: Shorw
Transitional mode: Show
WidgetShowtheme mode : Show
FSE mode: Show
Transitional mode: Show
NEW TemplatePlease check each theme404.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 themefooter.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テーマは、既存テーマの機能を持ちながら、未来の新しいテンプレートシステムが、運営するサイトにどのような影響を与えるのか、テンプレートシステムの未来を覗き見ることが可能な、現在のところ唯一のテーマです。

emulsion テーマでFSEを有効にする方法

エディタ(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 嫌いという人も少なからずいるとは思いますが、再検討されるといいかもしれません。

[emulsion_relate_posts]