2026年6月28日

WordPressのクラシックテーマをブロックテーマに移行する方法

カスタマイズ

はじめに

「既存のクラシックテーマをブロックエディター対応に移行したい」「PHPテンプレートをHTMLブロックテンプレートに変換したい」「テーマカスタマイザーの設定をtheme.jsonに移したい」——段階的な移行手順でリスクを最小化しながらブロックテーマに移行できます。

症状・原因

クラシックテーマはPHPの知識が必要で、エディターから直接ヘッダーやフッターを編集できません。ブロックテーマに移行することで、ノーコードでのレイアウト編集が可能になりサイト管理が容易になります。

解決手順

ステップ1：移行前の準備と現状把握

# 現在のテーマ構造を確認
wp theme list --status=active
wp post list --post_type=wp_template
wp post list --post_type=wp_template_part

# 使用しているウィジェットエリアを確認
wp sidebar list

# バックアップ（必須）
wp db export backup-before-migration.sql

// functions.php: 現在のテーマサポートと登録済みウィジェットを確認
add_action( 'after_setup_theme', function(): void {
    // 移行前に使用中の機能をリストアップ
    $supports = [
        'custom-logo',
        'custom-header',
        'post-thumbnails',
        'menus',
    ];
    foreach ( $supports as $feature ) {
        error_log( $feature . ': ' . ( current_theme_supports( $feature ) ? 'yes' : 'no' ) );
    }
} );

ステップ2：クラシックテーマのPHPをHTMLテンプレートに変換する

// 【移行前】classic/header.php の典型的な構造
?>
<header id="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <h1 class="site-title">
            <a href="<?php echo esc_url( home_url() ); ?>">
                <?php bloginfo( 'name' ); ?>
            </a>
        </h1>
    </div>
    <nav>
        <?php wp_nav_menu( [ 'theme_location' => 'primary' ] ); ?>
    </nav>
</header>

<!-- 【移行後】parts/header.html に相当するブロックマークアップ -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem"}}},"layout":{"type":"flex","justifyContent":"space-between","alignItems":"center"},"tagName":"header"} -->
<header class="wp-block-group" style="padding-top:1rem;padding-bottom:1rem">

<!-- wp:site-logo {"width":120} /-->

<!-- wp:site-title {"level":1,"isLink":true} /-->

<!-- wp:navigation {"overlayMenu":"mobile","layout":{"type":"flex","justifyContent":"right"}} /-->

</header>
<!-- /wp:group -->

// 【移行前】classic/index.php の典型的な構造
get_header();
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content' );
    endwhile;
    the_posts_pagination();
endif;
get_footer();

<!-- 【移行後】templates/index.html -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:query {"query":{"perPage":10,"inherit":true}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-date /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

ステップ3：クラシックテーマのCSSをtheme.jsonに移行する

/* 【移行前】classic/style.css の典型的なカラー・フォント設定 */
:root {
    --color-primary: #0073aa;
    --color-text:    #1d2327;
    --font-base:     'Noto Sans JP', sans-serif;
    --font-size-base: 16px;
}
body {
    font-family: var(--font-base);
    font-size:   var(--font-size-base);
    color:       var(--color-text);
}
a { color: var(--color-primary); }

// 【移行後】theme.json に変換
{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#0073aa", "name": "プライマリ" },
                { "slug": "text",    "color": "#1d2327", "name": "テキスト"   }
            ],
            "defaultPalette": false
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "'Noto Sans JP', sans-serif",
                    "slug":       "base",
                    "name":       "ベース"
                }
            ],
            "defaultFontSizes": false
        },
        "layout": {
            "contentSize": "760px",
            "wideSize":    "1200px"
        }
    },
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--text)"
        },
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--base)",
            "fontSize":   "1rem"
        },
        "elements": {
            "link": {
                "color": { "text": "var(--wp--preset--color--primary)" }
            }
        }
    }
}

ステップ4：ウィジェットエリアをブロックに移行する

// 【移行前】クラシックテーマのウィジェットエリア
// functions.php
register_sidebar( [
    'id'   => 'footer-1',
    'name' => 'フッターエリア1',
] );

// footer.php
dynamic_sidebar( 'footer-1' );

<!-- 【移行後】parts/footer.html でブロックに直接配置 -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:site-title /-->
<!-- wp:site-tagline /-->
<!-- wp:paragraph -->
<p>© 2024 My Site. All rights reserved.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:navigation /-->
<!-- wp:latest-posts {"postsToShow":5,"displayPostDate":false} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->

ステップ5：移行後のfunctions.phpを整理する

// 【移行後】functions.php: ブロックテーマに不要なコードを削除
add_action( 'after_setup_theme', function(): void {
    // 必要なサポートのみ残す
    add_theme_support( 'wp-block-styles' );
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style.css' );
    add_theme_support( 'post-thumbnails' );

    // ナビゲーションはブロックで管理するため register_nav_menus は省略可能
    // ウィジェットはブロックで管理するため register_sidebar は削除
} );

// 削除できるもの（ブロックテーマでは不要）:
// - register_sidebar() / dynamic_sidebar()
// - add_theme_support('customize-selective-refresh-widgets')
// - wp_nav_menu() 関連のカスタマイザー設定
// - get_header() / get_footer() / get_sidebar() の呼び出し（PHPテンプレート削除）

注意事項

移行はステージング環境で十分テストしてから本番環境に適用してください。特にSEOに影響するURLやメタタグの出力が変わっていないか確認が必要です。
ウィジェットに保存されていたコンテンツはブロックテーマ化後もwp_blockとして残りますが、表示はされません。重要なコンテンツは手動でブロックテンプレートパーツに移行してください。
プラグインがget_header()フックやwp_head()に依存している場合は動作確認が必要です。

まとめ

クラシックテーマからブロックテーマへの移行は「バックアップ→テーマ構造の把握→PHPヘッダー/フッターをHTMLテンプレートパーツに変換→CSSカラー/フォントをtheme.jsonに移行→ウィジェットエリアをブロックに置き換え→functions.phpから不要なコードを削除→Create Block Themeプラグインで調整をエクスポート」の流れで整備します。関連記事：WordPressのフルサイト編集テーマを作成する方法、WordPressのtheme.jsonでスタイルを管理する方法。

Post Views: 1