WordPress 6.2 とエマルジョンテーマ

emulsion theme 2.6.7 以降は、WordPress 6.2が必須になります。

お知らせ

WordPress 6.2 対応 emulsion 2.6.8 公開済みです。

WordPress 6.2 にアップデートしてから、ご利用ください。

WordPress 6.2の特徴

外部リソース連携の強化

WordPress 6.2では、Block Patterns Directory の拡充、Openverse 画像の検索と挿入機能が追加されました。

この変化に対するemulsion テーマの対応

ブロックパターン – Emulsion Theme

openverse – Emulsion Theme

emulsion テーマの機能強化

STYLE VARIATION

スタイルバリエーションとは

エディタ/スタイル一覧で表示するバリエーションは、従来の3種 + 6種のバリエーションを追加しました

  • デフォルト
  • Daybreak
  • Midnight

新しく追加されたバリエーション

  • Yomogi
  • Hands
  • Platen
  • Twiggy
    • twiggy は日本語での利用を念頭に置いたバリエーションです
  • Centered (front end only)
    • 一般的に、style variationは、フォントや色のカスタマイズが中心になりますが、タイトルの中央揃えに挑戦した実験的バリエーションです
  • Grid(front end only)
    • グリッド表示は、エディタのテンプレート編集でセットするのが標準的ですが、数ステップの設定が必要で、初めての人には難しいかもしれません
    • ワンタッチでグリッド表示に挑戦した実験的バリエーションです
    • 技術的には、grid バリエーションの場合に WP_HTML_Tag_Processor()を使って、class を追加するという手法で行っています。なので,front end only

Style Book ( WordPress 6.2 新機能)

スタイルブック とは

ブロック毎に、色やマージンの設定がリアルタイムで反映するようになりました。

一部の機能:例えば、見出しレベルごとの文字色設定 等一部反映しない項目もあります。

カスタムブロックCSSにCSSを直接記述することも出来るようになりました

theme.json

emulsion テーマの theme.jsonファイルは、WordPress 6.2対応版に書き直されました。

この変更により、WordPress 6.2より古いバージョンの場合、エディタでの表示が適切に行われない可能性があります。

バグの修正が行われたことにより、theme.jsono記述がより柔軟に記述できるようになったことが主因です。

theme.json (wp 6.2) – Emulsion Theme

エディタでサイドバーを追加できる機能を追加しました

以下のテンプレートでサイドバー表示機能を追加しました

  • category.html
  • tag.html
  • taxonomy.html
  • single.html
  • page.html

サイドバー設置手順ガイド 

Tips

特定の投稿や固定ページでサイドバーウィジェットエリアを追加することも出来ます。

投稿などの編集画面で、テンプレート(デフォルトでは単一)をクリックし、「2cos has sidebar widget area」を選択すると、投稿では、「投稿サイドバー」固定ページでは、「ページサイドバー」が追加されます。

PHP template(Classic Theme) と HTML template(ブロックテーマ)間の互換性の強化

emulsion テーマは、Classic Themeで使用されるPHP テンプレートと、ブロックテーマで使用されるHTMLテンプレートを切り替えることができるユニバーサルテーマです。

ただ、テンプレートタグを使用するPHPテンプレートと、ブロック マークアップは異なるHTMLを生成するため、同時に両方を使用することはできません。

固定ページテンプレートを思い起こしてみてください。ブロックテーマ内で、固定ページテンプレートをphpで作成することは可能ですし、(PHPテンプレートは、ローカルで作成しアップロードとする必要があります。)正常に動作します。

ブロックテーマで、Classic テーマの時のように、テンプレートタグを使用してPHPテンプレートを作成した場合、それらに対応したCSSが用意されていないため、不格好なページとして表示されてしまいます。

ブロックテーマと同じHTMLを出力するPHP固定ページテンプレートがあれば、他のページと同じ表示になり、HTMLテンプレートとPHPテンプレートは、相互に存在可能になります。

emulsion テーマでは、PHPとHTMLテンプレートが相互に共存できる方法を模索していました。

emulsion/fse-compatible-classic-template/ ホルダーには、以下の4つのPHPテンプレートが含まれています。

この種のテンプレートは、fse-compatible-classic-templateホルダーに配置することが必須です。

  • 2col-has-widget-area.php
    • 投稿や、ページでこのテンプレートを選択すると サイドバー付きで投稿を表示します
    • 投稿の場合は、widgets ページの「投稿サイドバー」が表示
    • 固定ページの場合は、widgets ページの「ページサイドバー」を表示します
  • example-archive.php
    • archive.phpにリネームすると、archive ページは、archive.html テンプレートの代わりにPHPテンプレートを使用して、表示します
  • example-page.php
    • page.phpにリネームすると、固定ページは、page.html テンプレートの代わりにPHPテンプレートを使用して、表示します
  • example-single.php
    • single.phpにリネームすると、固定ページは、single.html テンプレートの代わりにPHPテンプレートを使用して、表示します

PHPテンプレートを使用する利点は、投稿と関連した機能などを含めることができるという点だと考えています。

PHPテンプレートが使われているか、HTMLテンプレートが使われているかを識別する方法

個別投稿ページを表示している場合 HTMLテンプレートが使用された場合

body 要素に is-tpl-single_template クラスを表示します。

個別投稿ページを表示している場合 PHPテンプレートが使用された場合

body 要素に is-tpl-single-php クラスを表示します。

BBpressプラグイン等のPHPテンプレートを使った表示と、通常のテーマの表示は、違和感のない同じデザインで表示できます。

Style variation Platen  ホームページ

BBPRESSのフォーラム一覧

Classic template tag を使ったフォーラム一覧

詳細な情報

https://make.wordpress.org/core/tag/6-2+field-guide/