Twig i Timber – narzędzia, które odmłodziły moje strony na WordPressie

Twig i Timber – narzędzia, które odmłodziły moje strony na WordPressie

Tworząc pod WordPress jesteśmy zmuszeni do mieszania warstwy widoku z warstwą kontrolera. Nieczytelne szablony PHP nie ujmują nam pracy a standardowe funkcje i pętle z pewnością nie wpisują się dynamiczny rozwój developmentu. Tak było do niedawna. Timber rozwija się już kilka dobrych lat, a ja dopiero od niedawna wykorzystuję go komercyjnie.
Cóż… lepiej późno niż wcale.

Czym jest Timber?

Timber to rozszerzenie WordPressa umożliwiające pisanie kodu w modelu MVC (Model-View-Controller). Pozwala odseparować warstwę wizualną (DOM, JavaScript i style CSS) od warstwy logicznej (silnik WordPressa w PHP).

Oferuje wiele pomocnych funkcje i filtrów z silnika Twig, bo to właśnie w nim tworzymy warstwę wizualną. Jeżeli nie miałeś z nim nigdy styczności, koniecznie się z nim zapoznaj.

Rozszerzenie Timber jest dostępne jako pakiet composera, który trzeba załadować w szablonie lub jako instalowany w panelu plugin. Do dyspozycji mamy dobrze napisaną dokumentację, wiele gotowych rozwiązań na forach, jak również przykładowe szablony startowe. Przyjrzyjmy się bliżej temu cudeńku.

Struktura plików

Przygodę z Timber rozpoczniemy od podziału plików pod względem pełnionych funkcji. W tym poście nie będziemy wdawać się w szczegóły. To co warto jedynie wiedzieć, to że nasz nowy szablon od teraz dzieli się na dwie, a właściwie trzy grupy:

  • Views – katalog zawierający pliki *.twig zawierające strukturę HTML
  • Controllers – miejsce na kontrolery Worpressa z rozszerzeniem *.php
  • Assets – CSS, JavaScript, fonty, obrazy itp.

Zobaczmy jak wygląda kontroler domyślnego szablonu page.php :

a tak plik wyświetlający widok ze zmienną text:

Because WordPress is awesome, but the loop isn’t”

Racja, pętla WordPressowa nie jest super fajna – szczególnie gdy jest wpleciona w kod HTML-a. Przez lata pracy zdążyłem przywyknąć do pomieszanych i nieczytelnych lini kodu, ciągnących się niczym papier toaletowy.

Rzućmy okiem na znajomy szablon PHP/HTML listujący wpisy. Tak robiło się to do tej pory i tak niestety robi to nadal większość z nas:

Dzięki Timber robię to samo w ładniejszy sposób:

Tak odseparowany kod widoku jest zupełnie re-używalny. Oznacza to, że możemy wykorzystywać te same kawałki kodu dla różnych kontrolerów bez powielania go. Wystarczy osadzić go w osobnym pliku i załączyć w pętli:

Tak to ja mogę żyć!

Filtry

Wielką siłą Twiga są jego predefiniowane filtry. Jest ich całkiem spora kolekcja. Do dyspozycji mamy między innymi filtry do formatowania

  • tekstów,
  • dat,
  • liczb,
  • konwertowania obrazów,
  • sortowania tablic
  • i wiele innych.

Kilka przykładów najczęściej wykorzystywanych w WordPressie filtrów:

Pełna lista filtrów dostępna jest jest w dokumentacji Twig a także na oficjalnej stronie Timber. Nawet jeżeli nie znajdziesz tego co potrzebujesz, zawsze możesz napisać swój własny filtr i używać go w dowolnym miejscu.

Routing

Przekazujesz w URL dodatkowe parametry i chciałbyś aby link wyglądał nadal przyjaźnie dla użytkownika? Timber pomoże i w tej sprawie.

Taki kod zamieszczony w functions.php zastąpi URL domena.pl/oferty-pracy?miasto=zielona-gora na bardziej przyjazny i naturalny domena.pl/oferty-pracy/zielona-gora/. OMG so easy!

Menu

WordPressowe wp_nav_menu() nie daje zbyt wiele kontroli nad kodem wyjściowym. Do tej pory trzeba było sobie radzić z pisaniem własnego NavWalker lub co gorsza dokonywania zmian JavaScriptem. Timber daje pełną kontrolę nad renderowanym wyjściem i pozwala nim dowolnie manipulować – zachowując przy tym utarty schemat definiowania menu w adminie.

Konkluzja

To co właśnie przeczytałeś to jedynie część tego co oferuje Timber. Jest tego znacznie więcej jak chociażby integracja z Advanced Custom Fields, paginacja wpisów, narzędzia do debugowania czy do cache-owania treści. Wszystko to do dyspozycji za darmo.

Wystarczy minimalny wkład pracy i chęci by Twój kod zyskał na jakości. Jeżeli tworzysz profesjonalne szablony na zamówienie dla swoich klientów, powinieneś zdecydowanie zainteresować się tą biblioteką.

W razie jakichkolwiek pytań lub pomysłów zostaw komentarz poniżej.

 

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter