お問い合わせはコチラから

ブロックエディタにフロントエンドのCSSを部分的に適用させない方法

サイト運営

WordPressの有料テーマや一部の無料テーマ(Cocoonなど)では、エディターの見た目を実際のサイトの見た目と同じにしてくれるように、自動的にフロントエンドのCSSがエディター内部に適用されます。

これはこれで便利な機能なのですが、Wordpressエディターに適用してほしくないCSSが含まれていた場合に問題となります。

例えば、初期状態で非表示(visibility:hiddenやdisplay:none)としておいて、イベントをjavascriptで捕まえてDOM操作でclassを追加し、表示させるような動きになっているとします。そのようなCSSをエディタに適用した場合、その部分は非表示になって編集そのものが出来なくなります。

この記事では、フロントエンドのCSSをそのままエディタに使われると困るときの回避方法についてご紹介します。

方法1:editor-style.cssを用意して上書きする

エディター用の外部CSSファイル(editor-style.css)を用意して上書きすれば大丈夫です。

子テーマがあれば、子テーマの直下にeditro-style.cssを置いて必要なセレクタを上書きします。

子テーマが無ければ、親テーマの直下のeditro-style.cssが読み込まれます。テーマアップデートで消えるので通常やらないと思います。

add_action(
	'after_setup_theme',
	function() {
    add_theme_support( 'editor-styles' );
		add_editor_style( get_stylesheet_directory_uri().'/editor-style.css' );
	}
);

方法2:not(.editor-styles-wrapper)をつける

方法1が使えない場合は、小手先のテクニックで逃げます。

:not(.editor-styles-wrapper)じゃなくても良いのかもしれないけど、エディタに適用してほしくないCSSに:not(.editor-styles-wrapper)をつけると、エディタ側では無効になる。

通常時

:not(.editor-styles-wrapper)は常に非成立なので影響なし。

エディタ側

:not(.editor-styles-wrapper).editor-styles-wrapperと変換されるようで、こちらは常に成立しないので無効になる効果がある。

方法3:ダッシュボード用のCSSで上書きする

方法1も2も使えない場合の最終手段ですが、ダッシュボード用のCSSとして自分で追加してしまう方法もあります。

エディタに適用されるスタイルには、.editor-styles-wrapperが追加されるので、.editor-styles-wrapperをつけてあげればエディタ画面だけ有効になります。

上書きしたいセレクタは検証ツールで調べて、必要に応じてimportantをつけてあげましょう。

/**
 * 管理画面に追加のスタイルを追加する
 */
function custom_admin_style() {
	?><style>
	.editor-styles-wrapper h2{color:green;}
	</style><?php
}
add_action( 'admin_head', 'custom_admin_style' );

まとめ

この記事を書いたきっかけは、snow monkeyがWP5.8対応でV15に上がった時にeditor-style.cssが効かなくなったのがきっかけでした。

投稿編集画面(エディター)で、外部CSSが効かなくなりました
このトピックには12件の返信、2人の参加者があり、最後にNmrにより1ヶ月前に更新されました。 13件の投稿を…

テーマの不具合はいつか直ると思いますが、編集できなくなってしまったので、悠長に待てなくなり、方法2や方法3という方法で対処しました。

個人(もしくは数人)が開発している高機能テーマがWordpressの最新版に追従し続けるのはコスト的に見合わない時代になってきているのかなと思い始めています。

タイトルとURLをコピーしました