16. クラシックテーマとブロックエディターの共存

この章では、クラシックテーマとブロックエディターの共存を学びます。

この講座ではクラシックテーマ制作を中心にしますが、投稿本文や固定ページ本文ではブロックエディターを使います。

つまり、クラシックテーマだからブロックを無視できるわけではありません。

クラシックテーマでもブロックは使える

ブロックエディターは、ブロックテーマ専用の機能ではありません。

クラシックテーマでも、投稿や固定ページの本文編集にブロックエディターを使えます。

クラシックテーマが担当するのは、主に次の部分です。

• ヘッダー
• フッター
• テンプレート
• 投稿一覧
• 投稿詳細の外枠
• 固定ページの外枠
• CSSやJavaScript

ブロックエディターが担当するのは、主に本文内の編集です。

この役割分担を理解すると、どこをテーマで固定し、どこを編集可能にするか考えやすくなります。

投稿本文とテンプレート

テンプレートでは、the_content()で本文を出力します。

<div class="entry-content">
    <?php the_content(); ?>
</div>

ブロックエディターで作った段落、見出し、画像、カラムなどは、この中に出力されます。

そのため、entry-content内の見た目をCSSで整えることが重要です。

.entry-content h2 {
    margin-top: 48px;
    font-size: 28px;
}

.entry-content p {
    line-height: 1.8;
}

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
}

editor style

公開画面と管理画面の見た目が大きく違うと、編集者が完成イメージをつかみにくくなります。

クラシックテーマでは、エディター用CSSを読み込むことがあります。

function my_theme_setup() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

これにより、ブロックエディター側にもテーマに近いスタイルを当てられます。

完全に同じにする必要はありませんが、本文幅、文字サイズ、見出し、余白を近づけると編集しやすくなります。

使わせるブロックを考える

クライアントが更新する場合、すべてのブロックを自由に使える状態がよいとは限りません。

複雑なレイアウトブロックを自由に使うと、ページごとに見た目がばらつくことがあります。

実務では、次のように考えます。

• 本文は段落、見出し、画像、リストを中心にする
• 複雑なレイアウトはブロックパターン化する
• デザイン固定部分はテーマで作る
• 更新頻度が高い情報は入力しやすくする
• 崩れやすい部分は自由入力させない

編集者の自由度とサイトの安定性のバランスを取ります。

ブロック用CSS

WordPressのブロックには、独自のクラスが付きます。

たとえば、画像ブロックには.wp-block-image、ボタンブロックには.wp-block-buttonのようなクラスが出力されます。

テーマ側でブロックの見た目を整える場合は、これらのクラスを使うことがあります。

.entry-content .wp-block-image {
    margin: 32px 0;
}

.entry-content .wp-block-button__link {
    border-radius: 4px;
    padding: 12px 24px;
}

ただし、WordPress側のHTML構造やクラスはバージョンで変化する可能性があります。

必要な範囲に絞って調整します。

ブロックテーマとの違い

ブロックテーマでは、ヘッダー、フッター、テンプレートもブロックとして管理画面から編集できます。

クラシックテーマでは、それらは基本的にPHPテンプレートで管理します。

この講座では、クラシックテーマで外枠を作り、本文や定型レイアウトにブロックを使う考え方を扱います。

この章のまとめ

• クラシックテーマでも、投稿や固定ページの本文ではブロックエディターを使える
• the_content()の中にブロックエディターの内容が出力される
• 本文エリアのCSSを整えると、ブロック入力された内容も読みやすくなる
• エディター用CSSを用意すると、管理画面で完成イメージをつかみやすい
• 自由度を上げすぎず、ブロックパターンやテーマで更新範囲を設計する