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

ブロックエディタにフロントエンドの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により3年、 2ヶ月前に更新されました。 13件…

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

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

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

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