2026年7月21日

WordPressのGutenberg Full Width Templateを使う方法

テーマ・デザイン

はじめに

Gutenbergは、WordPressで最も人気のあるエディタの一つです。フル幅レイアウトを簡単に作成できるテンプレート機能が搭載されており、ウェブサイトのデザイン性とユーザビリティを向上させます。

症状・背景

ホームページやトップページに美しいフル幅レイアウトが必要な場合
サイドバーを排除し、コンテンツ領域を最大化したい場合
特殊なイベントページやキャンペーンページを作成する必要がある場合
既存のテーマがフル幅テンプレートをサポートしていない場合

手順・設定方法

ステップ1: エディタからFull Width Templateを選択する

# ページエディタを開きます。
/wp-admin/post.php?post=<ページID>&action=edit

# Gutenbergで新規ページを作成します。
/add-new?post_type=page

ステップ2: カスタムCSSの追加（オプション）

# 管理パネルにログインし、外観 > カスタマイズへアクセスします。
/wp-admin/customize.php

# テーマをカスタマイズするための新しいセクションを作成します。
add_action('customize_register', 'my_theme_customize_register');

# CSSを追加します。
function my_theme_customize_register($wp_customize) {
    $wp_customize->add_setting(
        'full_width_css',
        array(
            'default'           => '',
            'sanitize_callback' => 'esc_textarea'
        )
    );

    $wp_customize->add_control( new WP_Customize_Control(
        $wp_customize,
        'full_width_css',
        array(
            'label'   => __( 'Full Width CSS', 'my_theme_domain' ),
            'section' => 'my_theme_section',
            'settings' => 'full_width_css'
        )
    ) );
}

ステップ3: サイドバーの非表示（応用）

# functions.phpにカスタムコードを追加します。
function disable_sidebars() {
    if ( is_page_template( 'template-fullwidth.php' ) ) {
        remove_action('wp_sidebar', 'my_theme_sidebar');
    }
}
add_action('get_header', 'disable_sidebars');

# サイドバー関数の削除
remove_action( 'wp_sidebar', 'my_theme_sidebar' );

ステップ4: ページ表示の確認と調整

# パブリッシュボタンを押してページを公開します。
/wp-admin/post.php?post=<ページID>&action=edit

# ホームページで作成したフル幅テンプレートを使用するように設定します。
update_option('page_on_front', $full_width_page_id);

注意事項

カスタムCSSの追加は、ウェブサイトのデザインと機能に影響を与える可能性があるため慎重に行うべきです。
テーマやプラグインを更新する際には、カスタム設定が上書きされないようバックアップを取りましょう。
既存のページテンプレートを使用せず、独自のテンプレートファイルを作成する場合は、そのファイル名とその他の技術的な詳細について理解しておくことが重要です。

まとめ

1. フル幅レイアウト: サイドバーを非表示にすることで、より多くのスペースをコンテンツに割り当てることができます。

2. カスタムCSSの追加: デザイン要素を柔軟に調整できますが、テーマの更新で上書きされる可能性がありますので注意が必要です。

3. ページテンプレートの選択: 既存のテンプレートを使用するか、独自のテンプレートファイルを作成して使用します。

4. 表示確認と調整: ページを公開前にブラウザで確認し、必要に応じて微調整を行います。

5. バックアップの重要性: 大規模な変更を行う前には必ずウェブサイトのバックアップを取りましょう。

Post Views: 1