Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Tworzenie kodu HTML bezpośrednio w motywie korzystając z SasquatchWP

Artykuł pojawił się 16.01.2019, autorem jest Agnieszka Palmowska i wpadł do kategorii Frontend Open Source

Tworząc Saquatcha chcieliśmy zaoszczędzić bardzo mocno na czasie, dając możliwość koderom na tworzenie kodu html bezpośrednie w skórze WordPressa. Dzięki tej możliwości unikamy wielu potencjalnych problemów z przenosinami zewnętrznego kodu do tworzonego motywu, kompatybilnością i osadzonymi assetsami.

Ten post pokaże Wam jak w prosty sposób pisać kod HTML w motywie, który później trafia pod warsztat developerów WordPress.

Czym jest SasquatchWP? To framework stworzony przez Maćka (palmiak) i mnie (bardziej Maćka) na bazie kilku popularnych narzędzi, który nazywamy platformą do tworzenia autorskich motywów w WordPressie. Oparty jest o Bedrock (od Roots.io) – specjalne ułożenie katalogów WP aby móc całego WordPressa przechowywać w repozytorium GIT. Composer – ta zabawka pozwala nam na ujednolicenie środowisk u każdej osoby z zespołu, która pracuje nad danym projektem. Composer określa dokładne wtyczki i ich wersje, dokładną wersję WordPressa, itp. Po zainstalowaniu takiej instancji każdy z deweloperów ma te same warunki do pracy. Unikamy dzięki temu problemów z niekompatybilnościami pluginów, inną wersją WP Core etc.
W Sasquatchu znajduje się również Timber, dzięki któremu tworzenie kodu pod względem funkcjonalności motywu staje się o wiele przyjemniejsze, czytelniejsze i szybsze oraz Sober WP, który umożliwia tworzenie post typów i taksonomii.

Zurb Foundation

Z myślą o frontend developerach umieściliśmy w platformie również Zurb Foundation, który pozwala na tworzenie przejrzystego zoptymalizowanego kodu HTML/CSS(SCSS)/JS. Używanie jednego frameworka do budowy struktury strony pomaga unikać tworzenia kodu metodą “ja to zrobię sam” i sprawia, że w prosty sposób można wprowadzić do dowolnego projektu osoby, które nie tworzyły od samego początku kodu, ale ze względu na ujednolicony sposobu zapisu mogą łatwo się w nim odnaleźć i wprowadzać zmiany.

Każdy z tych modułów w Sasquatchu nie jest niczym nowym, są to popularne rozwiązania, o których można poczytać na wielu blogach i serwisach.

Jak zacząć?

Ten przykład oparty będzie na świeżej instalacji i tworzenia motywu od zera.
Jak widzimy w dokumentacji SasquatchWP proces instalacji jest prosty i szybki. Należy trzymać się każdego z kroków i utworzyć odpowiednie pliki.

  1. git clone https://github.com/SasquatchWP/SasquatchWP.git .
  2. Zmieniamy nazwę .env.example na .env i uzupełniamy poprawie danymi bazy danych
  3. Tworzymy .htaccess lub vhost
  4. composer install
  5. Zmieniamy nazwę motywu web/app/themes/sasquatch na własną
  6. cd web/app/themes/{theme_name}
  7. npm install
  8. composer install

Koniecznie trzeba stworzyć sobie bazę, zdefiniować ją w pliku env, następnie dodać htaccess. Do prawidłowego używania Browser Sync należy podać nazwę DEVURL w web/app/themes/{theme_name}/config.yml

Aby odpalić nasz motyw w trybie Browser Sync należy użyć komendy: npm start – uruchomi ona watch. Watch sprawi, że nasz WordPress z tworzonym motywem otworzy się na localhost w porcie 3000. Po każdym update plików HTML i SCSS zobaczymy zmiany jakie nanosimy, w różnych przeglądarkach jednocześnie.

Struktura Motywu:

Motyw składa się w kilku ważnych katalogów, które dzielą pliki na te odpowiedzialne za sam wygląd oraz te, w których znajduje się kod HTML wszystkich widoków i ich partów. Kod HTML z czasem pracy nad motywem obrasta coraz bardziej w reguły i funkcje Timbera, ale na samym początku tego nie widać.

W głównej strukturze katalogu motywu znajduje się katalog front – do tego katalogu należy dodawać kolejne pliki, które definiować będą post type o nazwie front i każdy z osobna będzie indywidualnym page template’em dla poszczególnych widoków htmlowych.
Dla przykładu w motywie znajduje się już pierwszy plik dla strony głównej o nazwie front-index.php, w nim znajduje się nazwa template oraz typ. Typ pozostaje zawsze ten sam.
Sasquatch jest tak skonfigurowany, że po przejściu na produkcję (zmiana WP_ENV na production) pliki frontowe nie będą widoczne. Są one wykorzystywane tylko dla środowisk deweloperskich (kiedy WP_ENV określony jest jako development lub staging).

Tworzenie kodu HTML bezpośrednio w motywie korzystając z SasquatchWP

Tak wygląda zawartość przykładowego pliku front-index.php. Zawarta jest tutaj ścieżka do pliku twigowego, w którym znajdzie się szablon całej określonej podstrony (widoku). Pliki twigowe osadzone są w katalogu views/templates/front aby dla potrzeb tylko frontowych nie było konieczności zmiany lokalizacji plików z assetsami (obrazków, styli, itp).

W katalogu views/templates/front tworzymy kolejne szablony, które inkludowane są do plików php, o których była wyżej mowa. Dla własnej wygody warto nazywać je tak samo,aby z czasem pracy nad projektem nie szukać i nie błądzić.

Oto przykładowa zawartość pliku twigowego z czystym HTMLem dla front-index.twig

Czysty HTML w przypadku Sasquatcha nie oznacza, że będzie tutaj tylko HTML. Ze względu na Timbera trzeba pamiętać o dosłownie kilku zasadach i regułach, które podczas kodowania będą niezbędne. Są one proste i od pewnego momentu używa się ich automatycznie.

Jak widać na przykładzie kod html osadzony jest miedzy {% block content %} a {% endblock %}. I tak zawsze musi być. Dzięki temu widziany jest content, który tworzymy.

W miejscu gdzie jest url do obrazka znajduje się funkcja dodająca url bezpośredni do motywu {{ theme.link }}. Wpisując ją nie musimy martwić się, że zgubimy lub źle podamy ścieżkę do plików graficznych w dist. Dist jest katalogiem, do którego podczas watcha lun builda trafiają pliki skompilowane i zoptymalizowane z assetsów. Samodzielnie z katalogu dist się nie korzysta, tworzony jest automatycznie.
Poza theme.link jest kilka innych prostych regułek, które ułatwią tworzenie kodu HTML w Sasquatchu a konkretnie przy obecności Timbera – znajdują się w dokumentacji: Cheatsheet

  • {{ site.url }} – pokazuje ścieżkę do naszej wordpressowej strony, można użyć go już w HTML aby logo serwisu linkowało do strony głównej,
  • {{ post.link }} – pokazuje url do pojedynczego posta,
  • {{ "now" | date("Y") }} – pokazuje aktualną datę w postaci roku, bardzo przydatne gdy w footerze chcemy pokazać właściwy rok.

Jak użyć szablonu HTML w motywie? I jak go podejrzeć?

Wystarczy, że z poziomu panelu administracyjnego WP, w zakładce Fronts dodacie nową stronę i zdefiniujecie w prawym sidebarze Template. W tym przypadku “Front Index”.

Tworzenie kodu HTML bezpośrednio w motywie korzystając z SasquatchWP

A podejrzeć taki podpięty szablon możecie wybierając na tym widoku button “Preview / Podgląd”. Widok otworzy się w nowym oknie przeglądarki. Strona może również zostać opublikowana.

Co z elementami HTML, które powtarzają się w kodzie?

Reguła Do Not Repeat Yourself jest bardzo fajna, jednak nie zawsze udaje się jej trzymać. Aby w kodzie HTML tworzonym w Sasquatchu ograniczyć sobie ilość powtarzanego kodu, który robi dokładnie to samo, warto wydzielić taki element do osobnego pliku twig i include’ować go w potrzebnym miejscu dowolną ilość razy.

Wygląda to tak:

{% include "views/templates/front/index-slider.twig" %}

Taki kod zainkluduje nam część kodu, którą wydzielimy do osobnego pliku. Dla wygody warto tworzyć takie party tam gdzie pozostałe pliki od frontu.

Dlaczego i kiedy warto rozdzielić HTML od reszty motywu?

Ta struktura jest ważna szczególnie gdy zespół składa się z koderów i programistów pracujących w swoich dziedzinach osobno. Również dobrze jest mieć wydzielony kod HTML ze względu na zaakceptowanie go przez klienta przed dalszymi pracami, możliwością wprowadzenia zmian lub poprawek w trakcie życia projektu itp. Oczywiście jest wiele szkół, jednak z własnego doświadczenia wiem, że taki podział jest wygodny. A osadzanie kodu HTML bezpośrednio w motywie skraca czas pracy – sprawia, że nie musimy wdrażać kodu HTML stworzonego na zupełnie osobnej instancji do WordPressa, ponieważ on już w nim jest wraz z wszystkimi stylami i assetsami.

Co dzieje się dalej z kodem wydzielonym do frontu?

Stworzony i zaakceptowany kod następnie trafia do deweloperów, którzy odpowiednie fragmenty kodu osadzają w plikach poza działem Front i oprogramowują go zgodnie z wytycznymi projektu.

SasquatchWP jest frameworkiem otwartym i ogólnodostępnym. Jest to nasz wkład w społeczność open source. Jeżeli używasz go – powiedz nam o tym, chętnie dodany  Twoją stronę do listy stron opartych o niego. Jeżeli masz problem z używaniem, czegoś wg Ciebie brakuje lub chciałbyś dodać w SasquatchWP coś od siebie – pisz śmiało bezpośrednio na Githubie w oficjalnym repozytorium github.com/SasquatchWP/SasquatchWP – bardzo chętnie pomożemy!

Agnieszka Palmowska

Od 12 lat pracuję w branży IT. Głównie zajmuję się projektowaniem stron internetowych oraz aplikacji mobilnych. Zajmuję się również kodowaniem. Tworzę kod HTML / SCSS, jestem wielbicielką frameworka Zurb Foundation.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.