Obiektowe tworzenie motywów z użyciem silnika szablonów Twig w WordPressie
•
1 like•1,977 views
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/
Obiektowe tworzenie motywów z użyciem silnika szablonów 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
- 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
- 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