W ramach tego tutorialu chciałbym pokazać Wam jak łatwo można zamienić graficzne projekty stron w funkcjonalne szablony WordPress na przykładzie strony typu landing page, z możliwością dodania danych kontaktowych użytkowników do bazy danych znajdującej się na serwerze, dzięki prostemu formularzowi.
~ Rafał, Learn2Code
Materiał jest skierowany przede wszystkim do osób dopiero zaczynających przygodę z programowaniem i zainteresowanych nauką tworzenia stron i aplikacji internetowych poprzez pracę z WordPress. Mając na uwadze, że jest to wpis skierowany do początkujących programistów, staram się tłumaczyć kolejne kroki i fragmenty kodu, tak aby każdy mógł łatwo zrozumieć cały proces. Posiadanie podstawowej wiedzy z zakresu HTML, CSS, PHP, JavaScript i GIT na pewno pomoże w lepszym zrozumieniu zamieszczonych fragmentów kodu.
Do komfortowej pracy z kodem musisz mieć przygotowane lokalne środowisko programistyczne.W osobnej serii wpisów umieściliśmy szczegółową instrukcję jak przygotować komputer do pracy z WordPress.Zalecamy przeczytanie i odtworzenie przedstawionej instrukcji przed rozpoczęciem poniższego tutorialu. Linki do nich znajdują się na dole strony.
Czym jest WordPress? W czym różni się od zwykłej strony internetowej?
WordPress to CMS, czyli aplikacja, która uprzednio zainstalowana na serwerze, umożliwia edycję układu strony, jej konfigurację i dodawanie nowych treści poprzez graficzny interfejs użytkownika – czyli poprzez wygodny panel administratora. Taka aplikacja posiada własną architekturę, definiującą relacje pomiędzy bazą danych, treścią i strukturą widoków. Jest to niezwykle użyteczne narzędzie o bardzo szerokim wachlarzu zastosowań i możliwościach modyfikacji, bez konieczności znajomości programowania. Wygoda w edycji i zarządzaniu treścią jest główną przyczyną popularności i szerokiej adaptacji WordPress`a.
Faktycznie, aby postawić prostą stronę wystarczy wybrać interesujący szablon z ogólnodostępnej listy i go załadować w panelu administratora, a następnie wypełnić go treścią i ciekawymi grafikami. Takie rozwiązanie sprawdza się jednak dla naprawdę prostych projektów. W przypadku, gdy należy taki szablon rozbudować lub zmodyfikować tak, aby odpowiadał określonym wymaganiom, nie zawsze będzie można polegać na wygodnej edycji w panelu administratora. Dla programistów graficzny interfejs daje zbyt mało możliwości modyfikacji i chcąc mieć większą kontrolę nad formą wyświetlania danych muszą dokonać zmian na poziomie kodu źródłowego. WordPress jest systemem napisanym w języku PHP oraz HTML/CSS/JavaScript i korzysta z relacyjnej bazy danych (MySQL lub MariaDB) do przechowywania treści. Mając opanowane podstawy korzystania z tych technologii i znajomości budowy WordPress`a, przed programistą pojawia się szereg możliwości wdrażania rozwiązań poprzez bezpośrednią pracę z kodem.
Tworzenie własnych szablonów to świetna okazja żeby poznać lepiej WP (WordPress) oraz wykorzystywane w nim technologie. Proces ten zostanie opisany w niniejszym tutorialu. Zapraszam do lektury.
Kilka pytań i wątpliwości na początek
Zanim zaczniemy programować, chciałbym z góry odpowiedzieć na najczęściej pojawiające się pytania przy okazji pracy z WP.
- Czy nie można napisać własnej strony/aplikacji bez WordPress, skoro i tak stosujemy PHP/CSS/HTML/JavaScript?
Można. Wszytko zależy od celów, które chcemy osiągnąć. WordPress to system, który oferuje bardzo wiele przydatnych funkcjonalności, dzięki czemu możemy skoncentrować się przede wszystkim na warstwie prezentacji. Nie musimy pisać od podstaw np. mechanizmu dodawania nowych postów i komentarzy pod nimi lub systemu logowania i rejestracji użytkowników. Jest to ogromna zaleta WordPress`a, doceniania przez wiele osób. - Podobno WordPress promuje złe praktyki programistyczne. Czy nie lepiej zastosować nowoczesny framework jak Symfony lub Laravel?
Z punktu widzenia doświadczonego programisty, uważam, że ten zarzut jest uzasadniony. WordPress jest rozwijany od wielu lat, na przestrzeni których koncepcje dotyczące tworzenia aplikacji webowych uległy radykalnej zmianie. WP jest napisany w języku PHP, który od początku swojego istnienia, przez wiele kolejnych lat, aż do wersji 5. nie wspierał programowania obiektowego, przez co nie było możliwe oparcie jego konstrukcji na wzorcach projektowych i zasadach pisania czystego kodu według obowiązujących standardów.
Z drugiej strony, nie oznacza to od razu, że skazujemy się na pisanie mało wydajnego i nieczytelnego kodu. Struktura szablonów jest jasno zdefiniowana i dodatkowe funkcjonalności należy pisać według bardzo przejrzystego i dobrze opisanego schematu, który uwzględnia cele używanych w nich funkcji i zmiennych. Otwiera to wiele możliwości do pisania kodu łatwego w utrzymaniu i rozszerzaniu. - Czy znając założenia tego tutorialu, nie byłoby lepiej gdybyśmy napisali go jako wtyczkę?
Nie. Wtyczki stanowią uzupełnienie szablonu o nowe, często bardzo specyficzne funkcjonalności, które będą odpowiednio z nim współgrały. Zatem żeby napisać dobrą wtyczkę należy znać chociaż podstawy działania WordPress`a, a te najlepiej przyswoić tworząc prosty szablon. Dzięki temu można zdobyć ogólne rozeznanie w głównych mechanizmach i plikach.
Co dalej?
Po krótkim wprowadzenia i przedstawieniu ogólnego planu pracy, możemy przejść do prezentacji założeń projektowych, na podstawie których będziemy tworzyć szablon i poznawać WordPress.
Zanim rozpoczniemy programowanie, należy przygotować swoje lokalne środowisko programistyczne do pracy z WordPress. Wskazówki jak należy to wykonać znajdują się w osobnej serii wpisów, które warto przeczytać przed rozpoczęciem pracy. Oto linki do nich:
UWAGA!
Tutoriale publikowane przez Learn2Code, dotyczące tworzenia szablonów i pluginów WordPress będą opierały się na pracy z wirtualnym środowiskiem programistycznym. Zdecydowaliśmy się jednak przedstawić oba rozwiązania, ponieważ chcemy, żeby czytelnicy mieli rozeznanie w dostępnych metodach przygotowania do pracy swojego środowiska. Oba pozwalają osiągnąć zamierzony efekt i są powszechnie stosowane przez programistów.
