WordPress – jak dodać drugi sidebar do szablonu, trzeci i kolejne

Jakiś czas temu, przy okazji pisania mojej pierwszej serii kursów dotyczących tworzenia i modyfikacji szablonów do WordPress opisywałem, jak dodać do motywu jeden dynamiczny sidebar, do którego można dodawać widgety z poziomu panelu administracyjnego.

Ostatnio tworzyłem szablon do WordPress, w którym koniecznie był potrzebny także drugi sidebar. No i dlatego dzisiaj pójdziemy o krok dalej i dodamy kolejne sidebary.

Specjalnie na tę okazję przygotowałem sobie rysunek poglądowy w dokumentach Google, na podstawie którego wyjaśnię, co chcę osiągnąć i w jaki sposób. Zapraszam.

Dynamiczny sidebar razy 3

Tak! Będą 3 dynamiczne sidebary. Ale jeszcze zanim cokolwiek zaczniemy robić przydałoby się zakreślić plan działania i zakreślić wszystkie cele. 🙂

W pierwszej kolejności należy zastanowić się, co w danych sidebarach ma się mieścić. Akurat w tym przykładzie, chcę mieć dwa pionowe sidebary i jeden poziomy. Warto także rozważyć, jak zorganizujemy poziomy sidebar – czy każdy widget będzie oddzielną kolumną, a może warto z każdej kolumny w poziomym rzędzie zrobić oddzielne sidebary? Osobiście skłaniałbym się ku drugiemu rozwiązaniu ponieważ tak zbudowana stopka jest dużo bardziej elastyczna. Jeżeli jeden widget w kolumnie będzie za niski, to może dziwnie to wyglądać. Dlatego lepiej mieć nad tym kontrolę.

Sidebar jako stopka, może wydawać się trochę na siłę, ale czego nie robi się dla dobra nauki…

Jeden sidebar czy dwa?

Zacznijmy od pytania, czy tworzysz od nowa szablon do WordPressa, czy edytujesz istniejący. Pierwszy przypadek jest trochę łatwiejszy – znamy swój kod, wiemy co w nim mamy, czego nie i w tym przypadku najczęściej tylko dodajemy kod. W przeciwnym wypadku trzeba będzie odnaleźć kod starego sidebara, odszukać funkcję go rejestrującą i tak dalej.

Tworzenie wielu sidebarów w nowym motywie

W pierwszym przypadku sprawdzamy najpierw, czy mamy już plik functions.php w katalogu głównym naszego motywu. Jeżeli tak, to otwieramy do edycji, jeżeli nie – tworzymy nowy plik.

Najprostsze użycie funkcji register_sidebars() wygląda następująco:

function wpa_widgets_init() {
    register_sidebars();
}
add_action( 'widgets_init', 'wpa_widgets_init' );

Jeżeli zostawimy to w taki sposób, zostanie utworzony jeden sidebar z domyślnymi ustawieniami:

<?php $args = array(
	'name'          => sprintf(__('Sidebar %d'), $i ),
	'id'            => "sidebar-$i",
	'before_widget' => '<li id="%1$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2>',
	'after_title'   => '</h2>' ); 
?>

Nas to oczywiście nie satysfakcjonuje, bo potrzebujemy trzech sidebarów. Aby utworzyć wspomniane trzy sidebary wystarczy w argumencie funkcji wpisać liczbę potrzebnych sidebarów:

<?php
function wpa_widgets_init() {
  register_sidebars(3);
}
add_action( 'widgets_init', 'wpa_widgets_init' );
?>

ja dodatkowo chcę trochę zmodyfikować domyślne ustawienia, więc do pliku functions.php ostatecznie dodaję tak zdefiniowaną funkcję:

<?php
function wpa_widgets_init() {
    register_sidebars(3, array(
       'before_widget' => '<div class="wp-widget" id="%1$s">',
       'after_widget' => '</div>',
       'before_title' => '<h4>',
       'after_title' => '</h4>')
);
}
add_action( 'widgets_init', 'wpa_widgets_init' );
?>

Niezależnie od tego, który sposób wybraliśmy przy definiowaniu sidebarów, to już teraz w Panelu administracyjnym → Wygląd → Widgety powinny pojawić się sidebary z możliwością dodawania do nich widgetów. To jeszcze nie koniec, bo WordPress w tym momencie nie wie, gdzie który sidebar wyświetlić.

Teraz w kodzie naszej strony należy znaleźć odpowiednie miejsca, w których sidebary mają się wyświetlać. Gdy już takie miejsce znajdziemy, wklejamy tam poniższy kod:

 

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1)): ?>
   <h4>Treść komunikatu, który będzie się pojawiał jeżeli żaden widget nie znajduje się w sidebarze.</h4>
<?php endif; ?>

Szczególną uwagę należy zwrócić na fragment w pierwszej linijce:

(...) !dynamic_sidebar(1): ?>

Argument funkcji – 1 , to identyfikator przypisany do sidebara. Oznacza to, że w tym miejscu będą pojawiać się widgety „wsadzone” do Panelu bocznego nr 1. Postępując analogicznie dla kolejnych sidebarów, wstawiamy ten sam kod w kolejnych miejscach szablonu pamiętając o zmienianiu wskazanego parametru funkcji.

Dla drugiego sidebara kod wygląda tak:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(2)): ?>
   <h4>Treść komunikatu, który będzie się pojawiał jeżeli żaden widget nie znajduje się w sidebarze numer 2.</h4>
<?php endif; ?>

I dla trzeciego:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3)): ?>
   <h4>Treść komunikatu, który będzie się pojawiał jeżeli żaden widget nie znajduje się w sidebarze numer 3.</h4>
<?php endif; ?>

Zapisujemy zmiany w plikach, na których pracowaliśmy. Po odświeżeniu strony widgety powinny się już wyświetlać (albo odpowiedni komunikat, jeżeli nie dodaliśmy jeszcze żadnych widgetów).

Dodanie kolejnego sidebara w istniejącym motywie

W tym przypadku sprawa nie jest dużo bardziej skomplikowana. Najpierw trzeba odszukać obecny kod, który rejestruje sidebar, a następnie trochę go zmodyfikować.

Obecnie bardzo trudno spotkać szablon, który posiada tylko jeden sidebar, dlatego w większości przypadków wystarczy tylko jedna drobna zmiana. Dla przykładu weźmy szablon Twenty Eleven, czyli ten który obecnie instaluje się zawsze z WordPressem. Po jego włączeniu, w Panelu administracyjnym → Wygląd → Widgety dokładnie widać że ma aż 5 sidebarów, które rejestrowane są w następujący sposób:

    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Showcase Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-2',
        'description' => __( 'The sidebar for the optional Showcase Template', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area One', 'twentyeleven' ),
        'id' => 'sidebar-3',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Two', 'twentyeleven' ),
        'id' => 'sidebar-4',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

    register_sidebar( array(
        'name' => __( 'Footer Area Three', 'twentyeleven' ),
        'id' => 'sidebar-5',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

Czyli w sposób, który opisywałem dla pojedynczego sidebara. Plus tego rozwiązania jest taki, że możemy określić dokładną nazwę sidebara (której później musimy się dokładnie trzymać), i dla konkretnego przypadku ustawić inne klasy, identyfikatory i nagłówki otaczające elementy widgetów. Minus – kod strasznie się wydłuża.

Dodanie w tym przypadku kolejnego sidebara to skopiowanie, albo dodanie kolejnej funkcji register_sidebar() w functions.php, a następnie w miejscu, w którym panel ma się pojawić:

    <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-5' ); ?>
    <?php endif; ?>

Jest to kod wyświetlający widgety dla sidebara o identyfikatorze sidebar-5. Dla kolejnego sidebara w miejsce „sidebar-5” należy wpisać identyfikator, który nadany został podczas rejestrowaniu nowego sidebara w poprzednim kroku. Warto zwrócić tutaj uwagę na funkcję is_active_sidebar(), która sprawdza, czy w tym konkretnym sidebarze znajdują się widgety i odpowiednio albo je wyświetla albo nie.

W razie pytań dotyczących rejestrowania i wyświetlania widgetów/sidebarów/widget area zapraszam do sekcji komentarzy.

Aktualizacja 2017-07-11

Wpis doczekał się aktualizacji. Usunąłem dość potężny akapit, który tak na prawdę nie wiele wnosił do artykułu. Mam nadzieję, że w takiej postaci będzie jeszcze bardziej pomocny. 🙂