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

已發表: 2023-02-16

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

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

為什麼您可能需要不同的側邊欄

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

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

讓我們先介紹手動方式。

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

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

要手動創建新的側邊欄,理想情況下您應該在本地環境中使用子主題。 我們已經為 twentyseventeen 主題創建了一個,但您可以對任何主題執行相同的過程。

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

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

[php]

函數 twentyseventeen_widgets_init() {

註冊側邊欄(

大批(

'name' => __( '博客邊欄', 'twentyseventeen' ),

'id' => 'sidebar-1',

'description' => __( '在此處添加小部件以顯示在博客文章和存檔頁面的側邊欄中。', 'twentyseventeen' ),

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

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

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

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

)

);

註冊側邊欄(

大批(

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

'id' => 'sidebar-2',

'description' => __( '在此處添加小部件以顯示在您的頁腳中。', 'twentyseventeen' ),

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

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

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

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

)

);

註冊側邊欄(

大批(

'名稱' => __( '頁腳 2', 'twentyseventeen' ),

'id' => 'sidebar-3',

'description' => __( '在此處添加小部件以顯示在您的頁腳中。', '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' );

[/php]

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

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

[php]

函數 twentyseventeen_new_widgets_init() {

註冊側邊欄(

大批(

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

'id' => 'sidebar-4',

'description' => __( '在此處添加小部件以顯示在 wordpress 相關博客文章的側邊欄中。', 'twentyseventeen' ),

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

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

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

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

)

);

註冊側邊欄(

大批(

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

'id' => 'sidebar-5',

'description' => __( '在此處添加小部件以顯示在網頁設計相關博客文章的側邊欄中。', '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' );

[/php]

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

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

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

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

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

[php]

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

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

</aside>

[/php]

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

模板驅動方法

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

[php]

/* 模板名稱:WordPress 側邊欄

* 模板帖子類型:帖子*/

[/php]

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

wordpress twentyseventeen 主題與本地文件中的 wordpress-post 和 webdesign-post

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

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

[php]

<?php

如果(is_page_template('wordpress-post.php')){

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}別的{

dynamic_sidebar('sidebar-1');

}

?>

[/php]

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

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

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

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

類別驅動的方法

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

[php]

<?php

如果(in_category('wordpress')){

dynamic_sidebar( 'sidebar-4' );

}elseif ( in_category('網頁設計') ){

dynamic_sidebar( 'sidebar-5' );

}別的{

dynamic_sidebar('sidebar-1');

}

?>

[/php]

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

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

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

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

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

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

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

側邊欄 > 添加新的

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

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

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

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

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

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

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

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

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

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

例如,我們之前創建了My sidebar並且目標位置是Blog Sidebar ,因此在Quick Select面板中, My sidebar將僅適用於Blog Sidebar

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

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

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

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

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

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

結論

Flywheelers 相互合作如何在 wordpress 中為帖子和頁面顯示不同的側邊欄

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