ブロックエディタのために開発したワードプレス用テーマです。
ブロックエディタは、2018年12月WordPress 5.0 で導入されましたが、現在でも安定板ではなく、開発が継続しています。
2年以上経過した現在もクラッシックエディタを使い続けるユーザーが多く存在しています。
エディタの違いは、投稿を作成したときのHTMLの違いを生み出し、異なるCSSを必要とします。
このテーマは、クラッシックエディタ用のCSS、ブロックエディタ用のCSS両方をサポートする数少ないテーマです。
現在進行中の、フルサイトエディティングの実験機能も含んでおり、フルサイトエディタが導入された時にどのような変化が起きるのか、確認できる機能も盛り込んでおり、移行を視野に入れながら、現実のサイトを運営者にとって、役に立つテーマを目指しています。
news
emulsion 2.0.0 より、最新のWordPress 5.8とgutenberg プラグインで始まった。フルサイトエディティングに対応した、ハイブリッド テーマになりました。
動作確認済みプラグイン
Automated Smoke Tests for WordPress Plugins
プラグインインストール時に、問題がないか基本的なテストの結果を以下のリンクから確認できます。
ダウンロード
重要な変更
テーマ情報
| テーマ | emulsion |
| バージョン | 2.0.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に変更すると、ダークモードが有効になります。
アクセシビリティ
テーマには、アクセシビリティのためのタブナビゲーション機能があります
最近の記事
- ブロックパターンライブラリが始まったよ
- サーチドロワーの秘訣サーチドロワー このテーマで勝手に使っている用語なので、説明します サーチドロワーとは何？ ヘッダー上部の検索ボタンをクリックすると開くページをemulsion テーマでは、サーチドロワーと呼んでいます。 ページいっぱいの大きさに、検索フィールドが一つなんでキーワードを入力するだけで、これだけ大きなスペースを必要とするの？ 実は、ウィジェットなどと組み合わせて使う事を想定しています。 ウィジェット…
- emulsion テーマでFSEを有効にする方法emulsionテーマは、単にフルサイトエディタ対応というだけでなく、従来テーマとしての機能も含んでおり、カスタマイザーで、タイプを選択する必要があります。 カスタマイズから、Full Site Editor セクションを開いていただくと、下記のメニューが表示されます。Theme Defaultは、従来通りのPHPテンプレートで表示されます。FSE Transitionalは、従来テンプレートを使…
追加 CSS クラス
ブロックエディタのブロック数は、FSE（フルサイトエディタ）を有効にした場合75個(EMBEDブロックを除いて）と非常に多くのブロックが実装されます。これは、HTML5の要素数108に迫る勢いで、結構複雑化しています。
一方、見出し要素は幅広設定できるのに、段落要素は幅広や、左右揃えができないといった事で、使いにくさを感じるユーザー層もいるかもしれませんね。このようなユーザー層向けに、エディタに設定がない場合でも、大多数のブロックで幅広や左右揃えを可能にするクラスをテーマで準備しているので、必要に応じで使用することができます。
emulsion-addons 1.6.3
設定場所 : 投稿エディタ / ブロック選択 / エディタメニュー / 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
メディアテキスト
- …
続きを読む
- …
改ページ
- …
区切り
- …
スペーサー
- …
一般クラス カスタム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（フルサイトエディタ）を実際にテストするための実験機能をサポートしています
今は、意図通りに動作する事、そして時間はかかるかもしれませんが、よりシンプルな構造のテーマに育てていきたいと考えてアップデートを重ねています。