ウェブサイトのデザインに合わせてブロックエディターで配置する “見出し” や “段落” 等の見栄えを整えるためのCSSをあらかじめ用意し、投稿単独ページ内のエディターが出力する部分にのみ適用されるようにカスタマイズします。
このCSSは「投稿」にのみ適用されるようにすることで、それ以外の箇所（固定ページやフルサイトエディター・ウィジェット等）には影響を及ぼさないようにします。
使用したバージョン WordPress 6.1.1
PR
概要
カスタマイズのポイント
- 投稿用のCSSファイルを分離することで管理しやすく。
- 編集画面にもCSSを適用してプレビュー可能に。
- 固定ページ等、投稿以外の箇所には影響しないようにする。
- 応用して投稿と固定ページに異なるCSSを適用することも可能。
カスタマイズの大まかな流れ
- 「投稿のエディターが出力する部分」専用のCSSファイルを用意。
- 編集画面にCSSファイルを読み込む。
- フロントエンドにCSSファイルを読み込む。
- 表示するテンプレートファイルを編集。
1. 投稿専用CSSファイルを用意
「投稿」専用のCSSファイルを作成します。今回はファイル名を my-post.css としました。
このファイル内のセレクターは.my-post 〇〇, .editor-styles-wrapper .is-root-container 〇〇のように指定します。前者は公開記事、後者はエディター上の要素に適用されます。
例えば<h2>要素を指定する場合は次のように書きます。
.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,
.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）を読み込みます。
function my_editor_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', 'my_editor_styles' );※ この時点で編集画面にCSSが反映されるようになります。
条件分岐で以前より確実にエディターを絞り込むようにしました。
‘post’ === $post_type の部分を ‘page’ === $post_type に変更して固定ページに限定することもできます。
PR
3. フロントエンドにCSSファイルを読み込む
フロントエンド（公開記事）にもスタイルが適用されるように my-post.css を読み込みます。
既にCSSやスクリプトを読み込んでいる関数がある場合はその中に追加してもOKです。
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を追加します。
<div class="is-layout-constrained my-post">
<?php
the_content();
wp_link_pages();
?>
</div>※ この段階でフロントエンドの公開記事にもCSSが反映されるようになります。
ブロックを出力する箇所のクラス名にis-layout-constrainedを付けておくと、一部のブロック設定によるスタイルが自動的に適用されます。
参考リンク
ブロックの追加機能（幅広・全幅・マージン・パディング等）や配置指定を自動的にテンプレートへ反映させるには【WordPress】
補足
クラス名で様々なブロックを指定
エディターで配置するブロックにはあらかじめクラス名が付けられているため、これを使って任意のブロックのスタイルを指定できます。例えば次のようにして画像ブロックのスタイルを指定できます。
.my-post .wp-block-image,
.editor-styles-wrapper .is-root-container .wp-block-image {
border: 1px solid #AAA;
background: #F2F2F2;
}参考リンク
Gutenberg ブロック名やクラス名一覧【WordPress】
固定ページにも専用のCSSを適用するには
固定ページのエディターが書き出す部分にのみ適用するCSSを用意し、フロントエンド用のセレクター名を投稿専用CSSの場合と異なる名前にします。ここでは.my-pageとしました。
.my-page, // ここだけ変更
.editor-styles-wrapper .is-root-container {
h2 {
font-weight: normal;
}
}固定ページの場合の分岐をfunctions.phpに追加し、用意したmy-page.cssを固定ページの編集画面に読み込みます。
function my_editor_styles() {
global $post_type;
if ( 'post' === $post_type ) {
wp_enqueue_style( 'post-style', get_theme_file_uri( '/css/my-post.css' ), array(), wp_get_theme()->get( 'Version' ) );
} else if ( 'page' === $post_type ) {
wp_enqueue_style( 'page-style', get_theme_file_uri( '/css/my-page.css' ), array(), wp_get_theme()->get( 'Version' ) );
}
}
add_action( 'enqueue_block_editor_assets', 'my_editor_styles' );投稿専用CSSの場合と同様にフロントエンドに読み込みます。
function add_files() {
wp_enqueue_style( 'post-style', get_theme_file_uri( 'my-post.css' ), array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_style( 'page-style', get_theme_file_uri( 'my-page.css' ), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'add_files' );固定ページテンプレートにクラス名を追加します。
<div class="is-layout-constrained my-page">
<?php
the_content();
wp_link_pages();
?>
</div>これで投稿と固定ページそれぞれに異なるCSSを適用できるようになりました。
ウェブサイトに合わせた見出しのデザインを用意しておくだけでも、投稿ユーザーが簡単な操作である程度の見栄えを確保できるのではないでしょうか。
これからも作り手以外のユーザーに使いやすいカスタマイズに力を入れていきたいと思います。
PR
