【WordPress】GutenbergエディタでCSSを投稿タイプ別で適用する

こんにちは、Maromaroの松橋です。

WordPressのGutenbergエディタでCSSを投稿タイプ別で適用するする方法をご紹介します！

「post投稿タイプとpage投稿タイプで適用するCSSを分ける」という想定のもと、手順をご紹介します。

手順

最初に、themeファイル内に、post-editor-style.cssとpage-editor-style.cssを設置します。

今回は「/wp-content/theme-name/gutenberg/css/」のディレクトリに設置します。

次にfunctions.phpに、投稿タイプ別でGutenbergエディタで読み込むCSSファイルを指定します。

// 管理画面ブロックエディタ用CSSの追加
add_action('enqueue_block_editor_assets', function() {
  global $post;

  add_theme_support('editor-styles');

  if ($post && $post->post_type === 'post')) {
      add_editor_style('/gutenberg/css/post-editor-styles.css');
			return;
  }

  if ($post && $post->post_type === 'page')) {
      add_editor_style('/gutenberg/css/page-editor-styles.css');
			return;
  }
});

$post変数のグローバル宣言を行い、表示している記事編集画面の記事情報オブジェクトを取得することができる、enqueue_block_editor_assetsのアクションを使用しましょう。

CSSファイルの指定は、add_editor_style()関数の引数で指定することができます。

これで、指定投稿タイプ毎でGutenbergエディタで読み込むCSSを別々にすることができます。

ネットで調べたら、after_setup_themeアクションで適用する記事が多かったのですが、このアクションは、$post変数で記事情報オブジェクトを取得できなかったので、色々調べた結果このアクションを見つけることができました。

GutenbergエディタにCSSファイルを適用する時にTips

また、Gutenbergエディタの各ブロックに対して、CSSスタイルを適用しようとする時、どのようにセレクタでタグを指定すると良いのか。。。と迷うことがあるかと思います。

というのも、Gutenbergエディタ以外の見出しやテキストの要素に影響ないように、Gutenbergエディタを内包する要素の入れ子でCSSを記述しても。。。なんとスタイルは適用されません。

※私は、.editor-styles-wrapperという要素の入れ子で書いており、一向に見た目が変わらずでした。。。

ではどうするのかというと、何も入れ子にさせず、段落ブロックであればpタグ、見出しタグであればhタグ、テーブルであればtableタグを直接し指定して、CSSを書いていくと、スタイルが適用されます。

そのため、CSSファイルは下記のような記述となります。

p{
  /*CSS*/
}

h2{
  /*CSS*/
}

.table{
  /*CSS*/

  th{

  }

  td{

  }
}

さいごに

SEO対策のために、固定ページとお知らせなどをGutenbergエディタで運用する時、それぞれ適用させるCSSを異なるものにしたい時など便利かと思われます。

以上、Maromaroの松橋でした。