Tworzenie szablonów WordPress #2

Witaj w drugim wpisie dotyczącym programowania szablonów WordPress. W poprzednim kroku przedstawiłem ogólne założenia projektowe, wskazałem potrzebne materiały, na podstawie których należy przygotować lokalne środowisko programistyczne (zalecane jest użycie wirtualnej maszyny i Vagrant`a; kroki zostały zawarte w osobnej notce na learn2code.pl) oraz przedstawiłem odpowiedzi do najczęściej zadawanych pytań do tego typu kursu.

W tym wpisie przedstawię założenia projektowe, na których będziemy się wzorować wraz z omówieniem. Przygotujemy też wspólnie strukturę strony w HTML. Zapraszam do lektury.
~ Rafał, Learn2Code

Przedstawienie projektu szablonu

Celem tutorialu jest stworzenie strony typu landing page z opcją dopisania się do newslettera po wysłaniu formularza rejestracji.

Strony tego typu służą jako miejsce docelowe, do którego internauta zostaje przekierowany po kliknięciu w interesujący go link. Pełnią one rolę informacyjną (np. informują o czasowo ograniczonej promocji) lub zachęcają do nawiązania interakcji poprzez udostępnienie contentu (infografik, wideo z tutorialami, kodów promocyjnych), w zamian za pozostawienie danych kontaktowych, przede wszystkim adresu email. Projekt zatem musi być prosty, przekazywać kluczowe informacje w sposób czytelny i w widocznym miejscu zawierać formularz, umożliwiający łatwe dopisanie się do listy.

Moja propozycja układu takiej strony wraz z najważniejszymi elementami znajduje się na załączonej grafice (tzw. mockupie, czyli ogólnym szkicu). Jak widać spełnia ona kryteria z akapitu wyżej i na jej podstawie będziemy tworzyć kod szablonu.

Z czym będziemy pracować?

Zanim przejdziemy do pisania pierwszych linijek kodu, zastanówmy się z jakimi technologiami mamy do czynienia i jaką rolę pełnią w projekcie strony lub aplikacji internetowej.

HTML

Strona którą widzi użytkownik to nic innego jak dokument HTML, przekazany przeglądarce przez serwer w odpowiedzi na wpisanie adresu URL (relacja przeglądarka-serwer została opisana w poprzednim wpisie). Dlatego proponuję rozpocząć prace od przygotowania struktury strony w czystym HTML. Przygotujemy strukturę dokumentu oraz wydzielimy sekcję strony, dzięki czemu będzie nam potem łatwiej ją zintegrować z WordPress i zarządzać treścią.

CSS

Sam HTML to za mało, aby osiągnąć pożądany efekt. Język znaczników tylko informuje przeglądarkę gdzie poszczególne elementy mają się znajdować (np. blok formularza ma się znajdować wewnątrz sekcji main), ale nie w jaki sposób mają zostać wyświetlone. Mimo, że dwa elementy blokowe umieścimy w HTML obok siebie, nie oznacza, że tak również będą wyświetlone. Za wygląd strony jest odpowiedzialny język stylów CSS (czyli kaskadowe arkusze stylów). To z jego pomocą informujemy przeglądarkę m.in o tym czy bloki z treścią powinny być wyświetlane poziomo lub pionowo, kolorach tła w blokach czy o rozmiarze czcionki.

JavaScript

JavaScript to skryptowy język programowania, działający w przeglądarce internetowej. Dzięki niemu programiści mają możliwość tworzenia dynamicznych stron internetowych. Dzięki JavaScript można zmieniać strukturę strony i sposób wyświetlania elementów (np. wyświetlać komunikaty, chować widoczne elementy) lub korzystać z funkcjonalności oferowanych przez przeglądarkę np. stosując AJAX do wysyłania informacji do serwera bez przeładowywania strony. To właśnie w tym celu będzie wykorzystywany JavaScript w ramach tego projektu: do przesyłania informacji kontaktowych z formularza do serwera.

PHP

Ostatni do omówienia jest język programowania PHP. Jest to język skryptowy, działający po stronie serwera. To w nim jest napisany WordPress i jego funkcjonalności. Stanowi podstawę ogromnej ilości stron i aplikacji. Jego głównym zadaniem jest obsługa żądań, które przeglądarka wysyła do serwera. W co zalicza się m.in. : wyrenderowanie i zwrócenie odpowiedniej strony, wykonywanie skryptów zapisujących i wczytujących dane z bazy danych. W języku PHP zaprogramujemy widgety oraz funkcję odbierającą informacje przesyłane wraz z formularzem dopisu do newslettera i zapis do bazy danych.

Pierwsze kroki, czyli szkielet strony w HTML

Pisząc ten tutorial wyszedłem z założenia, że czytelnicy będą posiadali minimalną wiedzę z zakresu HTML. Dlatego chciałbym zacząć pracę od zaprezentowania kodu prototypu z nadzieją, że będzie on chociaż w niewielkim stopniu zrozumiały. Poniżej dodany jest tylko szkielet strony, uzupełniony o niektóre atrybuty (nazwijmy je na ten moment meta-dane), których celem jest zwiększenie czytelności kodu.

UWAGA! Zakodowana strona odbiega odrobinę od propozycji zamieszczonej na mockup`ie. Nie jest to przypadek. Przygotowany projekt graficzny na wczesnym etapie, służy mi jako szkic, na którym mogę się wzorować i zaplanować pracę. W trakcie programowania może się okazać, że pojawiły się lepsze pomysły. Stąd nieznaczna rozbieżność.

Nawet jeśli to Twój pierwszy kontakt z dokumentami HTML, to będziesz w stanie od razu zidentyfikować kluczowe sekcje:

Nagłówek
Treść strony
Sekcja formularza
Sekcja cech wyróżniających produkt.
Stopka strony

To dzięki deklaratywnej naturze HTML`a, czyli języka znaczników, który został wykorzystany do nadania nowo-powstałej stronie struktury i wyznaczenia jej sekcji, poprzez zastosowanie odpowiednich znaczników. Jest on dodatkowo uzupełniony o klasy (słowo kluczowe class="..." wewnątrz klamr < > znacznika) przypisane niektórym znacznikom, które dzięki swojemu nazewnictwu informują o potencjalnej ich roli oraz pomogą je odpowiednio wyświetlić.

Przyjrzyjmy się trochę dokładniej kodowi strony:

Tagi reprezentujące odpowiednie sekcje:

<head>, <body>, <article>, <nav>, <footer>

Tagi posiadające swoje unikalne identyfikatory, nadające im znaczenia dodatkowo znaczenia:

<div id="contanct-form">

Tagi posiadające przypisane im klasy, które mogą przekazywać informacje o ich stosowaniu w danym kontekście:

<div class= "inline-list">

Tagi zawierające zarówno unikalne id, jak i klasę. W tym wypadku id służy identyfikacji elementu, a klasa poprzez swoje odpowiednie nazewnictwo np. informuje o dodatkowej roli elementu lub sposobie jego wyświetlania:

<section id="...." class="listed-box ..."

Jak na pierwszy szkic strony przedstawiony kod powinien być wystarczający. Mamy solidny fundament i jesteśmy gotowi do dalszej pracy. Niestety strona nasza nie jest nawet w części podobna do wzoru. Udało nam się za to stworzyć szkielet, na podstawie którego możemy zaplanować użycie stylów i wyłapać ewentualne błędy koncepcyjne. Polecam go z resztą samodzielnie odtworzyć i obserwować czy efekt pojawiający się w oknie przeglądarki.

Na tym etapie nasza strona nie potrafi jeszcze realizować żadnych dynamicznych akcji, komunikować się z serwerem, ani tym bardziej być użyteczna dla WordPress. Zagadnienia te zostaną rozwinięte w kolejnych akapitach.

HTML + CSS

Strona nie przypomina tej z mockup`u. Taki efekt był do przewidzenia, bo w Listingu 1.1 nie zostały dodane style CSS. To style są odpowiedzialne za sposób w jaki elementy mają się wyświetlać już w przeglądarce. Aby to naprawić, proponuję utworzyć nowy plik style.css i umieścić go w folderze głównym projektu (czyli w tym samym miejscu co plik z kodem HTML).

Style można dodawać również do dokumentu w sekcji <head></head>, bez konieczności tworzenia osobnego pliku. W tym przypadku jest to niepoprawna metoda. WordPress wymaga osobnego pliku ze stylami style.css, do poprawnego działania szablonu. To w tym pliku będą się zawierały również podstawowe informacje dotyczące motywu (tzw. meta-dane takie jak: autor szablonu, opis, wymagania środowiskowe), a nie tylko reguły CSS. Poza tym osobny plik sprzyja zachowaniu czystości kodu.

Co więcej, wykorzystamy też Bootstrap, czyli popularną bibliotekę CSS, oferującą wiele przydatnych reguł dla elementów HTML, ułatwiających pracę. Największa zaletą Bootstrap`a jest to, że daje on możliwość zbudowania strony na rzucie siatki zbudowanej z wierszy i kolumn, umożliwiające nadanie jej responsywności. Choć brzmi to wyjątkowo skomplikowanie, siatka opiera się po prostu na zwykłych, zdefiniowanych klasach CSS i ich regułach dotyczących szerokości i przepływu elementów.

Należy zatem wykonać następujące kroki:

Utworzyć plik style.css. Uzupełnić go o niezbędne metadane. Dodać do strony plik do strony. Plik musi się znajdować w tym samym miejscu co plik HTML!
Dodać bibliotekę Bootstrap. Najprostsza metoda to dodanie jej w postaci zewnętrznych styli, poprzez znacznik <link> umieszczony w sekcji <head></head> . Jako źródło należy podać adres, pod którym się znajduje.
Nadać elementom odpowiednie klasy, aby wyświetlany dokument odpowiadał mockup`owi.
Dodać odpowiednie reguły, które pomogą nam ostylowane przez Bootstrap elementy dostosować do naszego mockupu

Utworzenie nowego pliku wydaje się być zadaniem oczywistym. Przyjrzyjmy się wymaganemu minimum informacji, które powinny się w nim znaleźć (za dokumentacją*):

Theme Name (): nazwa szablon
Author (): autor     
Description (): opis szablonu
Version (): wersja, zapisana w formacie x.x lub x.x.x
Requires at least (): wskazanie najstarszej wersji word press`a, z która ten szablon bedzie dzialal w formacie x.x (powinny wspierać, 3 ostatnie wersje)
Tested up to (): informacje o najnowszej wersji, na której przetestowano szablon     
Requires PHP (): wymagana wersja PHP
License (): licencja szablonu     
License URI (): adres URL, pod którym znajduje sie licencja
Text Domain (*): Text domain ma swoje podstawowe zastosowanie podczas tłumaczenia szablonu i służy jako identyfikator dla szablonu

W naszym przypadku taki nagłówek, dodany do style.css wyglądałby tak:

Zaktualizowany plik HTML o zmiany w sekcji <head></head> :

Mając już przygotowany plik ze stylami i załadowaną bibliotekę Bootstrap, można uzupełnić kod HTML o odpowiednie klasy, aby poprawić wygląd strony i nadać im pożądany wygląd. Mój pomysł jak to zrobić przedstawiam na listingu poniżej. Zachęcam jednak do samodzielnej próby poprawy strony.

Jeśli nie wystąpił po drodze żaden błąd, strona powinna przypominać tę z załączonego screena:

Pliki projektowe są dostępne w repozytorium h ttps://github.com/01float/l2c-wordpress-basic-theme.git

Strona wygląda już dobrze. Mogłoby się nawet wydawać, że wystarczy teraz ją uzupełnić o odpowiednią treść i grafiki, przenieść do działającego projektu WordPress i gotowe. To nie jest niestety takie proste. Nie mówiąc o tym, że wciąż brakuje nam szeregu funkcjonalności takich jak modyfikacji treści z poziomu edytora WP czy mechanizm dodawania użytkowników do newslettera.

Tego typu funkcjonalności przekraczają możliwości oferowane przez HTML. Treść będzie ładowana na stronie w sposób dynamiczny. Oznacza to, że w momencie wysyłania żądania na serwer, ten przygotuje dla nas kod HTML wygenerowany na podstawie: danych zapisanych w bazie danych, struktury strony ze znaczników i funkcji języka skryptowego PHP, który umożliwi ich połączenie. Co najważniejsze, użycie PHP pozwoli nam skleić pliki naszego szablonu z istniejącym projektem WordPress.

O tym jak zamienić statyczne pliki HTML i CSS na projekt WordPress i dodać kod PHP dowiesz się w kolejnym wpisie. Do zobaczenia!

Tworzenie szablonów WordPress #3

22 lipca 2020