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. Ale czasami możesz chcieć wyświetlić zupełnie inny pasek boczny dla najważniejszego postu 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żemy, 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 o tym, dlaczego możesz chcieć to zrobić.

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

Jak wspomniano wcześniej, jeśli masz wiele kategorii na swoim blogu, możesz pokusić się o 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 będziesz chciał mieć unikalny pasek boczny. Możesz go utworzyć na dwa sposoby: ręcznie, opracowując własną wtyczkę lub za pomocą wtyczki WordPress.

Najpierw omówimy 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. Stworzyliśmy już jeden 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ę różnić w zależności od motywu.

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

[php]

funkcja dwadzieścia siedemnaście_widgetów_init() {

pasek_boczny_rejestru(

szyk(

'name' => __( 'Pasek boczny bloga', 'twentyseventeen' ),

'id' => 'pasek boczny-1',

'description' => __( 'Dodaj tutaj widżety, aby pojawiały się na Twoim pasku bocznym w postach na blogu i stronach archiwalnych.', 'twentyseventeen' ),

'before_widget' => '<identyfikator sekcji =”%1$s” class=”widget %2$s”>',

'after_widget' => '</sekcja>',

'before_title' => '<h2 class=”tytuł-widgetu”>',

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

)

);

pasek_boczny_rejestru(

szyk(

'nazwa' => __( 'Stopka 1', 'dwadzieścia siedemnaście' ),

'id' => 'pasek boczny-2',

'description' => __( 'Dodaj tutaj widżety, które pojawią się w Twojej stopce.', 'twentyseventeen' ),

'before_widget' => '<identyfikator sekcji =”%1$s” class=”widget %2$s”>',

'after_widget' => '</sekcja>',

'before_title' => '<h2 class=”tytuł-widgetu”>',

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

)

);

pasek_boczny_rejestru(

szyk(

'nazwa' => __( 'Stopka 2', 'dwadzieścia siedemnaście' ),

'id' => 'pasek boczny-3',

'description' => __( 'Dodaj tutaj widżety, które pojawią się w Twojej stopce.', 'twentyseventeen' ),

'before_widget' => '<identyfikator sekcji =”%1$s” class=”widget %2$s”>',

'after_widget' => '</sekcja>',

'before_title' => '<h2 class=”tytuł-widgetu”>',

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

)

);

}

add_action( 'widgets_init', 'twentyseventeen_widgets_init');

[/php]

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. Powinieneś także zmienić nazwę i opis, aby każdy był wyjątkowy. Tutaj stworzyliśmy dwa nowe paski boczne:

[php]

funkcja dwadzieścia siedemnaście_new_widgets_init() {

pasek_boczny_rejestru(

szyk(

'nazwa' => __( 'Pasek boczny WordPress', 'dwadzieścia siedemnaście' ),

'id' => 'pasek boczny-4',

'description' => __( 'Dodaj tutaj widżety, aby pojawiały się na pasku bocznym w postach na blogu związanych z wordpress.', 'twentyseventeen' ),

'before_widget' => '<identyfikator sekcji =”%1$s” class=”widget %2$s”>',

'after_widget' => '</sekcja>',

'before_title' => '<h2 class=”tytuł-widgetu”>',

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

)

);

pasek_boczny_rejestru(

szyk(

'name' => __( 'Pasek boczny Web Design', 'twentyseventeen' ),

'id' => 'pasek boczny-5',

'description' => __( 'Dodaj widżety tutaj, aby pojawiały się na pasku bocznym w postach na blogu związanych z projektowaniem stron internetowych.', 'twentyseventeen' ),

'before_widget' => '<identyfikator sekcji =”%1$s” class=”widget %2$s”>',

'after_widget' => '</sekcja>',

'before_title' => '<h2 class=”tytuł-widgetu”>',

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

)

);

}

add_action( 'widgets_init', 'dwadzieścia siedemnaście_new_widgets_init');

[/php]

Nowe paski boczne są już gotowe; Jeśli zaznaczysz sekcję widżetów, zostaną wyświetlone dwa nowe obszary widżetów. Dodaliśmy prosty widżet tekstowy do każdego paska bocznego, aby były rozpoznawalne.

Po utworzeniu pasków bocznych nadszedł czas na przypisanie lokalizacji. Chcemy zastąpić istniejący prawy pasek boczny, więc musisz znaleźć plik tam, gdzie się on znajduje.

W tym przypadku jest to sidebar.php . Skopiuj plik z motywu nadrzędnego i wklej go do motywu podrzędnego.

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

[php]

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

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

</strona>

[/php]

Teraz utworzymy 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 wymagań. W tym przykładzie single.php odpowiada za pojedyncze posty, więc możesz skopiować i wkleić ten plik do motywu potomnego. Zmień odpowiednio nazwę pliku, na przykład wordpress-post.php , i dodaj również nazwę szablonu.

[php]

/* Nazwa szablonu: Pasek boczny WordPress

* Typ posta szablonu: post*/

[/php]

Podobnie stworzyliśmy 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 jest oczywisty. Sprawdza, który szablon jest używany i odpowiednio ustawia pasek boczny. Jeśli żaden z warunków nie zostanie spełniony, zostanie użyty domyślny pasek boczny.

[php]

<?php

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

dynamic_sidebar('pasek boczny-4');

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

dynamic_sidebar('pasek boczny-5');

}w przeciwnym razie{

dynamic_sidebar('pasek boczny-1');

}

?>

[/php]

Teraz utwórzmy nowy post i przypiszmy jeden z właśnie utworzonych szablonów.

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 szablonach. Aby to zrobić, musisz dostosować warunek w sidebar.php na podstawie kategorii zamiast szablonu za pomocą funkcji in_category() .

[php]

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar('pasek boczny-4');

}elseif ( in_category('projektowanie stron internetowych') ){

dynamic_sidebar('pasek boczny-5');

}w przeciwnym razie{

dynamic_sidebar('pasek boczny-1');

}

?>

[/php]

Teraz, jeśli edytujesz lub tworzysz nowy post, po prostu dodaj żądaną kategorię. Odpowiednio wyświetli pasek boczny, więc nie ma potrzeby wybierania żadnego szablonu! Tutaj wybraliśmy 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 Pasków bocznych w panelu administracyjnym.

Paski boczne > Dodaj nowy

Najpierw dodaj nazwę do paska bocznego. Następnie możesz ustawić warunki wyświetlania z listy rozwijanej 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ć tagi 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ć czynności, takie jak tworzenie krótkiego kodu paska bocznego.

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

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 ustawień początkowych.

W poście lub na stronie zobaczysz panel Paski boczne — Szybki wybór po prawej stronie, 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 utworzyliśmy Mój pasek boczny , a 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 jednak tworzyć nowe paski boczne w 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 także 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

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