如何在 WordPress 中為帖子和頁面顯示不同的側邊欄

已發表: 2018-08-20

默認情況下,WordPress 在所有帖子和頁面上顯示相同的側邊欄。 但有時,您可能希望為最重要的帖子或與整個帖子類別相關的側邊欄項目顯示完全不同的側邊欄。 如果您曾經想知道如何做到這一點,那麼您很幸運!

在本文中,我將向您展示如何為不同的帖子或頁面創建獨特的側邊欄,無論是手動還是使用 WordPress 插件。 但首先,讓我們更多地談談您為什麼要這樣做。

為什麼你可能想要不同的側邊欄

如前所述,如果您的博客中有很多類別,您可能會想擁有一個側邊欄,其中包含與該主題類似的優惠、廣告或產品。 或者,也許您想在“關於我們”側邊欄中談論您的業務,該側邊欄為每個頁面的受眾量身定制。

在這些類型的情況下,您將需要一個獨特的側邊欄。 有兩種方法可以創建一種:通過自己開發或使用 WordPress 插件手動創建。

讓我們先介紹手動方式。

工具標尺鍵盤和植物的圖像對齊以在桌面上顯示 wordpress 側邊欄與其他書籍和技術

如何手動創建一個新的 WordPress 側邊欄

要手動創建新的側邊欄,理想情況下您應該在本地環境中使用子主題。 我已經為二十七主題創建了我的,但你可以為任何主題遵循相同的過程。

首先,在您的主題中找到側邊欄註冊的文件。 通常它是 functions.php 文件,但它可能會因您的主題而異。

打開文件並找到側邊欄代碼的功能。 它通常由register_sidebar組成,完整的功能可能如下所示:

function twentyseventeen_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Blog Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-1',

'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'       => __( 'Footer 1', 'twentyseventeen' ),

'id'         => 'sidebar-2',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'      => __( 'Footer 2', 'twentyseventeen' ),

'id'         => 'sidebar-3',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

現在復制整個函數並在您的子主題中創建一個 functions.php 文件(如果您還沒有)並粘貼代碼。 確保更改函數名稱。

根據您需要創建多少額外的側邊欄,您可以簡單地複制相同的代碼並為每個側邊欄分配一個唯一的 ID。 您還應該更改名稱和描述以使每一個都獨一無二。 在這裡,我創建了兩個新的側邊欄:

function twentyseventeen_new_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Wordpress Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-4',

'description'   => __( 'Add widgets here to appear in your sidebar on wordpress related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);



register_sidebar(

array(

'name'       => __( 'Web Design Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-5',

'description'   => __( 'Add widgets here to appear in your sidebar on web design related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);

}

add_action( 'widgets_init', 'twentyseventeen_new_widgets_init' );

新的側邊欄現已準備就緒; 如果您檢查小部件部分,它將顯示兩個新的小部件區域。 我為每個側邊欄添加了一個簡單的文本小部件,以使它們易於識別。

wordpress 儀表板 wordpress 小部件和內容選擇器以及帶有多個頁腳的不同側邊欄

創建側邊欄後,就該分配位置了。 我們正在尋找替換現有的右側邊欄,因此您需要找到它所在的文件。

在本例中,它位於sidebar.php中。 從父主題複製文件並將其粘貼到您的子主題中。

如果您檢查文件,它會調用sidebar-1 ,它是主要右側邊欄的 id。

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

現在,我將為我的網頁設計類別和我的 WordPress 類別創建一個側邊欄。 這可以通過兩種不同的方式實現:一種是模板驅動的方法,另一種是類別驅動的方法。

在我們開始之前,學習如何製作一個自定義的單帖模板!

模板驅動的方法

在這種方法中,您必鬚根據您的要求創建不同的模板。 對於此示例,single.php 負責單個帖子,因此您可以將文件複製並粘貼到您的子主題中。 相應地重命名文件,如wordpress-post.php ,並添加模板名稱。

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

同樣,我創建了另一個名為webdesign-post.php模板。

本地文件中帶有 wordpress-post 和 webdesign-post 的 wordpress 二十七主題

現在,回到子主題的sidebar.php文件並添加一個簡單的條件來檢查正在使用的模板。 為此,我們將使用is_page_template()函數。

代碼是不言自明的。 它檢查正在使用的模板並相應地設置側邊欄。 如果不滿足任何條件,它將使用默認側邊欄。

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

現在讓我們創建一個新帖子並分配我們剛剛創建的模板之一。

使用不同的側邊欄編輯 wordpress 帖子屬性模板

你會看到我已經為這個特定的帖子選擇了 WordPress 側邊欄。

帶有不同側邊欄的實時帖子的wordpress預覽

類別驅動的方法

對於此示例(根據帖子類別更改側邊欄),類別驅動的方法比模板驅動的方法效果更好。 為此,您需要使用in_category()函數根據類別而不是模板調整sidebar.php中的條件。

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( in_category('web-design') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

現在,如果您編輯或創建新帖子,只需添加您想要的類別。 它會相應地顯示側邊欄,因此無需選擇任何模板! 在這裡,我選擇了網頁設計作為我的帖子類別,所以網頁設計側邊欄會出現。

wordpress 側邊欄更新基於選擇的類別網頁設計

基本上,您只需要根據您的具體要求調整sidebar.php 的條件。

如何使用 WordPress 插件創建自定義側邊欄

如果您在手動創建側邊欄時遇到問題,可以嘗試一些方便的 WordPress 插件,讓您輕鬆創建它們!

一個這樣的插件是內容感知側邊欄。 這是一個簡單的插件,可讓您在單個頁面、帖子、類別等上動態創建側邊欄。

尋找設計師喜歡的更棒的插件? 看看這個免費指南!

安裝後,您將在管理面板中看到側邊欄菜單。

側邊欄 > 添加新的

wordpress 側邊欄插件選項添加新的側邊欄

首先,在側邊欄中添加一個名稱。 然後,您可以從側邊欄條件下拉菜單中設置顯示條件。 側邊欄可以有多個條件,如頁面、帖子、類別、作者等。

為 wordpress 帖子和頁面設置我的側邊欄建議不同的側邊欄

您可以從計劃選項卡安排側邊欄,並在設計選項卡中更改 HTML 標記。

您將在右側看到一個選項框。 從那裡,您可以設置新側邊欄的位置和規則。 您還可以執行操作,例如創建側邊欄的簡碼。

發布側邊欄後,您可以從“外觀”>“小部件”部分訪問它。

在外觀小部件中編輯我的側邊欄選項以獲得不同的 wordpress 側邊欄用於帖子和頁面

根據您的設置,這個新的側邊欄將自動出現在頁面和帖子上。

該插件還允許您在編輯每個帖子或頁面時選擇側邊欄,無論您的初始設置如何。

在帖子或頁面中,您會在右側看到一個側邊欄- 快速選擇面板,該面板將向您顯示所有現有的側邊欄。 從那裡您可以在先前在初始設置中設置的目標位置中選擇側邊欄。

例如,我之前創建了我的側邊欄,我的目標位置是博客側邊欄,所以在快速選擇面板中,我的側邊欄將僅適用於博客側邊欄

快速選擇文章和頁面的博客側邊欄以獲得不同的 wordpress 側邊欄

但是,您也可以從編輯頁面部分創建新的側邊欄。 只需輸入新側邊欄的名稱並發布或更新頁面。

根據帖子和頁面選擇新的 wordpress 側邊欄

如果您創建一個新的側邊欄,您只需要在外觀 > 小部件部分激活它。

wordpress儀表板中帖子和頁面的不同側邊欄的詳細信息

注意:您還可以為頁面分配側邊欄,但請確保您的頁面模板包含側邊欄。 沒有它,即使您在編輯頁面部分中設置了側邊欄,也不會顯示它。

結論

Flywheelers 相互合作如何在 wordpress 中為帖子和頁面顯示不同的側邊欄 Flywheel 的設計實習生 Rese 和藝術總監 Andrea

您現在已經看到了創建側邊欄的兩個選項:手動開發以及使用插件。 如果您對代碼不滿意,那麼使用插件可能是您的最佳選擇,但如果您有特定要求並且不想向您的網站添加額外的插件,那麼您應該採用手動方式. 重要的是了解您的要求,然後選擇您的最佳選擇!

準備好下一個教程了嗎? 嘗試其中之一:

  • 如何在您的網站上添加粘性返回頂部按鈕
  • 如何創建自定義單篇文章模板
  • 如何使您的 WordPress 網站對移動設備友好
  • 如何克隆您的 WordPress 網站