最近のWPに採用されている固定ページと投稿にしようされているブロックエディタは結構便利なもの。

もし独自テーマを作成し、固定ページや投稿を表示させようとすると、WPが元々準備しているブロックエディタのCSSがインクルードされて表示するよう設定されています。

しかし、そのCSSも基本準備されているものであり、独自テーマとは合わない装飾になって違和感がでたり、お互いの設定したCSSが邪魔をして上手く表示できなかったりする場合があります。

そもそも独自テーマを作成したのなら、ブロックエディタで登録したコンテンツを表示させたとき、反映するブロックエディタも独自テーマに沿った内容にカスタムするべきだと思うんです。

採用されているブロックエディタ(Gutenberg)のCSSは、以下のディレクトリからインクルードされるようになっています。

 

wp-includes/css/dist/block-library/style.min.css

 

もし、これらを利用して独自テーマのときにはカスタムしたブロックエディタ用のCSSを使用したいとき、まずは自動でインクルードすることを停止し、自分で用意したブロックエディタ用のCSSをテーマフォルダ内に準備して、それを読み込むのが簡単のような気がします。

以下のような手順になると思いますので、記録しておきます。

 

【functions.phpに挿入】

/*=============================================
* ブロックエディタのCSSを停止
=============================================*/
add_action('wp_enqueue_scripts', function() {
  wp_deregister_style('wp-block-library');
});

 

【ブロックエディタ用のCSSをテーマフォルダのCSSフォルダ内にコピペ】

wp-includes/css/dist/block-library/style.min.css → wp-contents/themes/独自テーマフォルダ/css/style.min.css

 

【style.cssにインクルード文を追記】テーマ宣言文の下辺りに追加

@include "css/style.min.css"

 

読み込んだ後からCSSを書き込むことにより、ブロックエディタのCSSを上書きしていく形になっていくので作業はしやすい方かと思います。