Emulsion Theme

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

Emulsion Theme

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

A theme developed for the block editor.


Although it is for the block editor, it also supports content created with the old editor.

The block editor was introduced in WordPress 5.0 in December 2018, but it is still not a stable board and is still under development.

Even now, more than two years later, there are still many users who continue to use the Classic Editor.

Different editors make different HTML when you create a post and require different CSS.

This theme is one of the few themes that supports both CSS for classic editors and CSS for block editors.

It also includes the experimental function of full-site editing that is currently underway, and also includes a function that allows you to check what kind of changes will occur when the full-site editor is introduced. We are aiming for a useful theme for the site operator.

Support plugins

Automated Smoke Tests for WordPress Plugins

When installing the plugin, you can check the basic test results for problems from the links below.

Download

テーマ情報

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

テーマ固有の機能

ソーシャルメニュー

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

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

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

自動コントラスト

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

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

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

ダークモード

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

アクセシビリティ

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

Additional CSS classes

The number of blocks in the block editor is 75 (excluding embed blocks) when FSE (Full Site Editor) is enabled, and a very large number of blocks are implemented. This is quite complicated, with the momentum approaching the 108 elements of HTML5.

On the other hand, some users may find it difficult to use because the heading element can be set wide, but the paragraph element is wide and cannot be aligned horizontally. For this kind of user group, even if there is no setting in the editor, we have prepared a class with the theme that allows wide and left-right alignment in the majority of blocks, so you can use it as needed.

設定場所 : 投稿エディタ / ブロック選択 / エディタメニュー / 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

カレンダー

  • 幅設定クラス
  • size1of3
  • size1of4
  • size1of5
  • size2of5

カテゴリー

  • 幅設定クラス
  • 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

What the theme pays particular attention to

The block editor is difficult to use. The website that I had been working hard on has been destroyed. I often see articles similar to many screams. Many people would have given up because of the buggy experimental function, and I myself was one of them.

What happens to the theme when the block editor is replaced?

The block function and the theme function are duplicated. Social menus and navigation menus are typical examples.

There is a function to easily stop the function of the theme to avoid complication due to duplication of the function supported by the block and the theme function.

Currently, about 27 functions such as the primary menu displayed using wp_nav_menu () can be stopped relatively easily on a template-by-template basis.

Interference between core CSS and theme CSS, or missing CSS

Over the last two years, the rules for the wordpress.org hosting theme have changed a bit, and classes like alignleft alignright are no longer required.

For this reason, things such as right alignment and left alignment that are set in the editor may not work.

This theme is a free theme hosted on wordpress.org, so for versatility CSS works with both classic editor and block editor sources.

However, in some cases, you can easily stop all the theme CSS and display it in core block style only with the click of a button.

Inflatable function

It’s true that the block editor is certainly evolving and has a lot of great features,
Whether it’s a block editor or a custom block, the enhancement of functions such as “You can do this” is emphasized, but in this theme, it is more important than the extension.
I would like to make it important that the display is hard to break with both the block editor and the classic editor.

Task

As of April 2021 I think this is a problem that will be fixed in the future, but many of the themes hosted on wordpress.org do not properly reflect the colors set in the previous themes when the theme is switched. There is a problem that it becomes blank, but I would like to deal with inconspicuous problems such as content portability in the Gutenberg era.

This theme supports an experimental feature to actually test the ongoing FSE (Full Site Editor).

Right now, it works as intended, and although it may take some time, I am updating it with the intention of developing it into a theme with a simpler structure.

Site proudly powered by WordPress