Sidebars · WordPress開發手冊

## 什么是Sidebars 側邊欄是您的主題的任何小部件區域。小部件區域是您主題中的地方，用戶可以添加自己的小部件。您不需要在主題中包含側邊欄，但包括側欄意味著用戶可以通過定制程序或窗口小部件管理面板向窗口小部件區域添加內容。小部件可以用于各種目的，從列出最近的帖子到進行實時聊天。 >[info] 提示：名稱“sidebars”來自于小部件區域通常在漫長的條帶中創建到博客的左側或右側的時間。今天，邊欄已經超越了原來的名字。它們可以包含在您網站的任何地方。將邊欄視為包含小部件的任何區域。 ## 注冊Sidebar 要使用側邊欄，您必須在functions.php中注冊它們。要開始，register_sidebar()有幾個參數應該始終被定義，不管它們是否被標記為可選。這些包括x，y和z。 - name - 您的側邊欄的名稱。這是用戶將在“小部件”面板中看到的名稱。 - id - 必須是小寫。您將使用dynamic_sidebar函數將其稱為主題。 - description - 側邊欄的說明。這也將顯示在管理窗口小部件面板中。 - class - 要分配給窗口小部件的HTML的CSS類名稱。 - before_widget - 在每個窗口小部件之前放置的HTML。 - after_widget - 每個窗口小部件后面放置的HTML。應該用于從before_widget關閉標簽。 - before_title - 放置在每個窗口小部件的標題之前的HTML，例如標題標簽。 - after_title - 每個標題后放置的HTML。應該用于從before_title關閉標簽。要注冊邊欄，我們使用register_sidebar和widgets_init函數。 ``` function themename_widgets_init() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'theme_name' ), 'id' => 'sidebar-1', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h1 class="widget-title">', 'after_title' => '</h1>', ) ); register_sidebar( array( 'name' => __( 'Secondary Sidebar', 'theme_name' ), 'id' => 'sidebar-2', 'before_widget' => '<ul><li id="%1$s" class="widget %2$s">', 'after_widget' => '</li></ul>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'themename_widgets_init' ); ``` 注冊邊欄告訴WordPress，您將在Appearance> Widgets中創建一個新的小部件區域，用戶可以將其小部件拖動到其中。注冊側邊欄有兩種功能： - register_sidebar（） - register_sidebars（）第一個可以讓您注冊一個側邊欄，第二個可以讓您注冊多個側邊欄。 >[info] 提示：建議您單獨注冊側邊欄，因為它可以為每個側邊欄提供唯一和描述性的名稱。 ## 示例對于頁眉和頁腳中的小部件區域，將其標題為“標題小部件區域”和“頁腳小部件區域”，而不是“邊欄1”和“邊欄2”（這是默認值）。這提供了側邊欄所在位置的有用描述。以下代碼，添加到functions.php注冊一個側邊欄： ``` <?php add_action( 'widgets_init', 'my_register_sidebars' ); function my_register_sidebars() { /* Register the 'primary' sidebar. */ register_sidebar( array( 'id' => 'primary', 'name' => __( 'Primary Sidebar' ), 'description' => __( 'A short description of the sidebar.' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); /* Repeat register_sidebar() code for additional sidebars. */ } ?> ``` 代碼執行以下操作： - register_sidebar – 告訴WordPress你正在注冊邊欄 - `'name' => __( 'Primary Widget Area', 'mytheme' )`, – 是將出現在外觀>小部件中的小部件區域的名稱 - `'id' => 'sidebar-1'` – 在側邊欄分配一個ID。 WordPress使用“id”將小部件分配給特定的側邊欄。 - before_widget/after_widget – 分配給側邊欄的小部件的包裝元素。 “％1 $ s”和“％2 $ s”應該分別保留在id和class中，以便插件可以使用它們。默認情況下，WordPress將其設置為列表項，但在上述示例中，它們已被更改為div。 - before_title/after_title – 小部件標題的包裝元素。默認情況下，WordPress將其設置為h2，但使用h3使其更具語義。一旦您的側欄被注冊，您可以在主題中顯示。 ## 在主題中顯示側邊欄現在您的側邊欄已注冊，您將要在主題中顯示。為此，有兩個步驟： - 創建sidebar.php模板文件，并使用dynamic_sidebar函數顯示邊欄 - 使用get_sidebar函數加載主題 ## 創建側欄模板文件側邊欄模板包含您的側邊欄的代碼。 WordPress識別文件sidebar.php和名稱為sidebar-{name} .php的任何模板文件。這意味著您可以在自己的模板文件中的每個側邊欄中組織文件。 ## 示例: 1. 創建 sidebar-primary.php 2. 添加以下代碼： ``` <div id="sidebar-primary" class="sidebar"> <?php dynamic_sidebar( 'primary' ); ?> </div> ``` >[info] 請注意，dynamic_sidebar采用$index的單個參數，可以是邊欄的名稱或ID。 ## 加載你的側欄要在您的主題中加載您的側邊欄，請使用get_sidebar函數。這應該被插入到你想要側欄顯示的模板文件中。要加載默認的sidebar.php，請使用以下命令： ``` <?php get_sidebar(); ?> ``` 要顯示主側邊欄，請將$name參數傳遞給函數： ``` <?php get_sidebar( 'primary' ); ?> ``` # 自定義您的側欄有很多方法可以自定義您的側邊欄。這里有些例子： ## 顯示默認側欄內容如果用戶尚未向邊欄添加任何小部件，則可能希望顯示內容。為此，您可以使用is_sidebar_active()函數檢查邊欄是否有任何小部件。這接受$index參數，該參數應該是要檢查的邊欄的ID。此代碼檢查邊欄是否處于活動狀態，如果不顯示某些內容： ``` <div id="sidebar-primary" class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : ?> <?php dynamic_sidebar( 'primary' ); ?> <?php else : ?>  <?php endif; ?> </div> ``` ## 顯示默認窗口小部件您可能希望您的側邊欄默認填充一些小部件。例如，顯示搜索，存檔和元小部件。為此，您將使用： ``` <div id="primary" class="sidebar"> <?php do_action( 'before_sidebar' ); ?> <?php if ( ! dynamic_sidebar( 'sidebar-primary' ) ) : ?> <aside id="search" class="widget widget_search"> <?php get_search_form(); ?> </aside> <aside id="archives" class"widget"> <h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1> <ul> <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?> </ul> </aside> <aside id="meta" class="widget"> <h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </aside> <?php endif; ?> </div> ```