2026年5月20日

WordPressのサイドバーを特定ページで非表示にする方法

テーマ・デザイン

はじめに

特定のページだけサイドバーを非表示にしたい場合、PHPの条件分岐タグ（is_page()・is_single()）を使うのが最も確実です。ページごとにカスタムフィールドで制御する方法も柔軟で実用的です。

症状・原因

トップページだけサイドバーを非表示にしたい
ランディングページや特定の固定ページでサイドバーが邪魔
投稿タイプによってサイドバーの有無を切り替えたい
サイドバーを非表示にするとレイアウトが崩れる

解決手順

ステップ1：条件分岐タグでサイドバーを非表示にする

// sidebar.php または テンプレートファイルに条件を追加

// 方法1: 特定ページを除外
if (!is_front_page() && !is_page([10, 20, 'landing-page'])) {
    get_sidebar();
}

// 方法2: サイドバー側で制御
// sidebar.php の先頭に追加
if (is_front_page() || is_page('contact')) {
    return; // 表示しない
}
dynamic_sidebar('sidebar-1');

// よく使う条件分岐タグ一覧
is_front_page()          // トップページ
is_home()                // 投稿一覧ページ
is_page(10)              // ID=10の固定ページ
is_page('about')         // スラッグ=aboutの固定ページ
is_page([10, 20, 30])    // 複数ページ
is_single()              // 投稿詳細
is_singular('product')   // productカスタム投稿タイプ
is_archive()             // アーカイブページ
is_category(5)           // カテゴリーID=5
is_search()              // 検索結果
is_404()                 // 404ページ

ステップ2：page.phpやtemplate fileで制御する

// 子テーマでコピーした page.php を編集
// 固定ページテンプレートでサイドバーを非表示にする

// NG: 常にサイドバーを表示
get_sidebar();

// OK: このページではサイドバーを非表示
// → get_sidebar() の呼び出しを削除するだけ

// フルワイドレイアウト用のページテンプレートを作成
// wp-content/themes/my-child-theme/page-full-width.php

<?php
/*
Template Name: フルワイドレイアウト
Template Post Type: page
*/
get_header();
?>
<main class="site-main full-width">
    <?php while (have_posts()): the_post(); ?>
        <?php get_template_part('template-parts/content', 'page'); ?>
    <?php endwhile; ?>
</main>
<?php
// get_sidebar() を呼ばない = サイドバー非表示
get_footer();

ステップ3：カスタムフィールドで柔軟に制御する

// functions.php — カスタムフィールドでサイドバーを制御
add_action('add_meta_boxes', function(): void {
    add_meta_box(
        'sidebar_control',
        'サイドバー設定',
        function(WP_Post $post): void {
            $hide = get_post_meta($post->ID, '_hide_sidebar', true);
            echo '<label>';
            echo '<input type="checkbox" name="hide_sidebar" value="1" ' . checked($hide, '1', false) . '>';
            echo ' このページでサイドバーを非表示にする';
            echo '</label>';
        },
        ['page', 'post'],
        'side'
    );
});

// 保存処理
add_action('save_post', function(int $post_id): void {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    $value = isset($_POST['hide_sidebar']) ? '1' : '';
    update_post_meta($post_id, '_hide_sidebar', $value);
});

// sidebar.php またはテンプレートで確認
if (get_post_meta(get_the_ID(), '_hide_sidebar', true) === '1') {
    return; // サイドバーを非表示
}
dynamic_sidebar('sidebar-1');

ステップ4：CSSでサイドバーを非表示にする（簡易的な方法）

// functions.php — ページごとにbodyにクラスを追加
add_filter('body_class', function(array $classes): array {
    if (is_page('contact') || is_front_page()) {
        $classes[] = 'no-sidebar';
    }
    return $classes;
});

/* style.css — no-sidebarクラスでサイドバーを非表示 */
.no-sidebar .widget-area {
    display: none;
}

.no-sidebar .site-main {
    max-width: 100%;
    width: 100%;
}

/* フルワイドレイアウト */
.no-sidebar .content-area {
    display: block; /* flexを解除 */
}

ステップ5：WP-CLIで設定を確認する

# 特定ページのカスタムフィールドを確認
wp post meta get {POST_ID} _hide_sidebar

# すべてのページの _hide_sidebar 設定を確認
wp post list --post_type=page --format=table | while read -r id; do
    val=$(wp post meta get $id _hide_sidebar 2>/dev/null)
    [ -n "$val" ] && echo "ID:$id → $val"
done

# body_classのテスト
wp eval "
\$classes = get_body_class();
echo implode(', ', \$classes) . PHP_EOL;
"

注意事項

get_sidebar() の呼び出しを削除するだけでサイドバーは非表示になりますが、レイアウト（2カラム→1カラム）も合わせて調整してください
CSSで display: none にする方法は、HTMLには出力されてしまうため、パフォーマンス的にはPHPの条件分岐の方が優れています
カスタムフィールドで制御する方法は、編集者がコードを書かずに制御できるため実用的です

まとめ

特定ページのサイドバー非表示は「条件分岐タグ（is_page等）で get_sidebar() を呼ばない → フルワイドテンプレートを作成 → カスタムフィールドで柔軟制御」の3つの方法から選択します。

Post Views: 12