Jak wyświetlać różne paski boczne dla postów i stron w WordPress

Domyślnie WordPress wyświetla ten sam pasek boczny na wszystkich postach i stronach. Czasami jednak możesz chcieć wyświetlić zupełnie inny pasek boczny dla najważniejszych postów lub elementów paska bocznego związanych z całą kategorią postów. Jeśli kiedykolwiek zastanawiałeś się, jak to zrobić, masz szczęście!

W tym artykule pokażę, jak tworzyć unikalne paski boczne dla różnych postów lub stron, zarówno ręcznie, jak i za pomocą wtyczek WordPress. Ale najpierw porozmawiajmy więcej o tym, dlaczego możesz chcieć to zrobić.

Dlaczego możesz chcieć różnych pasków bocznych

Jak wspomniano wcześniej, jeśli masz na swoim blogu wiele kategorii, możesz ulec pokusie, aby mieć pasek boczny z podobnymi ofertami, reklamami lub produktami do tego tematu. A może chcesz porozmawiać o swojej firmie na pasku bocznym „O nas”, dostosowanym do odbiorców każdej strony.

W tego typu sytuacjach przyda Ci się unikalny pasek boczny. Istnieją dwa sposoby na utworzenie jednego: ręcznie, tworząc własną lub za pomocą wtyczki WordPress.

Omówmy najpierw sposób ręczny.

Jak ręcznie utworzyć nowy pasek boczny WordPress

Aby ręcznie utworzyć nowy pasek boczny, najlepiej użyć motywu potomnego w środowisku lokalnym. Stworzyłem już swój dla motywu dwadzieścia siedemnaście, ale możesz wykonać ten sam proces dla dowolnego motywu.

Najpierw znajdź plik, w którym pasek boczny jest zarejestrowany w twoim motywie. Zazwyczaj jest to plik functions.php, ale może się on różnić w zależności od motywu.

Otwórz plik i znajdź funkcję kodu paska bocznego. Generalnie będzie składał się z register_sidebar , a pełna funkcja może wyglądać mniej więcej tak:

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' );

Teraz skopiuj całą funkcję i utwórz plik functions.php w motywie potomnym (jeśli jeszcze go nie masz) i wklej kod. Pamiętaj, aby zmienić nazwę funkcji.

W zależności od tego, ile dodatkowych pasków bocznych musisz utworzyć, możesz po prostu zreplikować ten sam kod i przypisać unikalny identyfikator do każdego paska bocznego. Należy również zmienić nazwę i opis, aby każdy z nich był unikalny. Tutaj stworzyłem dwa nowe paski boczne:

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' );

Nowe paski boczne są już gotowe; Jeśli sprawdzisz sekcję widżetów, pokażą się dwa nowe obszary widżetów. Do każdego paska bocznego dodałem prosty widżet tekstowy, aby były rozpoznawalne.

Po utworzeniu pasków bocznych nadszedł czas, aby przypisać lokalizację. Chcemy zastąpić istniejący prawy pasek boczny, więc musisz znaleźć plik, w którym się znajduje.

W tym przypadku znajduje się w sidebar.php . Skopiuj plik z motywu nadrzędnego i wklej go do motywu podrzędnego.

Jeśli sprawdzisz plik, wywołuje on sidebar-1 , który jest identyfikatorem głównego prawego paska bocznego.

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

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

</aside>

Teraz utworzę jeden pasek boczny dla mojej kategorii projektowania stron internetowych, a drugi dla mojej kategorii WordPress. Można to osiągnąć na dwa różne sposoby: jeden to podejście oparte na szablonach, a drugi to podejście oparte na kategoriach.

Podejście oparte na szablonach

W tym podejściu musisz tworzyć różne szablony w zależności od Twoich wymagań. W tym przykładzie single.php odpowiada za pojedyncze posty, więc możesz skopiować i wkleić plik w motywie potomnym. Zmień odpowiednio nazwę pliku, na przykład wordpress-post.php , i dodaj również nazwę szablonu.

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

Podobnie stworzyłem inny szablon o nazwie webdesign-post.php .

Teraz wróć do pliku sidebar.php motywu potomnego i dodaj prosty warunek, aby sprawdzić, który szablon jest używany. W tym celu użyjemy funkcji is_page_template() .

Kod nie wymaga wyjaśnień. Sprawdza, który szablon jest używany i odpowiednio ustawia pasek boczny. Jeśli żaden z warunków nie zostanie spełniony, użyje domyślnego paska bocznego.

<?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' );

}

?>

Teraz utwórzmy nowy post i przypiszmy jeden z szablonów, które właśnie stworzyliśmy.

Zobaczysz, że wybrałem pasek boczny WordPress dla tego konkretnego postu.

Podejście oparte na kategoriach

W tym przykładzie (zmiana paska bocznego na podstawie kategorii postów) podejście oparte na kategoriach będzie działać lepiej niż podejście oparte na szablonie. Aby to zrobić, musisz dostosować warunek w sidebar.php na podstawie kategorii zamiast szablonu za pomocą funkcji in_category() .

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

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

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

Teraz, jeśli edytujesz lub tworzysz nowy post, po prostu dodaj wybraną kategorię. Odpowiednio wyświetli pasek boczny, więc nie ma potrzeby wybierania żadnego szablonu! Tutaj wybrałem projektowanie stron internetowych jako moją kategorię postów, więc pojawi się pasek boczny projektowania stron internetowych.

Zasadniczo wystarczy dostosować warunek sidebar.php zgodnie z określonymi wymaganiami.

Jak tworzyć niestandardowe paski boczne za pomocą wtyczek WordPress

Jeśli masz problemy z ręcznym tworzeniem pasków bocznych, możesz wypróbować kilka przydatnych wtyczek WordPress, które umożliwiają łatwe ich tworzenie!

Jedną z takich wtyczek jest Content Aware Sidebars. To prosta wtyczka, która pozwala dynamicznie tworzyć paski boczne na poszczególnych stronach, postach, kategoriach itp.

Po zainstalowaniu zobaczysz menu Sidebars w panelu administracyjnym.

Paski boczne > Dodaj nowy

Najpierw dodaj nazwę do paska bocznego. Następnie możesz ustawić warunki wyświetlania z menu rozwijanego Warunki paska bocznego . Pasek boczny może mieć wiele warunków, takich jak strony, posty, kategorie, autor itp.

Możesz zaplanować swój pasek boczny z karty harmonogramu i zmienić znaczniki HTML na karcie projektu.

Zobaczysz pole Opcje po prawej stronie. Stamtąd możesz ustawić lokalizację i zasady nowego paska bocznego. Możesz także wykonywać akcje, takie jak tworzenie skróconego kodu paska bocznego.

Po opublikowaniu paska bocznego możesz uzyskać do niego dostęp z sekcji Wygląd > Widgety .

Ten nowy pasek boczny pojawi się na stronach i postach automatycznie, zgodnie z Twoimi ustawieniami.

Wtyczka umożliwia również wybieranie pasków bocznych podczas edycji każdego posta lub strony, niezależnie od początkowych ustawień.

W poście lub na stronie po prawej stronie zobaczysz panel Paski boczne — Szybki wybór , który pokaże wszystkie istniejące paski boczne. Stamtąd możesz wybrać swój pasek boczny w lokalizacji docelowej ustawionej wcześniej w ustawieniach początkowych.

Na przykład wcześniej utworzyłem Mój pasek boczny , a moją lokalizacją docelową był Pasek boczny bloga , więc w panelu Szybki wybór Mój pasek boczny będzie dostępny tylko dla paska bocznego bloga .

Możesz także tworzyć nowe paski boczne z sekcji edycji strony. Po prostu wpisz nazwę nowego paska bocznego i opublikuj lub zaktualizuj stronę.

Jeśli utworzysz nowy pasek boczny, wystarczy go aktywować w sekcji Wygląd > Widżety .

Uwaga: możesz również przypisać paski boczne do swoich stron, ale upewnij się, że szablon strony zawiera pasek boczny. Bez tego pasek boczny nie będzie wyświetlany, nawet jeśli ustawisz go w sekcji edycji strony.

Wniosek

Stażysta projektanta, Rese i dyrektor artystyczny Flywheel, Andrea

Widziałeś teraz dwie opcje tworzenia pasków bocznych: programowanie ręczne oraz za pomocą wtyczek. Jeśli nie znasz się na kodach, najlepszym rozwiązaniem dla Ciebie może być użycie wtyczki, ale jeśli masz określone wymagania i nie chcesz dodawać dodatkowej wtyczki do swojej witryny, powinieneś wybrać ręczny sposób . Ważne jest, aby zrozumieć swoje wymagania, a następnie wybrać najlepszą opcję!

Gotowy na kolejny samouczek? Wypróbuj jedną z tych opcji:

• Jak dodać przyklejony przycisk „od góry do góry” na swojej stronie?
• Jak tworzyć niestandardowe szablony pojedynczych postów
• Jak sprawić, by Twoja witryna WordPress była przyjazna dla urządzeń mobilnych
• Jak sklonować swoją witrynę WordPress