Tworzenie szablonów WordPress #5

W tym wpisie zajmiemy się tworzeniem widget`ów i sidebar`ów. Wyjaśnimy czym one są, jak się je programuje i jakie dają możliwości modyfikacji szablonu z panelu administratora. Zostanie też przedstawiony plik functions.php, bardzo istotny element funkcjonalności WordPress. Zapraszam do lektury!

~ Rafał, Learn2Code

Widgety i Sidebary

Sidebary (kolor żółty) i widgety (kolor zielony) zostały zaznaczone na załączonym rysunku strony. Obszary przez nie wyznaczone i poszczególne elementy należy zaprogramować, a następnie umieścić w kodzie szablonu strony przy użyciu znaczników szablonu (template tags). Programista ma pełną dowolność w określeniu ich ilości i formie, w jakiej będą wyświetlane.

Plik functions.php

Sidebary będziemy dodawać pojedynczo. Odbywa się to wg następującego schematu:

1. W folderze szablonu należy dodać nowy plik o nazwie functions.php. Krok ten należy wykonać tylko jeden raz.
2. W pliku functions.php należy dodać funkcję, która na podstawie zawartego w niej kodu wygeneruje strukturę sidebar`ów. Funkcja będzie wywoływana automatycznie przez WordPress.
3. Następnie należy zaktualizować strukturę strony (pliki index.php, header.php i footer.php). Dodamy w nich kod ładujący przed chwilą wygenerowane sidebar`y poprzez użycie w wybranych miejscach funkcji dynamic_sidebar.

Jak widać, cały nowy kod powstaje w pliku functions.php . Co więcej, wszystkie dodatkowe funkcjonalności, które chcemy zaprogramować dla naszego szablonu takie jak: utworzenie widgetów, funkcję zapisującą użytkownika do bazy danych czy unikalny sposób wyświetlania informacji na stronie należy umieścić właśnie w tym pliku. Jest to plik o specjalny przeznaczeniu w architekturze WordPress. Jego rola jest bardzo istotna. W nim też zapisane są również ustawienia szablonu oraz dynamiczne ładowanie stylów oraz plików zawierających kod JavaScript.

Przyjrzyjmy się jak ten proces wygląda w praktyce na przykładzie sekcji stopki, czyli footer sidebar. Poniżej kod, który powinien się znaleźć w pliku functions.php.

functions.php

---

Przeanalizujmy kod, żeby dobrze go zrozumieć. Przyjrzyjmy się najważniejszym elementom.

add_action( 'widgets_init', 'landing_sidebars' );
function landing_sidebars() {..........}

Sidebar`y są generowane w funkcji landing_sidebar() (nazwa tej funkcji jest dowolna). Aby poinformować WordPress, że w momencie inicjalizacji widgetów, to właśnie tę funkcję należy uruchomić automatycznie i przygotować strukturę HTML do ich wyświetlania, należy tuż przed deklaracją użyć funkcji add_action( 'widgets_init', 'landing_sidebars' );. Jest to niezwykle ważne. add_action( ) jest funkcją WordPress i informuje go, że gdy w trakcie ładowania strony rozpocznie się etap ‘widgets_init’, to wszystkie informacje, które potrzebuje, żeby dobrze je zainicjalizować znajdują się w funkcji o nazwie landing_sidebars.

---

...
register_sidebar(
        array(
            'id'            => 'stopka-1',
            'name'          => __( 'Stopka 1' ),
            'description'   => __( 'Widget zawierający zawartoś lewej kolumny stopki.' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
...

register_sidebar() to funkcja WordPress odpowiedzialna za stworzenie sidebar`u na podstawie informacji w tablicy:

• nadanego, unikalnego identyfikatora, dzięki któremu będzie można się do niego odwoływać w innych miejscach aplikacji,
• nazwy i opisu, które będą pomocne przy dodawaniu widgetów w panelu administratora
• informacji dotyczących, w jaki sposób sidebar ma się wyświetlać na stronie, czyli jego kod HTML. Jak widać w załączonym kodzie, ten sidebar o nazwie Stopka 1, będzie występował jako element blokowy DIV, z przypisanym id o wartości stopka-1 i klasą widget. Jego tytuł zaś będzie wyświetlany w postaci nagłówka o wielkości h3, z przypisaną klasą widget-title.

Pisząc kod, zdecydowałem, że na stronie stopka posiadała dwie kolumny. Dlatego dwa razy używam funkcji register_sidebar(). W obu kolumnach będę mógł już niedługo dodawać widgety.

footer.php

W tym momencie mamy już przygotowaną konfigurację sidebar`ów, ale nie dodaliśmy jeszcze w kodzie żadnej informacji, gdzie mają się one wyświetlać. W tym przypadku, chcemy aby znalazły się one w stopce strony. Dlatego należy zmodyfikować plik footer.php, aby uwzględnić powyższe zmiany.

Przede wszystkim, zdecydowałem, że chcę, aby stopka miała dwie kolumny. Dlatego przygotowałem kod html, w którym dzięki klasom .col z biblioteki Bootstrap, dwa elementy blokowe będą zajmowały dokładnie 50% dostępnej im przestrzeni. W każdej kolumnie zaś ładuje, stosując funkcję WordPress <?php dynamic_sidebar(...); ?> , zaprogramowany w pliku functions.php sidebar, podając jego unikalne id. Przyjrzyjmy się szczegółowo dodanemu kodowi.

---

<?php
    $has_footer_sidebar_1 = is_active_sidebar( 'stopka-1' );
    $has_footer_sidebar_2 = is_active_sidebar( 'stopka-2' );
?>  

Używam funkcji WordPress is_active_sidebar( '...' ), aby po kolei sprawdzić, czy dodane w functions.php sidebar`y poprawnie działają i dobrze się załadowały. Funkcja zwraca true lub false, a jej wynik zapisuje do zmiennej.

---

<?php if ($has_footer_sidebar_1) { ?>
       <div class="col">
          <?php dynamic_sidebar( 'stopka-1' ); ?>
       </div>
<?php } ?>

Jeśli funkcja is_active_sidebar( 'stopka-1' ) zwróciła true, czyli sidebar o identyfikatorze stopka-1 został poprawnie utworzony, to chcę, aby został załadowany w kolumnie (div z klasą col). W tym celu wykorzystuje funkcję WordPress dynamic_sidebar( 'stopka-1' ). Funkcja ta, na podstawie konfiguracji zamieszczonej dla elementu o identyfikatorze stopka-1, wygeneruje kod HTML. Jeśli zostaną dodane w panelu administratora jakieś widgety, do sidebar`u o tym id, to zostaną one również tutaj załadowane.

To samo wykonuje dla stopka-2.

Widgety

---

---

---

Na przykładzie stopki poznaliśmy mechanizm dodawania widgetów w szablonie i przekonaliśmy się, że działa. Proponuję, aby w ramach ćwiczenia, samodzielnie dodać pozostałe widgety i sidebary. Ja zidentyfikowałem co najmniej jedną możliwość. A ty? Spróbuj wykorzystać powyższy tekst do samodzielnego utworzenia nowych elementów!

Pełen kod do tego wpisu znajduje się na GitHubie pod adresem: https://github.com/01float/l2c-wordpress-basic-theme . Zachęcam do jego sprawdzenia i porównania swojego kodu, z moją propozycją. Zawarłem w nim również sidebar feature listy.

W kolejnej, ostatniej już części, zajmiemy się wysyłaniem i obsługą formularza. Zapraszam do lektury!

Tworzenie szablonów WordPress #6