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

WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。

ブロックエディターで配置する “見出し” や “段落” などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておくことで記事の見栄えを確保するのが目的です。

このCSSは「投稿」にのみ適用されるようにすることで、それ以外の箇所(固定ページやフルサイトエディター・ウィジェット等)の編集時に邪魔にならないようにします。

使用したバージョン WordPress 6.1.1

PR

概要

カスタマイズのポイント

  • 「投稿」でのみ適用する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記法では次のようにまとめて書けるので効率的です。

my-post.scss
.my-post,
.editor-styles-wrapper .is-root-container {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}
ウェブ倉庫
ウェブ倉庫

エディター用のセレクターは主に次のような理由で .editor-styles-wrapper .is-root-container 〇〇 という指定方法にしています。

  • エディター外に干渉させないため
  • 詳細度を上げてエディターのインラインCSSを上書きするため

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が反映されるようになります。

ウェブ倉庫
ウェブ倉庫

条件分岐で以前より確実にエディターを絞り込むようにしました。

‘post’ === $post_type の部分を ‘page’ === $post_type に変更して固定ページに限定することもできます。

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が反映されるようになります。

ブロックを出力する箇所のクラス名にis-layout-constrainedを付けておくと、一部のブロック設定によるスタイルが自動的に適用されます。

補足

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

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

.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 ) {
}

PR

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