WordPress 6.2でサイトエディタが正式版になり、新しい「追加CSS」「ブロック追加CSS」が追加され、様々な場所からCSSのカスタマイズを行うことができるようになりました。
複数の場所からCSSの設定ができるようになった事で、どの場所にどういったCSSを記述することがサイトのCSSの管理上便利なのかをユーザー自身が考えていく必要がありそうです。
このようなことから、emulsion テーマでも、「実際動作するの？」といった点を含めて、動作確認を始めました。
emulsion テーマの場合以下のような動作になり、追加したCSSが削除されてしまうようなこともありそうなので、メモに残すことにしました。
テーマでCSS設定が可能な場所と、動作確認の結果
- theme.json を元にした CSS 変数の生成
- カスタマイザーの 追加CSS
- 記述内容は、ユーザーが自由に記述できる
- エディタの追加CSS
- 記述内容は、ユーザーが自由に記述できる
- スタイル一覧で、デザインを変更した場合にはスタイルは削除されます。
- エディタの ブロック追加CSS
- 記述内容は、ユーザーが自由に記述できる(2個目のルールセット以降)
- スタイル一覧で、デザインを変更した場合にはスタイルは削除されます。
- エディタのテンプレート内のブロックCSS
- ブロックにクラスまたは、スタイルとしてテンプレートに追加される
- 例えば、スタイル一覧「Default」でサイトヘッダーの色を、テーマパレットの secondary color に変更した場合 「Midnight」に変更すると、テーマパレットのsecondary color に変更になります。
- デフォルトパレット、カラーピッカーを使用して、色を変更した場合は、スタイル一覧「Default」を「Midnight」に変更しても、指定した色が維持されます。
- 投稿、固定ページのテンプレート内のブロックCSS
- ブロックにクラスまたは、スタイルとしてテンプレートに追加される
- エディタのテンプレート内のブロックCSS と同様の動作になります。
- 投稿、固定ページのブロックCSS
- ブロックにクラスまたは、スタイルとしてテンプレートに追加される
- エディタのテンプレート内のブロックCSS と同様の動作になります。
- emulsion テーマ 投降、固定ページのカスタムフィールドを使ったCSS
- ユーザーの記述したスタイルに、セレクタを追加したスタイル(編集中の投稿、固定ページ内でのみスタイルが適用される）
- 例
- カスタムフィールド名:css
- カスタムフィールド値：
- h2{
- color:yellow;
- }
- テーマは、body要素にhas-custom-styleを追加の上、以下のようにフロントエンドのCSSセレクタを追加します
- .has-custom-style.postid-100118 h2｛
- color:yellow;
- }
- カスタムフィールドのCSSのセレクターに、.has-custom-style が記述されている場合には、セレクタの加工を行いません。