「幅広・全幅」「マージン・パディング」等のエディターの追加機能を有効化しつつ、フロントエンドに反映されない一部の項目はCSSを書き足して補う必要がありました。現行のブロックテーマではエディター機能の管理はtheme.jsonで行い、CSSで補わなくても設定項目がフロントエンドに反映されるようになっています。今回はクラシックテーマにおいても同様にtheme.jsonでエディター機能を管理し、反映されないスタイルを補うためのCSSを用意することなくフロントエンドに反映されるようにする手順をまとめてみます。theme.json無し)これまでのWordPressではadd_theme_support()で任意の機能をそれぞれ有効にすることで、次のようなエディターの追加機能を利用していました。配置位置の選択肢に幅広・全幅が追加される。ブロックのパディングを指定可能になる。等)が利用できるようになります。add_theme_support()CSSの追加が必要な箇所ありエディターの追加機能に対応していないクラシックテーマでは、ギャラリー・プルクオート・テーブルの配置(左寄せ・右寄せ・幅広・全幅)等、一部のスタイルがフロントエンドに反映されません。これらに対応するにはテーマ側がCSSで補う必要がありました。追加機能に対応しています。等のブロックテーマではtheme.jsonでエディターの追加機能が一元管理され、スタイルを補うためのCSSが無くてもエディター上の表示がフロントエンドに反映されているようです。(theme.json)クラシックテーマのエディターを改善したいテーマの自作やカスタマイズの際、フロントエンドに反映されないスタイルを補うのは意外とややこしく時間と手間がかかってしまいます。WordPressのバージョンアップに対応できないかもしれません。そこで、クラシックテーマの場合も次のようなブロックテーマと同様の恩恵を実現できるよう改善してみます。2つ目の恩恵はありがたいのではないかと思います。エディターの追加機能は1箇所(theme.json)で管理する。フロントエンドの表示において、エディターの編集内容を補うCSSは書かない。カスタマイズ手順theme.jsonまずは機能管理のために必要な設定を行います。無効にする5行目のsettings.appearanceTools(初期値false)をtrueにすると全ての機能が有効になります。無効にする必要であればブロック毎に任意の機能を有効/無効にすることもでき、この場合appearanceToolsの設定よりも優先されます。trueで全ての機能を有効にした後、見出しブロック(core/heading)の「マージン・パディング」を無効にしています。}}利用可能な機能やブロック名については公式ドキュメントや当サイトの過去記事を参考にしてみてください。5.8ではエディターを構成する新しいメカニズムが搭載されました。ブロック名やクラス名一覧【WordPress】ブロックエディターやtheme.jsonを利用しているとブロック名やクラス名が必要になることが多々あります。そんな場合の確認用にカテゴリー別一覧にしました。カテゴリーはブロック挿入ツールの分類に合わせています。指定をフロントエンドに自動で反映させるためにsettings.layoutの設定が必要なため、theme.jsonファイルが必須になります。theme.jsonを設置するならこの際、エディターの機能管理もまとめてしまおうという考えです。等)エディターで制作した内容が書き出されるthe_content()の親要素にクラス名is-layout-constrainedを追加します。テンプレートファイルの編集はこれだけです。ついてWordPressが自動的に書き出すCSSにおいて、一部のブロックに適用されるスタイルは.is-layout-constrainedと組み合わせたセレクターで書き出されるため、親要素のクラス名が.is-layout-constrainedである必要があります。.is-layout-constrainedの中に配置され、自動的に書き出されたCSSが適用されたブロックはテーマ側でCSSを補う必要が無くなります。この仕組みにより、テーマ側で対応する必要があった「ギャラリー・プルクオート・テーブルブロックの配置(左寄せ・右寄せ・幅広・全幅)」も自動的にフロントエンドへ反映されます。ここまでの作業でエディター機能が追加され、ブロックの設定がフロントエンドへ自動的に反映されるようになります。現行のブロックテーマではテンプレートファイルが自動で親要素のクラス名を書き出しています。定義されており、関連するスタイルもここに書かれています。注意点ウェブサイトの構成によってはエディターとフロントエンドでブロックの表示に違いが出ることがありますが、参考記事の方法で改善できるかもしれません。ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。)の記述がありますが、23.04.03現在は動作していないようです。今後対応されればtheme.json無しのクラシックテーマも扱いやすくなるかもしれません。親要素(全幅)」となる数値の指定が良さそうです。settings.layoutに指定した値はカスタムプロパティとして利用可能theme.jsonのsettings.layoutで指定したcontentSize、wideSizeの値はそれぞれカスタムプロパティ--wp--style--global--content-size、--wp--style--global--wide-sizeで利用できます。var(--wp--style--global--wide-size);}まとめフロントエンドに反映されなかったブロック設定を反映させる手順の中でtheme.jsonが必要でしたが、結果的にエディターの追加機能の管理をまとめることもできて扱いやすくなったのではないかと思います。theme.jsonではブロックのデフォルトスタイルの管理もできますが、まずは機能管理だけ使ってみるのもいいかもしれません。最後まで読んでいただきありがとうございました。ウェブ倉庫.メニューホームウェブ制作ホビーお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。