WordPressのウィジェットエリアを追加する方法【functions.phpの活用】

ウィジェットエリアとは？

ウィジェットエリアとは、WordPressの 「外観」→「ウィジェット」 で管理できるエリアのことです。
通常、サイドバー や フッター などにウィジェットを追加できます。

テーマによってはデフォルトで用意されていないこともあるため、自分で functions.php にコードを書いて追加する必要があります。

functions.php にウィジェットエリアを追加する方法

1. 基本的なウィジェットエリアの追加

functions.php に以下のコードを追加すると、新しいウィジェットエリアが作成されます。

function my_custom_widgets_init() {
    register_sidebar( array(
        'name'          => 'カスタムサイドバー', // ウィジェットエリアの名前
        'id'            => 'custom-sidebar', // 一意のID（変更しない）
        'before_widget' => '<div class="widget">', // ウィジェット開始タグ
        'after_widget'  => '</div>', // ウィジェット終了タグ
        'before_title'  => '<h2 class="widget-title">', // タイトル開始タグ
        'after_title'   => '</h2>', // タイトル終了タグ
    ) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );

このコードの解説

2. 複数のウィジェットエリアを追加

もし、サイドバーとフッターに別々のウィジェットエリア を作りたい場合は、次のように記述します。

function my_custom_widgets_init() {
    // サイドバー用ウィジェットエリア
    register_sidebar( array(
        'name'          => 'サイドバー',
        'id'            => 'sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );

    // フッター用ウィジェットエリア
    register_sidebar( array(
        'name'          => 'フッター',
        'id'            => 'footer-widget',
        'before_widget' => '<div class="footer-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="footer-widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'my_custom_widgets_init' );

このコードを追加すると、
「外観」→「ウィジェット」に「サイドバー」と「フッター」という2つのウィジェットエリアが追加されます。

3. 作成したウィジェットエリアをテーマ内で表示

ウィジェットエリアを登録しただけでは、テーマに表示されません。
表示させたい場所に以下のコードを追加しましょう。

サイドバーにウィジェットエリアを追加

sidebar.php や header.php など、好きな場所に記述してください。

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar' ); ?>
    </aside>
<?php endif; ?>

フッターにウィジェットエリアを追加

footer.php に次のように記述すると、フッターにもウィジェットエリアが表示されます。

<?php if ( is_active_sidebar( 'footer-widget' ) ) : ?>
    <div class="footer-widgets">
        <?php dynamic_sidebar( 'footer-widget' ); ?>
    </div>
<?php endif; ?>

dynamic_sidebar() の解説

4. ウィジェットエリアにCSSを適用

ウィジェットのデザインを整えるために style.css に以下のようなCSSを追加しましょう。

.widget {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.widget-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.footer-widget {
    background-color: #222;
    color: #fff;
    padding: 20px;
}

.footer-widget-title {
    font-size: 16px;
    margin-bottom: 10px;
}

🔹 まとめ

1. functions.php に register_sidebar() を追加 → ウィジェットエリアを登録
2. テンプレートファイル (sidebar.php など) に dynamic_sidebar() を記述 → ウィジェットを表示
3. CSS でデザインを調整 → 見た目を整える