2026年7月16日

WordPressのウィジェットが表示されない問題を解決する方法

テーマ・デザイン

はじめに

WordPressのウィジェット管理画面でサイドバーにウィジェットを追加したのにフロントエンドに表示されない・WordPress 5.8以降でブロックウィジェットエディターに切り替わったら以前設定したウィジェットが全部消えた・テーマのfunctions.phpにregister_sidebar()を追加したが管理画面に新しいウィジェットエリアが出てこない・カスタムウィジェットを作成したがWidgets画面に表示されないといった問題は、register_sidebar()の登録フック・テンプレートのdynamic_sidebar()呼び出し・ブロックウィジェットへの移行が原因です。

症状・原因

テーマのsidebar.phpにdynamic_sidebar()が呼ばれていない
register_sidebar()をwidgets_initフック以外（直接・initフック等）で呼んでいる
ブロックウィジェットに移行後、旧ウィジェットの設定がwp_get_sidebars_widgets()から消えた
カスタムウィジェットクラスがWP_Widgetを継承していない

解決手順

ステップ1：ウィジェットエリアの状態を診断する

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

# 各サイドバーにセットされているウィジェットを確認
wp eval "
\$sidebars = wp_get_sidebars_widgets();
foreach (\$sidebars as \$sidebar_id => \$widgets) {
    echo \$sidebar_id . ': ' . implode(', ', (array)\$widgets) . PHP_EOL;
}
"

# アクティブなウィジェット一覧
wp widget list sidebar-1 --format=table

ステップ2：サイドバーを正しく登録する

// functions.php: widgets_init フックで登録（必須）
add_action('widgets_init', function(): void {
    register_sidebar([
        'id'            => 'main-sidebar',
        'name'          => 'メインサイドバー',
        'description'   => '記事横のサイドバーに表示されるウィジェットエリア',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ]);

    register_sidebar([
        'id'            => 'footer-1',
        'name'          => 'フッターウィジェット',
        'before_widget' => '<div id="%1$s" class="footer-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4>',
        'after_title'   => '</h4>',
    ]);
});

ステップ3：テンプレートにdynamic_sidebarを追加する

// sidebar.php: ウィジェットエリアを表示
if (is_active_sidebar('main-sidebar')) {
    echo '<aside class="sidebar" role="complementary">';
    dynamic_sidebar('main-sidebar');
    echo '</aside>';
}

// フォールバック（ウィジェットが設定されていない場合）
if (! is_active_sidebar('main-sidebar')) {
    echo '<aside class="sidebar sidebar--empty">';
    echo '<p>ウィジェットを追加してください（外観 → ウィジェット）</p>';
    echo '</aside>';
}

ステップ4：カスタムウィジェットを正しく作成する

// WP_Widget を継承したカスタムウィジェット
class My_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'my_custom_widget',      // ウィジェットID
            'カスタムウィジェット',   // ウィジェット名
            ['description' => '最新のカスタムウィジェットです']
        );
    }

    // フロントエンドの表示
    public function widget(array $args, array $instance): void {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title'] ?? '');
        if ($title) {
            echo $args['before_title'] . esc_html($title) . $args['after_title'];
        }
        echo '<p>' . esc_html($instance['text'] ?? '') . '</p>';
        echo $args['after_widget'];
    }

    // 管理画面のフォーム
    public function form(array $instance): void {
        $title = $instance['title'] ?? '';
        $text  = $instance['text']  ?? '';
        printf(
            '<p><label>タイトル<input class="widefat" name="%s" type="text" value="%s"></label></p>',
            esc_attr($this->get_field_name('title')),
            esc_attr($title)
        );
    }

    public function update(array $new_instance, array $old_instance): array {
        return [
            'title' => sanitize_text_field($new_instance['title']),
            'text'  => sanitize_textarea_field($new_instance['text']),
        ];
    }
}

// widgets_init で登録
add_action('widgets_init', fn() => register_widget('My_Custom_Widget'));

ステップ5：ブロックウィジェットへの移行と旧ウィジェットの復元

// ブロックウィジェットエディターを無効化して旧エディターに戻す
add_filter('gutenberg_use_widgets_block_editor', '__return_false');
add_filter('use_widgets_block_editor',           '__return_false');

# 旧ウィジェットのデータを確認（option テーブルに保存されている）
wp option get sidebars_widgets --format=json | python -m json.tool

# wp-cli でウィジェットを追加
wp widget add text sidebar-1 1 --title="テキストウィジェット" --text="本文"

# ウィジェットの順番を変更
wp widget move text-2 --sidebar-id=sidebar-1 --position=1

注意事項

register_sidebar()は必ずwidgets_initフックの中で呼んでください。initや直接呼び出しでは管理画面に表示されないことがあります
WordPress 5.8以降のブロックウィジェットエディターでは、旧来のPHPウィジェットも引き続き使えますが、設定の保存場所が変わる場合があります。use_widgets_block_editorフィルターで旧エディターに戻すことができます
FSE（Full Site Editing）対応テーマ（theme.jsonを持つテーマ）では従来のウィジェットエリアは使用されません。テンプレートパーツとブロックで構成します

まとめ

WordPressウィジェット非表示の解決は①$wp_registered_sidebarsで登録サイドバーを確認・wp_get_sidebars_widgets()でウィジェット割り当てを確認・wp widget listでウィジェット一覧を確認、②widgets_initフックの中でregister_sidebar()を呼ぶ・before_widget/after_widget/before_title/after_titleのHTML構造をテーマに合わせる、③sidebar.phpにis_active_sidebar()チェック付きでdynamic_sidebar()を呼ぶ・未設定時のフォールバックメッセージを表示、④WP_Widgetを継承してwidget()・form()・update()の3メソッドを実装・register_widget()で登録、⑤use_widgets_block_editorに__return_falseでブロックウィジェットを無効化・wp widget addでCLIからウィジェットを追加の手順で解決します。

Post Views: 3