自作テーマにブロックエディタ対応を追加する方法｜必要な記述と対応範囲を丁寧に解説

2025.06.24

WordPress

WordPress 5.0以降に導入された**Gutenberg（ブロックエディタ）**は、クラシックエディタよりも柔軟にコンテンツを作成できるのが特徴です。
しかし、自作テーマでは何も対応していないと、ブロックのスタイルが崩れたり、編集画面と実際の表示が大きく異なったりすることがあります。

この記事では、自作テーマにブロックエディタへの対応を追加する方法を、functions.phpの記述からスタイル連携まで丁寧に解説します。

Contents

1 なぜブロックエディタ対応が必要なのか？
- 1.1 自作テーマが未対応の場合：
2 ブロックエディタ対応の基本ステップ
3 よくある補足対応
- 3.1 □ クラシックエディタとの互換性を残したい場合
- 3.2 □ 背景色・テキスト色を自由に使わせたくない場合
4 まとめ
5 参考サイト
6 関連記事

なぜブロックエディタ対応が必要なのか？

WordPressのブロックエディタは以下のような特徴を備えています：

ブロックごとに構成された直感的な編集体験
カラム、見出し、画像、ボタンなどの豊富な要素
編集画面とフロント表示の整合性が重要

自作テーマが未対応の場合：

編集画面に正しいスタイルが反映されない
カラーパレットや幅の選択肢が使えない
フルワイド表示など一部のレイアウト機能が無効になる

ブロックエディタ対応の基本ステップ

1. `add_theme_support()` で対応を宣言する

自作テーマの functions.php に以下を追加します：

function mytheme_setup() {
  // ブロックエディタ用のCSSを有効にする
  add_theme_support('editor-styles');
  add_editor_style('editor-style.css');

  // 幅広・全幅対応（例：カバーブロックの全幅表示）
  add_theme_support('align-wide');

  // カスタムカラーパレット
  add_theme_support('editor-color-palette', [
    [
      'name' => 'メインカラー',
      'slug' => 'main',
      'color' => '#0073aa',
    ],
    [
      'name' => 'アクセントカラー',
      'slug' => 'accent',
      'color' => '#f56a6a',
    ],
  ]);

  // カスタムフォントサイズ
  add_theme_support('editor-font-sizes', [
    [
      'name' => '小',
      'size' => 12,
      'slug' => 'small'
    ],
    [
      'name' => '中',
      'size' => 16,
      'slug' => 'medium'
    ],
    [
      'name' => '大',
      'size' => 24,
      'slug' => 'large'
    ],
  ]);
}
add_action('after_setup_theme', 'mytheme_setup');

2. 編集画面用CSSを用意する（例：`editor-style.css`）

/* 編集画面用スタイル例 */
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.wp-block {
  max-width: 700px;
  margin: 0 auto;
}

📌 editor-style.css はテーマフォルダ直下 or assets/css/editor-style.css に配置可能。
パスが異なる場合は add_editor_style() に相対パスで指定してください。

3. フロントとエディタの見た目を一致させる

共通のスタイルを style.css にまとめつつ、必要に応じて editor-style.css にも一部をコピー・最適化しましょう。

また、以下も有効です：

// フォントや変数を共通化する
add_editor_style('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

4. サポート状況を確認する方法

ブロックエディタ内で「全幅」「幅広」が使えるか
編集画面の背景色やフォントがカスタム化されているか
カラーパレットやフォントサイズが反映されているか

よくある補足対応

□ クラシックエディタとの互換性を残したい場合

add_theme_support(‘editor-styles’); // Gutenberg用
add_theme_support(‘wp-block-styles’); // ブロックエディタ向けCSSの読み込み

□ 背景色・テキスト色を自由に使わせたくない場合

add_theme_support('disable-custom-colors');
add_theme_support('disable-custom-font-sizes');

まとめ

自作テーマをブロックエディタに対応させることで、編集画面と表示画面のズレを防ぎ、ユーザーがより快適に記事を作成できるようになります。
最低限の add_theme_support() の記述と editor-style.css の調整だけで大きく改善されるので、ぜひ実装してみましょう！

参考サイト

add_theme_support()