Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 5.9 と emulsion Theme

Emulsion Theme

block editor ( gutenberg ) 対応した新しいコンセプトのテーマ

WordPress 5.9 と emulsion Theme

WordPress 5.9では、カスタマイザーはわき役に回り、新しいエディタ(サイトエディタ)が主役に躍り出ました。

新しいエディタは、グリッドレイアウトに変更したり、色の変更や、投稿日の表示非表示、投稿者アイコンの表示やサイズ等、誰もが一貫した方法で、自分好みの設定に変更ができるようになりました。

テンプレートシステムは、完全に一新され従来のPHPテンプレートから、HTMLテンプレートシステムに変更され、この事で、エディタ上でテンプレートを作成、保存することも可能になりました。

従来のテーマを使用する場合は、従来通り使用できます。WordPress Themes: Full Site Editing Free を使用した場合に限り、新しい機能で操作可能になります。

一般的に、従来テーマと、フルサイトエディティングテーマには、互換性はありません。

エマルジョンテーマは、あなたが大切にしているコンテンツを、最新のWordPressの機能で表示することも、過去10年以上安定した動作を誇るクラッシクな機能でも表示できる、ユニバーサルテーマです。

emulsion 2.2.0 で、チャイルドテーマサポートを追加しました。現在チャイルドテーマの機能改善に取り組んでいます。

チャイルドテーマでの、機能強化目標の一つが、「HTMLテンプレートとPHPテンプレートの共存」です。

知っておいてください

このテーマは、テーマカスタマイザーのテーマスキームで、テーマの動作状態を変更できます。

3つの項目で、テーマの動作状態を切り替えることができます

Full Site Editing Theme 

選択すると、エディタ(サイトエディタ)が利用可能な最新の機能を使用することができます。

FSE Transitional Theme

投稿のメインコンテンツをHTMLテンプレートシステムで表示します。サイドバーが必要な場合に便利です。

Classic Theme

ブロックエディタや、クラッシックエディタで作成した投稿をPHPテンプレートシステムで表示します。

Classic Theme以外では、テーマのフィルタ、テンプレートタグは動作しなくなりますので注意してください。

上記の設定を行った場合は、カスタマイザの他の設定項目も変更になるので、設定を行ったら、すぐに保存して、一度ブログを表示してから、カスタマイザを開き直してください。

投稿の編集

ブロックエディタで、スラッシュインサータ、ブロックサーチを使用する場合は、以下の小ネタを覚えておくと便利です。

例えば、h3要素をスラッシュインサータで入力する場合は

/h3

で、h3要素を入力できます。

キーボードから手を放して、マウスで見出しレベルを選択しなくてよいので便利です。

テンプレート階層

テンプレート階層は、テンプレート適用条件をファイル名で関連付けるルールです。エディタのテンプレート名はテンプレート階層を使用した名前を付けることができます。

Editor( full site editor )がサポートするのは テンプレート階層 のプライマリーテンプレートとセカンダリーテンプレートのみになります。バリアブルテンプレートは、Editorでは、サポートされないので注意してください。

「Editorでは、サポートされない」少し掘り下げると

Editorでは、サポートしないのですが、、、

テーマに例えば、single-post.htmlという投稿タイプと関連付けたテンプレート階層のテンプレート名を使った場合は、single.htmlやsingular.htmlに代わってこのテンプレートは有効になります。

個別投稿や固定ページのテンプレートの、新規作成テンプレートは、カスタムテンプレートです。このテンプレートは、テンプレート階層とは無関係です。

Custom CSS

Custom CSSは、カスタマイザの、テーマの動作状態がClassic Theme 以外の場合には、表示されないように、テーマ側で設定してあります。

Full Site Editing Themeや、FSE Transitional Theme設定で、どうしても必要な場合は、

Customize / Theme Scheme

Site Editor with Custom CSSで有効に変更すると、使用することができます。

有効に設定した場合、Custom CSSに設定したルールセットは、テーマの動作状態の設定がどの場合でもCSSが適用されますので、十分注意してください。

特定の動作状態の場合だけスタイルを適用する場合は、body要素に含まれる以下のクラスを活用してください

is-presentation-fse, is-presentation-transitional, is-presentation-theme

Block Petterns について

ブロックパターンは、特に初心者向けの便利な機能です。従来カスタマイザーのAdditional CSSで行っていた作業は、右サイドバーのスタイル、カラー、typographyなどで簡単にカスタマイズができるようになっています。

パターンブロックに対してAdditiona CSSや、テーマのstyle.cssにカスタムスタイルを記述するといったこれまでの作業はあまりお勧めできません。
そのような作業に向くような、ブロックごとの特異性を確保するためのクラスなどの準備ができていません。

既知の問題

アーカイブページ等で、概要文の長さが異常に長くなる

言語設定が、日本語、中国語、韓国語等、単語区切りにスペースを使わない言語では、要約文の長さを適切に検出できずに、長くなってしまいます。

この問題の解決方法:言語設定を記述する言語に合わせてください

このテーマは、gutenberg プラグインを使用しない状態でカスタマイザーを開くと、保存できなくなる問題があります。

WordPress 5.8で発生、WordPress 5.9では問題なく保存できます。

この問題の解決方法:style.css のコメント Tags: から、full-site-editingタグを削除します。

Customize / Theme Scheme / Header Template HTMLを選択した場合に Can not find template と表示されて、ブロックのヘッダーが表示されない

WordPress 5.8で発生、WordPress 5.9では発生しません。

この問題の解決方法:みつかりません。

2022/2/3 追記

エディタ / スタイルで、ページの配色設定、各ブロックの配色設定が行われるようになりました。

これらの設定を行った場合、<style id="global-styles-inline-css">で、ヘッダーに埋め込まれます。

これらの設定は、emulsion テーマの場合、テーマ動作モード設定 に関係なくスタイルがロードされるため、フルサイト移行 テーマ、クラッシックテーマとして動作している場合、意図しない変更が行われます。

具体的には、body要素に (個人的には、.wp-site-blocksを対象に追加されるべきだと思いますが、、、今後の進展を見守る必要があります。)

body{
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--helvetica-arial);
font-size: var(--wp--preset--font-size--normal);
line-height: var(--wp--custom--line-height--common);
}

body要素の配色設定については、影響を消すために、CSSを上書き処理しました。(ver 2.2.3)

見出しブロックの配色を変更した場合には、

h1, h2, h3, h4, h5, h6 {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

https://wordpress.org/support/topic/how-to-disable-inline-styling-style-idglobal-styles-inline-css/

ブロックの配色設定を変更した場合は、今のところ何も手を打っていません。

エディタのブロック配色設定を、変更するとテーマの動作モードに関係なく影響を受ける可能性があることを知っておいてください

Copyright © 2022 Site proudly powered by WordPress