WordPress 側邊欄開發指南：register_sidebar 與 get_sidebar 完全解析

核心概念

WordPress 側邊欄是小工具容器區域，主題通過註冊側邊欄定義可用區域，用戶在後台「外觀 → 小工具」拖拽放置功能模塊。兩大核心函數：

• register_sidebar()：註冊側邊欄（通常在 functions.php 中掛載到 widgets_init）
• get_sidebar()：在模板文件中調用側邊欄模板文件

register_sidebar() - 註冊側邊欄

語法

register_sidebar( array|string $args = [] ): string|void

參數詳解（陣列形式）

返回值

成功返回側邊欄 ID，失敗返回 WP_Error（如 ID 衝突）。

完整註冊範例

function my_theme_register_sidebars() {
    // 主側邊欄（右側）
    register_sidebar([
        'name'          => __('主側邊欄', 'textdomain'),
        'id'            => 'sidebar-primary',
        'description'   => __('顯示在文章/頁面右側', 'textdomain'),
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '
',
    ]);

    // 頁腳第一欄
    register_sidebar([
        'name'          => __('頁腳左側', 'textdomain'),
        'id'            => 'footer-1',
        'description'   => __('頁腳左側小工具區域', 'textdomain'),
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '
',
    ]);

    // 頁腳第二欄
    register_sidebar([
        'name'          => __('頁腳中間', 'textdomain'),
        'id'            => 'footer-2',
        'description'   => __('頁腳中間小工具區域', 'textdomain'),
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '
',
    ]);

    // 頁腳第三欄
    register_sidebar([
        'name'          => __('頁腳右側', 'textdomain'),
        'id'            => 'footer-3',
        'description'   => __('頁腳右側小工具區域', 'textdomain'),
        'before_widget' => '
',
        'after_widget'  => '
',
        'before_title'  => '
',
        'after_title'   => '
',
    ]);
}
add_action('widgets_init', 'my_theme_register_sidebars');

get_sidebar() - 調用側邊欄模板

語法

get_sidebar( string $name = null ): void

模板文件加載規則

1. 若傳入 $name（如 get_sidebar('left')），加載 sidebar-{$name}.php（即 sidebar-left.php）
2. 若不傳入參數，加載 sidebar.php
3. 若主題無對應文件，回退加載 wp-includes/theme-compat/sidebar.php（核心默認）

常見佈局模式

1. 單側邊欄（傳統博客）

// sidebar.php
<aside id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar('sidebar-primary'); ?>
</aside>

2. 雙側邊欄（左側邊欄 + 右側邊欄）

// sidebar-left.php
<aside id="sidebar-left" class="widget-area">
    <?php dynamic_sidebar('sidebar-left'); ?>
</aside>

// sidebar-right.php
<aside id="sidebar-right" class="widget-area">
    <?php dynamic_sidebar('sidebar-primary'); ?>
</aside>

// 模板文件 page.php / single.php
<?php get_sidebar('left'); ?>
<main id="primary" class="content-area">...</main>
<?php get_sidebar('right'); ?>

3. 頁腳多欄位

// footer.php
<footer id="colophon" class="site-footer">
    <div class="footer-widgets">
        <?php dynamic_sidebar('footer-1'); ?>
        <?php dynamic_sidebar('footer-2'); ?>
        <?php dynamic_sidebar('footer-3'); ?>
    </div>
</footer>

dynamic_sidebar() - 核心輸出函數

get_sidebar() 只是包含模板文件，真正輸出小工具的是模板內的 dynamic_sidebar()：

// 判斷側邊欄是否有小工具，避免輸出空容器
if (is_active_sidebar('sidebar-primary')) {
    dynamic_sidebar('sidebar-primary');
}

進階技巧

1. 條件性註冊：僅在特定頁面類型註冊側邊欄（罕見，通常全註冊再條件性調用）
2. 側邊欄預設小工具：主題啟用時自動添加預設小工具
   

   function my_theme_default_widgets() {
       if (get_option('my_theme_widgets_initialized')) return;
       $sidebars = ['sidebar-primary' => ['search-2', 'recent-posts-2', 'categories-2']];
       foreach ($sidebars as $sidebar_id => $widgets) {
           $sidebar = get_option('sidebars_widgets', []);
           $sidebar[$sidebar_id] = $widgets;
           update_option('sidebars_widgets', $sidebar);
       }
       update_option('my_theme_widgets_initialized', true);
   }
   add_action('after_switch_theme', 'my_theme_default_widgets');

3. 移除核心側邊欄：子主題中移除父主題註冊的側邊欄
   

   function my_child_remove_sidebars() {
       unregister_sidebar('sidebar-primary'); // 需知道父主題 ID
   }
   add_action('widgets_init', 'my_child_remove_sidebars', 11); // 優先級大於父主題

4. 區塊主題/全站編輯（FSE）：WordPress 5.9+ 區塊主題使用 template parts 替代傳統側邊欄，但經典主題繼續沿用本機制。

最佳實踐檢查清單

• [ ] 所有側邊欄 ID 唯一、語義化（sidebar-primary、footer-1）
• [ ] before_widget 包含 id="%1$s" 和 class="widget %2$s" 以支持核心 CSS/JS
• [ ] before_title/after_title 語義化標籤（h2-h4），無障礙友好
• [ ] 模板文件中使用 is_active_sidebar() 判斷再輸出
• [ ] 國際化所有用戶可見字符串（name/description）
• [ ] 提供 editor-style.css 使後台小工具預覽與前端一致

文件位置

• register_sidebar()：wp-includes/widgets.php
• get_sidebar()：wp-includes/general-template.php
• dynamic_sidebar()：wp-includes/widgets.php

總結

register_sidebar() 定義容器，get_sidebar() 載入模板，dynamic_sidebar() 輸出小工具。掌握三者配合，即可構建靈活的佈局區域，支援用戶自定義內容模塊。現代主題開發建議：語義化 ID、無障礙標記、條件性輸出、國際化字符串。