WordPress投稿ページにウィジェット（サイドバー）を読み込む方法

WordPress の single.php にウィジェットを読み込むことで、投稿ページにサイドバーを追加できます。本記事では、ウィジェットエリアを作成し、single.php で表示する方法を具体例とともに解説します。

1. ウィジェットエリアを作成する

まず、functions.php にウィジェットエリアを登録します。

function my_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => 'サイドバー',
            'id'            => 'sidebar-1',
            'before_widget' => '<div class="widget">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action('widgets_init', 'my_theme_widgets_init');

このコードを functions.php に追加することで、管理画面の「ウィジェット」セクションに新しいウィジェットエリアが追加されます。

2. single.php にウィジェット（サイドバー）を読み込む

次に、single.php にウィジェットエリアを表示するコードを追加します。

<?php get_header(); ?>

<div class="content-area">
    <main class="main-content">
        <?php
        while (have_posts()) : the_post();
            get_template_part('template-parts/content', 'single');
        endwhile;
        ?>
    </main>

    <aside class="sidebar">
        <?php if (is_active_sidebar('sidebar-1')) : ?>
            <?php dynamic_sidebar('sidebar-1'); ?>
        <?php endif; ?>
    </aside>
</div>

<?php get_footer(); ?>

このコードでは、

• get_template_part('template-parts/content', 'single'); で記事の内容を表示。
• <aside class="sidebar"> 内で dynamic_sidebar('sidebar-1'); を使用し、ウィジェットを表示。

3. 条件分岐で特定の slug の場合のみサイドバーを変更する

特定の投稿スラッグ（例: custom-post）にのみ別のウィジェットエリアを表示したい場合は、以下のように条件分岐を追加します。

<aside class="sidebar">
    <?php 
    if (is_active_sidebar('sidebar-1')) {
        if (is_single() && get_post_field('post_name') === 'custom-post') {
            dynamic_sidebar('sidebar-2'); // 特定のスラッグ用のウィジェット
        } else {
            dynamic_sidebar('sidebar-1'); // 通常のサイドバー
        }
    }
    ?>
</aside>

このコードでは、

• get_post_field('post_name') で現在の投稿のスラッグを取得。
• custom-post であれば sidebar-2 を表示、それ以外は sidebar-1 を表示。

サイドバーを追加する (functions.php)

特定のスラッグ用のウィジェットエリアを登録するには、以下のコードを functions.php に追加します。

function my_theme_custom_sidebars() {
    register_sidebar(
        array(
            'name'          => 'カスタムサイドバー',
            'id'            => 'sidebar-2',
            'before_widget' => '<div class="widget">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
}
add_action('widgets_init', 'my_theme_custom_sidebars');

4. CSS でレイアウトを調整する

サイドバーを見やすくするために、CSS でスタイルを調整します。

.content-area {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

.main-content {
    width: 70%;
}

.sidebar {
    width: 30%;
    padding: 20px;
    background-color: #f4f4f4;
}

この CSS により、

• メインコンテンツが 70%
• サイドバーが 30%

のレイアウトになります。

まとめ

1. functions.php でウィジェットエリアを登録
2. single.php で dynamic_sidebar() を使用しウィジェットを表示
3. スラッグを条件分岐させ、特定のウィジェットを表示
4. CSS でレイアウトを調整