【お知らせ】ドメインを「dreamseed.blog」に変更しました。

WordPress 5.0で追加される「wp-block-~」のスタイルシートを出力させない方法

当ブログの一部のリンクはアフィリエイトリンクです。これらのリンクから商品を購入された場合、当サイトは一定の報酬を得ることがあります。

WordPress 5.0で導入された新エディタ(Gutenberg)、最初は戸惑いましたが、だいぶ慣れてきて便利に使っています。

そんな新エディタで記事を公開すると、画像やYouTubeの埋め込みなどに、<figure>タグが追加されます。それ自体は問題ないのですが、そこに適用されているclass(wp-block-image, wp-block-embed)のスタイルを弄りたいと思ったものの、ちょっとした作業が必要だったので備忘録として残しておきます。

上記のスタイルをメインのスタイルシートに追加しても、自動で追加されるスタイルによって上書きされます。なので、そのスタイルを剥がします。

function.phpに下記を追加。

wp_deregister_style( 'wp-block-library' ); 
wp_register_style( 'wp-block-library', null, [], 1 );
wp_deregister_style( 'wp-block-library-theme' ); 
wp_register_style( 'wp-block-library-theme', null, [], 1 );

これで、wp-block~のスタイルが出力されなくなるので、必要に応じてメインのスタイルシートに記述すれば、それが有効になります。

「/wp-includes/css/dist/block-library/」に元のファイル(style.min.css、theme.min.css)があります。必要はないと思いますが、中身をメインのCSSにコピーしておくのもありでしょう。

なお、ざっくり調べて、試したら出来たというレベルなので、正しい対応方法なのかは不明です。もっとスマートな方法がありそうな気もしますが、とりあえず目的は果たせたので良しとしています。

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