2026年8月18日

WordPressのサイドバーが表示されない問題を解決する方法

テーマ・デザイン

はじめに

WordPressのサイトを表示するとサイドバーが消えている・テーマをカスタマイズしたらサイドバーが表示されなくなった・管理画面の外観→ウィジェットでサイドバーエリアが表示されない・CSSのレイアウト崩れでサイドバーがメインコンテンツの下に落ちているといった問題は、テーマテンプレートにget_sidebar()がない・register_sidebar()の設定不備・CSSのfloatやflexboxの問題が原因です。

症状・原因

テーマのsingle.phpやpage.phpにget_sidebar()の呼び出しがない
sidebar.phpファイルがテーマに存在しない
CSS で.sidebar要素のwidthが0またはoverflow:hiddenで非表示になっている
テーマのレスポンシブデザインでモバイル表示時にサイドバーが非表示になっている

解決手順

ステップ1：サイドバーの問題を診断する

# テーマにget_sidebarの呼び出しがあるか確認
wp eval "
\$theme_dir = get_template_directory();
\$templates = glob(\$theme_dir . '/*.php');
foreach (\$templates as \$tpl) {
    \$content = file_get_contents(\$tpl);
    if (str_contains(\$content, 'get_sidebar')) {
        echo basename(\$tpl) . ': get_sidebar() found' . PHP_EOL;
    }
}
"

# sidebar.phpが存在するか確認
wp eval "
\$theme_dir  = get_template_directory();
\$child_dir  = get_stylesheet_directory();
echo 'sidebar.php (theme): '       . (file_exists(\$theme_dir . '/sidebar.php')        ? 'exists' : 'MISSING') . PHP_EOL;
echo 'sidebar-left.php (theme): '  . (file_exists(\$theme_dir . '/sidebar-left.php')   ? 'exists' : 'MISSING') . PHP_EOL;
echo 'sidebar.php (child): '       . (file_exists(\$child_dir . '/sidebar.php')        ? 'exists' : 'MISSING') . PHP_EOL;
"

# 登録されているサイドバーを確認
wp eval "
global \$wp_registered_sidebars;
if (empty(\$wp_registered_sidebars)) {
    echo 'WARNING: No sidebars registered!' . PHP_EOL;
} else {
    foreach (\$wp_registered_sidebars as \$id => \$sb) {
        echo \$id . ': ' . \$sb['name'] . PHP_EOL;
    }
}
"

ステップ2：sidebar.phpとget_sidebar()を追加する

// sidebar.php: 基本的なサイドバーテンプレート
<aside id="secondary" class="widget-area sidebar">
    <?php if (is_active_sidebar('sidebar-1')) : ?>
        <?php dynamic_sidebar('sidebar-1'); ?>
    <?php else : ?>
        <!-- サイドバーにウィジェットが未設定の場合のデフォルト表示 -->
        <section class="widget">
            <h2 class="widget-title">最近の投稿</h2>
            <ul>
                <?php foreach (wp_get_recent_posts(['numberposts' => 5]) as $recent) : ?>
                    <li>
                        <a href="<?php echo get_permalink($recent['ID']); ?>">
                            <?php echo esc_html($recent['post_title']); ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </section>
    <?php endif; ?>
</aside>

// single.php / page.php: サイドバーを表示するテンプレート
<?php get_header(); ?>

<div class="content-area-wrapper">
    <main id="main" class="site-main">
        <?php while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
            </article>
        <?php endwhile; ?>
    </main>

    <?php get_sidebar(); ?>  <!-- サイドバーを呼び出す -->
</div>

<?php get_footer(); ?>

ステップ3：特定ページでのサイドバー表示を制御する

// functions.php: ページタイプによるサイドバー表示制御
function should_show_sidebar(): bool {
    // 以下のページではサイドバーを非表示
    if (is_front_page() || is_page_template('page-landing.php')) {
        return false;
    }
    if (is_attachment() || is_404()) {
        return false;
    }
    return true;
}

// テンプレートで使用
// if (should_show_sidebar()) { get_sidebar(); }

// 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>';
            wp_nonce_field('hide_sidebar_nonce', 'hide_sidebar_nonce');
        },
        ['post', 'page']
    );
});

add_action('save_post', function(int $post_id): void {
    if (!isset($_POST['hide_sidebar_nonce'])
        || !wp_verify_nonce($_POST['hide_sidebar_nonce'], 'hide_sidebar_nonce')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    $hide = isset($_POST['hide_sidebar']) ? '1' : '';
    update_post_meta($post_id, '_hide_sidebar', $hide);
});

ステップ4：CSSレイアウトを修正する

/* style.css: サイドバーのレイアウト修正 */

/* ① Flexboxレイアウト */
.content-area-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.site-main {
    flex: 1;
    min-width: 0;  /* overflow防止 */
}

.widget-area.sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* ② モバイルでのサイドバー表示 */
@media (max-width: 768px) {
    .content-area-wrapper {
        flex-direction: column;
    }
    .widget-area.sidebar {
        width: 100%;
    }
}

/* ③ サイドバーが下に落ちる問題（float使用時） */
.content-area-wrapper::after {
    content: '';
    display: table;
    clear: both;
}

.site-main {
    float: left;
    width: calc(100% - 320px);
}

.widget-area.sidebar {
    float: right;
    width: 300px;
}

// functions.php: body_classでサイドバーの有無を制御
add_filter('body_class', function(array $classes): array {
    if (is_active_sidebar('sidebar-1') && should_show_sidebar()) {
        $classes[] = 'has-sidebar';
    } else {
        $classes[] = 'no-sidebar';
    }
    return $classes;
});

ステップ5：複数サイドバーとコンテキスト対応を実装する

// functions.php: ページタイプ別に異なるサイドバーを表示
function get_contextual_sidebar(): void {
    if (is_singular('product')) {
        get_sidebar('shop');        // sidebar-shop.php
    } elseif (is_singular('post')) {
        get_sidebar('blog');        // sidebar-blog.php
    } elseif (is_page()) {
        get_sidebar('page');        // sidebar-page.php
    } else {
        get_sidebar();              // sidebar.php
    }
}

// 各サイドバーエリアを登録
add_action('widgets_init', function(): void {
    $sidebars = [
        ['name' => 'ブログサイドバー',    'id' => 'sidebar-blog'],
        ['name' => 'ショップサイドバー',  'id' => 'sidebar-shop'],
        ['name' => 'ページサイドバー',    'id' => 'sidebar-page'],
    ];
    foreach ($sidebars as $sb) {
        register_sidebar(array_merge($sb, [
            'before_widget' => '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        ]));
    }
});

注意事項

get_sidebar()はsidebar.phpを読み込みます。get_sidebar('shop')のように引数を指定するとsidebar-shop.phpを読み込みます。ファイルが存在しない場合はsidebar.phpにフォールバックします
CSSでサイドバーが表示されない場合は、ブラウザの開発者ツールで.widget-area要素を確認してください。width: 0・overflow: hidden・display: none・visibility: hiddenなどが設定されていないか確認します
レスポンシブデザインでモバイル表示時にサイドバーが非表示になっている場合は、display: noneを解除するか、flex-direction: columnに変更してサイドバーをコンテンツの下に表示してください

まとめ

WordPressサイドバー非表示の解決は①テーマファイルにget_sidebar()の呼び出しがあるか確認・sidebar.phpの存在確認・$wp_registered_sidebarsが空でないか確認、②sidebar.phpテンプレートを作成してdynamic_sidebar()を配置・各テンプレートファイルにget_sidebar()を追加、③should_show_sidebar()関数でページタイプ別表示制御・投稿メタボックスで個別ページのサイドバー表示をオン/オフ・body_classフィルターでhas-sidebarクラスを追加、④CSSのFlexboxレイアウトで.site-mainと.widget-areaを横並び・min-width: 0でoverflow問題を防止・モバイルはflex-direction: columnで縦積み、⑤get_sidebar('blog')など引数付きでsidebar-{name}.phpを呼び分け・ページタイプ別サイドバーをregister_sidebar()で登録・widgets_initフックで複数のサイドバーエリアを一括登録の手順で解決します。

Post Views: 12