2026年5月20日

WordPressのフッターのウィジェットを表示する方法

テーマ・デザイン

はじめに

WordPressのフッターにウィジェットを表示するには、register_sidebar() でフッター用エリアを登録し、footer.php で dynamic_sidebar() を呼び出します。テーマによってはフッターウィジェットエリアが最初から用意されていない場合があります。

症状・原因

フッターにウィジェットが表示されない
外観 → ウィジェットにフッターエリアが表示されない
フッターウィジェットの列数を変えたい

解決手順

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

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

    // フッターを3カラムで登録
    for ($i = 1; $i <= 3; $i++) {
        register_sidebar([
            'name'          => sprintf('フッターエリア %d', $i),
            'id'            => sprintf('footer-%d', $i),
            'description'   => sprintf('フッター %d 列目のウィジェットエリアです。', $i),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title footer-widget-title">',
            'after_title'   => '</h3>',
        ]);
    }
});

ステップ2：footer.phpでウィジェットを表示する

// footer.php
<?php
// フッターウィジェットが1つでも有効なら表示
$has_footer_widgets = false;
for ($i = 1; $i <= 3; $i++) {
    if (is_active_sidebar("footer-{$i}")) {
        $has_footer_widgets = true;
        break;
    }
}
?>

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

<footer class="site-footer">
    <p class="copyright">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>

ステップ3：フッターウィジェットのCSSレイアウト

/* フッターウィジェットエリア全体 */
.footer-widgets-area {
    background: #1d2327;
    color: #a7aaad;
    padding: 3rem 0;
}

.footer-widgets-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* タブレット: 2カラム */
@media (max-width: 900px) {
    .footer-widgets-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマートフォン: 1カラム */
@media (max-width: 600px) {
    .footer-widgets-inner {
        grid-template-columns: 1fr;
    }
}

/* フッターウィジェットタイトル */
.footer-widget-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #3c434a;
}

/* ウィジェット内リンク */
.footer-widgets-area a {
    color: #a7aaad;
    text-decoration: none;
}

.footer-widgets-area a:hover {
    color: #fff;
}

/* ウィジェット間のスペース */
.footer-widgets-area .widget {
    margin-bottom: 1.5rem;
}

ステップ4：列数を動的に変える

// functions.php: 列数を設定オプションにする場合
$footer_cols = get_theme_mod('footer_columns', 3); // Customizerで設定

add_action('widgets_init', function() use ($footer_cols): void {
    for ($i = 1; $i <= $footer_cols; $i++) {
        register_sidebar([
            'name' => sprintf('フッターエリア %d', $i),
            'id'   => sprintf('footer-%d', $i),
            // ...
        ]);
    }
});

/* 列数をCSS変数で制御 */
.footer-widgets-inner {
    display: grid;
    grid-template-columns: repeat(var(--footer-cols, 3), 1fr);
    gap: 2rem;
}

// wp_head でCSS変数を出力
add_action('wp_head', function(): void {
    $cols = (int) get_theme_mod('footer_columns', 3);
    echo "<style>.footer-widgets-inner { --footer-cols: {$cols}; }</style>";
});

注意事項

is_active_sidebar() で確認してからウィジェットを表示してください。ウィジェットが未登録の状態で dynamic_sidebar() を呼ぶと空のHTMLが出力されます
WordPress 5.8以降のブロックウィジェットを使う場合、before_widget/after_widget のHTMLが一部無視されることがあります
フッターコピーライト表示は footer.php のウィジェットエリアの下に配置するのが一般的です

まとめ

widgets_init フックで register_sidebar(['id' => 'footer-1', ...]) を登録し、footer.php で is_active_sidebar('footer-1') を確認してから dynamic_sidebar('footer-1') で表示します。CSS Gridで grid-template-columns: repeat(3, 1fr) にするとレスポンシブな3カラムフッターを実現できます。

Post Views: 15