WordPress: wygląd (odc.6) – sidebar

Skoro już zdefiniowaliśmy wszystkie pliki niezbędne bu nasz WordPress zaczął wyświetlać wpisy, pora na kolejny element, czyli panel boczny (ang. sidebar). Na początek kilka faktów. Po pierwsze zawartość zdefiniowana jest na ogół w pliku sidebar.php (odstępstwa od tej reguły pojawiają się wtedy gdy chcemy mieć więcej niż jeden panel boczny). Po drugie zawartość panelu bocznego może być statyczna (trwale wpisana w pliku sidebar.php) albo dynamiczna, generowana za pomocą specjalnych funkcji (o tym dalej). W tym drugim przypadku zawartość panelu bocznego można sobie zmieniać dokładając widgety z poziomu panelu administracyjnego. Oczywiście możliwa jest również konstrukcja mieszana.

Zawartość statyczna

Najczęściej zawartość panelu bocznego (czy to statycznego czy o dynamicznego) organizuje się w oparciu o listę nienumerowaną <ul>. Poszczególne sekcje panelu, odpowiedniki widgetów, będą zatem kolejnymi pozycjami listy. Tytuły tych sekcji mogą być wyróżnione przez znacznik <h2>. Poniżej pokazano przykładowy kod, jaki może zostać umieszczony w pliku sidebar.php:

<ul id="sidebar">
    <li><h2>Sekcja pierwsza</h2>
        <p>Zawartość sekcji pierwszej</p>
    </li>
    <li><h2>Sekcja linków</h2>
        <ul>
            <li><a href="adres1.pl">link1</a></li>
            <li><a href="adres2.pl">link2</a></li>
            <li><a href="adres3.pl">link3</a></li>
        </ul>
    </li>
</ul>

To co w ten sposób zostanie zamieszczone w panelu bocznym, zależy wyłącznie od naszych potrzeb i fantazji.
Aby wyświetlić panel boczny w odpowiednim miejscu wystarczy tylko wywołać funkcję get_sidebar(); w głównym pliku skórki (index.php), albo w pliku definiującym wygląd pojedynczego posta (single.php)czy gdzie tam jeszcze będziemy potrzebować panelu bocznego.
Panel zdefiniowany powyżej będzie działał, ale nie będzie widoczny w panelu administracyjnym i nie będzie można dodawać do niego gotowych widgetów. Czasem to jest słuszne i celowe, szczególnie jeśli instalujemy WordPressa dla kogoś i nie chcemy, żeby zmieniał zawartość panelu bocznego.

Dynamiczny panel boczny

Aby stworzyć panel dynamiczny, dający możliwość dodawania widgetów trzeba się trochę bardziej napracować. Po pierwsze należy do naszej skórki dodać plik functions.php, w którym powinien znaleźć się następujący kod:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

Za pomocą tego kodu rejestrujemy dynamiczny panel boczny. Metoda register_sidebar() wywołana została z domyślnymi parametrami, jednak można do niej przekazać odpowiednią tablicę parametrów (szczegóły w codex), co jest szczególnie przydatne, gdy np. uprzemy się, by panel boczny nie był skonstruowany w oparciu o listy nienumerowane tylko za pomocą innych elementów HTML.

Po zarejestrowaniu panela bocznego możemy na nim umieszczać wybrane widgety. Aby jednak prawidłowo się on wyświetlał trzeba jeszcze zmodyfikować zawartość pliku sidebar.php. Poniżej zawartości tego pliku po modyfikacji niezbędnej do wyświetlenia dynamicznej treści:

<ul id="sidebar">
  <?php if ( !function_exists('dynamic_sidebar') or !dynamic_sidebar() ) : ?>
    <li><h2>Sekcja pierwsza</h2>
        <p>Zawartość sekcji pierwszej</p>
    </li>
    <li><h2>Sekcja linków</h2>
        <ul>
            <li><a href="adres1.pl">link1</a></li>
            <li><a href="adres2.pl">link2</a></li>
            <li><a href="adres3.pl">link3</a></li>
        </ul>
    </li>
  <?php endif; ?>
</ul>

Co właściwie się zmieniło? Został dodany warunek, który sprawdza, czy zarejestrowano dynamiczny panel boczny i czy uda się go wyświetlić. Jeśli nie, to dopiero wtedy zostanie wyświetlona statyczna treść. I to jest właściwie wszystko co jest niezbędne, aby dynamiczny panel boczny funkcjonował prawidłowo.

Zawartość mieszana

Aby mieć panel boczny dynamiczny, ale również ze stałą zawartością, należy ją dodać przed albo po warunku sprawdzającym czy zdefiniowano dynamiczny sidebar. O innych trikach związanych z panelem bocznym napiszę wkrótce