2026年5月20日

WordPressのウィジェットエリアを追加する方法

テーマ・デザイン

はじめに

WordPressのウィジェットエリアは register_sidebar() で登録し、テンプレートで dynamic_sidebar() を呼び出して表示します。WordPress 5.8以降はブロックウィジェットエディターが標準になりましたが、従来のウィジェットAPIも引き続き動作します。

症状・原因

テーマにサイドバーがない・足りない
フッターウィジェットエリアを追加したい
特定ページだけ異なるサイドバーを表示したい

解決手順

ステップ1：ウィジェットエリアを登録する

// functions.php
add_action('widgets_init', function(): void {

    // メインサイドバー
    register_sidebar([
        'name'          => 'メインサイドバー',
        'id'            => 'sidebar-main',
        'description'   => '投稿・固定ページ右側のサイドバーです。',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ]);

    // フッターウィジェットエリア（3カラム）
    for ($i = 1; $i <= 3; $i++) {
        register_sidebar([
            'name'          => "フッターエリア {$i}",
            'id'            => "footer-{$i}",
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h4 class="widget-title">',
            'after_title'   => '</h4>',
        ]);
    }
});

ステップ2：テンプレートで表示する

// sidebar.php
<?php if (is_active_sidebar('sidebar-main')) : ?>
    <aside class="site-sidebar" role="complementary">
        <?php dynamic_sidebar('sidebar-main'); ?>
    </aside>
<?php endif; ?>

// footer.php
<div class="footer-widgets">
    <?php for ($i = 1; $i <= 3; $i++) : ?>
        <?php if (is_active_sidebar("footer-{$i}")) : ?>
            <div class="footer-widget-col">
                <?php dynamic_sidebar("footer-{$i}"); ?>
            </div>
        <?php endif; ?>
    <?php endfor; ?>
</div>

ステップ3：ページ・投稿タイプ別にサイドバーを切り替える

// sidebar.php
<?php
// 投稿タイプ別にサイドバーを切り替え
if (is_singular('event')) {
    $sidebar_id = 'sidebar-event';
} elseif (is_page()) {
    $sidebar_id = 'sidebar-page';
} else {
    $sidebar_id = 'sidebar-main';
}

if (is_active_sidebar($sidebar_id)) : ?>
    <aside class="site-sidebar">
        <?php dynamic_sidebar($sidebar_id); ?>
    </aside>
<?php endif; ?>

ステップ4：ウィジェットエリアのCSS

/* サイドバーレイアウト */
.site-content-area {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

@media (max-width: 768px) {
    .site-content-area {
        grid-template-columns: 1fr;
    }
    .site-sidebar {
        order: 2; /* モバイルでは本文の後に表示 */
    }
}

/* ウィジェット共通スタイル */
.widget {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #2271b1;
}

/* フッターウィジェット */
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem 0;
}

ステップ5：ブロックウィジェットエディターを無効化する（必要な場合）

// functions.php
// 従来のウィジェット画面に戻す（WP 5.8+向け）
add_filter('use_widgets_block_editor', '__return_false');

注意事項

is_active_sidebar() で確認してからエリアを表示するのが推奨です。ウィジェットが未登録の場合にHTMLが出力されません
WP 5.8以降のブロックウィジェットでは before_widget/after_widget のHTMLがブロック出力に影響しない場合があります
register_sidebar() の id はスラッグ形式（英小文字・ハイフン）で設定してください

まとめ

register_sidebar() でウィジェットエリアを登録し、テンプレートで is_active_sidebar() を確認してから dynamic_sidebar() で表示します。フッターエリアはループで複数登録できます。モバイル対応にはCSSグリッドで grid-template-columns: 1fr に切り替えます。

Post Views: 17