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

テーマ	emulsion
バージョン	2.1.8
テーマホームページ	https://www.tenman.info/wp3/emulsion
バグレポートや質問	https://wordpress.org/support/theme/emulsion/
PHP　必須バージョン	PHP5.6

テーマ固有の機能

ソーシャルメニュー

ソーシャルメニューは電話リンク、メールリンクをサポートします

これらの機能は、プライバシー保護と密接に関連しています。慎重に検討してからご使用ください

電話番号はPCブラウザーに表示されますが、リンクは機能しません。リンクは、モバイルブラウザからのアクセスが検出された場合にのみ機能します。

自動コントラスト

このテーマは、作成した背景色設定に適したテキスト色を自動的に設定します

例えば、ショートコードやプラグインに背景色設定がある場合、極力可読性を維持しようとしますが、完全ではありません。

問題がある場合は、上記のサポートリンクより問い合わせしてください

ダークモード

デフォルトでは有効ではありませんが、 lib/config.phpの EMULSION_DARK_MODE_SUPPORT 定数をtrueに変更すると、ダークモードが有効になります。

アクセシビリティ

テーマには、アクセシビリティのためのタブナビゲーション機能があります

追加 CSS クラス

ブロックエディタのブロック数は、FSE（フルサイトエディタ）を有効にした場合75個(EMBEDブロックを除いて）と非常に多くのブロックが実装されます。これは、HTML5の要素数108に迫る勢いで、結構複雑化しています。

一方、見出し要素は幅広設定できるのに、段落要素は幅広や、左右揃えができないといった事で、使いにくさを感じるユーザー層もいるかもしれませんね。このようなユーザー層向けに、エディタに設定がない場合でも、大多数のブロックで幅広や左右揃えを可能にするクラスをテーマで準備しているので、必要に応じで使用することができます。

emulsion-addons 1.6.3

ブロックエディタで、テーマ特有のCSSクラスが反映するようになりました。

設定場所 : 投稿エディタ / ブロック選択 / エディタメニュー / Advanced タブ / Additional CSS Class

一般ブロック

段落

位置設定クラス
alignleft
alignright
alignwide
alignfull

幅設定クラス
size1of3
size1of4
size1of5
size2of5

カスタムフォーマットクラス
hanging-indent
left indent
indent-5rem
indent-10rem
indent-15rem
indent-20rem
right indent
indent-right-5rem
indent-right-10rem
indent-right-15rem
indent-right-20rem
テキストインデントとネガティブマージンを追加 (-1.5rem)
indent-5rem-n
indent-10rem-n
indent-15rem-n
indent-20rem-n
indent-right-5rem-n
indent-right-10rem-n
indent-right-15rem-n
indent-right-20rem-n

画像

幅設定クラス
size1of3
size1of4
size1of5
size2of5
カスタムフォーマットクラス
shrink
左右揃えの、オフセットを削除します。
is-style-circle-mask
alignleft と alignrightと併用した場合、段落でclrcleクラスが有効です

見出し

位置設定クラス
alignleft
alignright
alignwide
alignfull

ギャラリー

幅設定クラス
size1of3
size1of4
size1of5
size2of5

位置設定クラス
alignleft
alignright
alignwide
alignfull
カスタムフォーマットクラス
list-style-none
リストアイコン非表示
list-style-initial
デフォルトのアイコン
circle
番号リストを円形に変形
icon-alert
リストアイコンを赤に
icon-info
icon-notice
icon-cool
icon-dark
list-style-tab
ネストされたリストを、フロントエンドでタブのように変形
list-style-inline
フロントエンドで、インラインリストで表示

幅設定クラス
size1of3
size1of4
size1of5
size2of5

クウォート

位置設定クラス
alignleft
alignright
alignwide
alignfull

幅設定クラス
size1of3
size1of4
size1of5
size2of5

音声

カバー

ファイル

動画

幅設定クラス
size1of3
size1of4
size1of5
size2of5

フォーマット

コード

位置設定クラス
alignleft
alignright
alignwide
alignfull

幅設定クラス
size1of3
size1of4
size1of5
size2of5

色クラス
dark

クラッシックエディタ

カスタムHTML

整形済みテキスト

幅設定クラス
size1of3
size1of4
size1of5
size2of5

プルクウォート

幅設定クラス
size1of3
size1of4
size1of5
size2of5

テーブル

幅設定クラス
size1of3
size1of4
size1of5
size2of5

キャプション位置設定クラス
caption-side-left
caption-side-right
caption-side-bottom
caption-side-bottom-left
caption-side-bottom-right

セルのテキスト位置
left
center
right

セルのテキスト縦方向位置
top
middle
bottom

詩

位置設定クラス
alignleft
alignright
alignwide
alignfull

幅設定クラス
size1of3
size1of4
size1of5
size2of5

レイアウト要素

カラム

block-column class
main
投稿テキストと同じフォントサイズとフォントファミリで表示されます
sidebar
サイドバーウィジェットと同じフォントサイズとフォントファミリで表示します

グループ

位置設定クラス
alignleft
alignright
alignwide
alignfull
幅設定クラス
size1of3
size1of4
size1of5
size2of5

メディアテキスト

続きを読む

改ページ

区切り

スペーサー

ウィジェット

幅設定クラス
size1of3
size1of4
size1of5
size2of5

ショートコード

カレンダー

幅設定クラス
size1of3
size1of4
size1of5
size2of5

rss

幅設定クラス
size1of3
size1of4
size1of5
size2of5

検索

タグクラウド

幅設定クラス
size1of3
size1of4
size1of5
size2of5

カスタムフォーマットクラス
tag-cloud-style-flat
タグクラウドで文字サイズによる強調を外し、ボタン形式で表示

埋め込み

幅設定クラス
size1of3
size1of4
size1of5
size2of5

一般クラス　カスタムHTMLブロックなど

カスタムHTML用のalignwideやalignfull
emulsion-wide
emulsion-full

カスタムHTML用の子要素センタリング
centered
高さスタイルが必須です。次の高さクラスまたはスタイル属性とともに使用してください

カスタムHTML用のボックス高さクラス、
vh25
ブラウザ高さの1/4
vh50
ブラウザ高さの1/2
vh75
ブラウザ高さの3/4
vh100
ブラウザの高さ

フォント太さクラス
fw-100 fw-200 fw-300 ... fw-900

テーマが、特に留意している事柄

ブロックエディタは、使いにくい。苦労を重ねて運営していたWEBサイトが壊れてしまった。等、数々の悲鳴にも似た記事もよく見ます。バギーな実験機能のために、対応をあきらめた人も大勢いるはずで、私自身もその一人でした。

ブロックエディタの置き換わると、テーマに何が起きるのか？

ブロックの機能とテーマ機能の重複が発生します。ソーシャルメニューや、ナビゲーションメニューが、その代表的なものです。

ブロックでサポートする機能とテーマ機能の重複により複雑化することを避けるため、テーマの機能を簡単に停止する機能があります。

wp_nav_menu()を使って表示するプライマリーメニュー等、現在27個程度の機能は、テンプレート単位で、割と簡単に機能を停止することができます。

コアCSSとテーマCSSの干渉や、CSSの欠落

この2年間の時間の中で、wordpress.orgホスティングテーマのルールも少し変更になったりしていて、alignleft alignrightなどのクラスは、既に必須でもありません。

このため、エディタで設定した、右揃えや左揃えが動かないなどといった事が起こります。

このテーマは、wordpress.orgにホスティングされる無料テーマですので、汎用性を持たせてCSSは、クラッシクエディタで作成されたソースにも、ブロックエディタで作成されたソースにも対応しています。

しかし、場合によっては、テーマのCSSをすべて停止して、コアブロックスタイルだけで表示したりすることも、ボタンをクリックするだけで簡単に出来ます。

膨張する機能

ブロックエディタは、確かに進化していて、素晴らしい機能がたくさんあることも事実ですが、
ブロックエディタにしろ、カスタムブロックにしろ、「こんなことができますよー」といった機能の拡張が強調されますが、このテーマの場合は機能拡張よりも、
ブロックエディタでも、クラッシックエディタでも壊れにくい表示ができるということを大事にしていきたいと思っています。

課題

2021/4月現在　今後修正される問題とは思いますが、wordpress.orgにホスティングされているテーマの多くは、テーマをスイッチした場合、それ以前のテーマで設定した色が適切に反映されず、真っ白になってしまう問題がありますが、Gutenberg時代のコンテンツポータビリティ等、目立たない問題についても対処したいと思っています。

このテーマは、現在進行中のFSE（フルサイトエディタ）を実際にテストするための実験機能をサポートしています

今は、意図通りに動作する事、そして時間はかかるかもしれませんが、よりシンプルな構造のテーマに育てていきたいと考えてアップデートを重ねています。

ブロックエディタのために開発したワードプレス用テーマです。

動作確認済みプラグイン

Automated Smoke Tests for WordPress Plugins

ダウンロード

重要な変更

テーマ情報