「投稿」内に配置したブロックにのみCSSを適用してエディター上にも反映する【WordPress】

概要

カスタマイズのポイント

• 「投稿」でのみ適用するCSSファイルを分離して管理しやすく。
• エディターにもCSSを適用してプレビュー可能に。
• 「投稿」以外のエディターには影響しないようにする。
• 応用して固定ページにも適用可能。

カスタマイズの大まかな流れ

1. 「投稿」専用のCSSファイルを用意。
2. 「投稿」のブロックエディターにCSSファイルを読み込む。
3. フロントエンドにCSSファイルを読み込む。
4. 表示するテンプレートファイルを編集。

1. 投稿専用CSSファイルを用意

「投稿」専用のCSSファイルを作成します。今回はファイル名を my-post.css としました。
このファイル内のセレクターは.my-post 〇〇, .editor-styles-wrapper .is-root-container 〇〇のように指定します。前者は公開記事、後者はエディター上の要素に適用されます。

例えば<h2>要素を指定する場合は次のように書きます。

my-post.css

.my-post h2,
.editor-styles-wrapper .is-root-container h2 {
  font-size: 2rem;
}

.my-post h3,
.editor-styles-wrapper .is-root-container h3 {
  font-size: 1.5rem;
}

SCSS記法では次のようにまとめて書けるので効率的です。

post.scss

.my-post,
.editor-styles-wrapper .is-root-container {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}

2. ブロックエディターにCSSファイルを読み込む

上で作成した my-post.css を「投稿」のエディターにのみ適用するための関数をfunctions.phpで設定します。

アクションフックenqueue_block_editor_assetsでブロックエディター使用時に実行する関数を用意します。
2行目：グローバル変数$post_typeを使うため宣言しておきます。
3行目：条件式で$post_type（投稿タイプ）がpost「投稿」の場合、wp_enqueue_style()で専用のCSSファイル（my-post.css）を読み込みます。

functions.php

function post_styles() {
	global $post_type;
	if ( 'post' === $post_type ) {
		wp_enqueue_style( 'post-style', get_theme_file_uri( 'my-post.css' ), array(), wp_get_theme()->get( 'Version' ) );
	}
}
add_action( 'enqueue_block_editor_assets', 'post_styles' );

※ ここまでの作業を終えるとエディターで配置するブロックにCSSが反映されるようになります。

3. フロントエンドにCSSファイルを読み込む

フロントエンド（公開記事）にもスタイルが適用されるように my-post.css を読み込みます。
既にCSSやスクリプトを読み込んでいる関数がある場合はその中に追加してもOKです。

functions.php

function add_files() {
	wp_enqueue_style( 'post-style', get_theme_file_uri( 'my-post.css' ), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

4. 投稿を表示するテンプレートの編集

single.php等の「投稿」を表示するテンプレートファイルを編集します。
編集内容を出力する関数the_content()を括る要素にクラス名my-postを追加します。

single.php

<div class="is-layout-constrained my-post">
<?php
the_content();
wp_link_pages();
?>
</div>

※ この段階でフロントエンドの公開記事にもCSSが反映されるようになります。

補足

クラス名で様々なブロックを指定

エディターで配置するブロックにはあらかじめクラス名が付けられているため、これを使って任意のブロックのスタイルを指定できます。例えば次のようにして画像ブロックのスタイルを指定できます。

.my-post .wp-block-image,
.editor-styles-wrapper .is-root-container .wp-block-image {
  border: 1px solid #AAA;
  background: #F2F2F2;
}

条件式の変更で固定ページにも対応

エディターにCSSを読み込む際の条件式を書き換えると固定ページにも対応できます。

// 投稿のみ
if ( 'post' === $post_type ) {
}

// 固定ページのみ
if ( 'page' === $post_type ) {
}

// 投稿または固定ページ
if ( 'post' === $post_type || 'page' === $post_type ) {
}

---