W swojej prezentacji Piotr opowie o rozdzieleniu pracy frontend i backend developera, odseparowaniu warstw prezentacji i logiki dzięki implementacji template’ów Twig, przechowywaniu struktury motywu w bazie danych i ograniczeniu możliwości edycji stron z poziomu wp-admina, tylko do predefiniowanych fragmentów. *** Piotr Niewiadomski podczas WordCamp Lublin 2017: https://2017.lublin.wordcamp.org/session/obiektowe-tworzenie-motywow-z-uzyciem-silnika-szablonow-twig-w-wordpressie/

2. Obiektowe tworzenie
motywów z użyciem
silnika szablonów
Twig.
Piotr Niewiadomski
Senior WordPress Developer
Tech Leader

3. Problemy
Rozdzielenie pracy
● Frontend developer
● Backend developer
Zjeść ciastko i mieć ciastko ;)
Copywriter redaguje i nie psuje.

4. Research = Jak to robią “więksi”?
● MVC (Model View Controller)
Odseparowanie warstw prezentacji i logiki
● DRY (Don’t Repeat Yourself)
Zastosowanie Front Controller
● Controllers
Selektywne ładowanie logiki
● Twig
Prosty silnik do tworzenia szablonów

5. Rozwiązanie = Custom development
● CC-Structures
Twig bridge dla WordPress
● CC-Skeletons
Predefiniowane szablony podstron dla
Copywriterów bez wiedzy technicznej

6. Plugins Activation

7. CC-Structures
● Pozwala na stworzenie dowolnej struktury
plików i katalogów motywu
● Pozwala na przechowywanie struktur HTML
motywu zgodnych z WordPress Template
Hierarchy w bazie danych
● Dodaje wsparcie dla obsługi silnika
szablonów Twig
● Dodaje możliwość wydzielenia logiki aplikacji
do selektywnie ładowanych kontrolerów

8. Dowolna struktura katalogów

9. Struktura motywu w bazie danych

10. Twig bridge dla WordPress

11. Trochę kodu :P

12. functions.php

13. theme.php = Theme Controller
● rejestrujemy menu
● rejestrujemy sidebary
● rejestrujemy widgety
● custom post types
● custom fields
● self::get
● self::__
● self::apply_filters
● filter_ / action_
● activation / deactivation

14. base.twig = Front Controller

15. single.twig = base + single

16. page.twig = base + page

17. Funkcje = analogicznie do wp core

18. base.php = Template Controller
● properties
● globals
● $wp_query->query_vars
● filter_ / action_

19. CC-Skeletons
● Pozwala na tworzenie predefiniowanych
szablonów podstron dla Copywriterów
bez wiedzy technicznej z wydzielonymi
miejscami do wprowadzania treści
Po co?
● Żeby nie zaburzyli struktury dokumentu
● Żeby nie tworzyć ręcznie widoków

20. Twig
● Zmienne / Obiekty / Funkcje
{{ variable }} / {{ object.property }} / {{ func() }}
● Struktury kontrolne
{% for post in loop %} {% endfor %} / {% if %} {% endif %}
● Komentarze
{# comment #}
● Edytowalne tagi
{@id= default content @}

22. Podsumowanie
Rozdzielenie pracy
● Frontend developer
● Backend developer
● Copywriter

23. Na zakończenie = dla kogo?
NIE!
● Sprzedaż motywów
● Outsourcing
TAK!
● Własne projekty
● Projekty z supportem

24. Niespodzianka

25. Poszukujemy developerów!
p.niewiadomski@clearcode.cc
clearcode.cc
Dziękuję za
uwagę