Kiedy tworzymy stronę WordPress na podstawie gotowego projektu graficznego mówimy, że dokonujemy konwersji projektu graficznego lub mockupu strony na postać strony WordPress. W tym wpisie pokażę jak przebiega taki proces i jak go zoptymalizować.
Projekt graficzny strony internetowej to obraz tego jak ma wyglądać strona internetowa. Mamy z nim do czynienia w przypadku kiedy to grafik lub sam klient odpowiada za prezentację graficzną strony internetowej. Kiedy projekt tworzy web developer, mielibyśmy już pewnie do czynienia z szablonem HTML, który powstaje albo poprzez ręczne zakodowanie w postaci plików HTML i CSS lub za pomocą takich narzędzi jak Bootstrap Studio:
Wynika to z prostego faktu, że biegłemu web deweloperowi zajmuje mniej więcej tyle samo czasu „wyklikanie” lub zakodowanie szablonu HTML ile grafikowi zajmuje „namalowanie” strony w jego programie graficznym. Dlatego web developer nie tworzy projektu graficznego, ponieważ byłaby to dla niego zwyczajnie strata czasu. Podobnie jest z grafiką 3D. Można tworzyć grafikę 3D na podstawie szkiców i rysunków ale ktoś kto sam tworzy 3D zazwyczaj nie poświęca czasu na ich wykonywanie.
Tworzenie strony WordPress z projektu graficznego jest zazwyczaj droższe i bardziej czasochłonne, ponieważ wymaga tego dodatkowego kroku – czyli konwersji projektu graficznego do mogącego się wyświetlić w przeglądarce i najczęściej już responsywnego szablonu HTML. Oczywiście nie jest to w żaden sposób błędne podejście a ma wręcz wiele plusów. Zaletą takiego podejścia – czyli tworzenia projektu graficznego w osobnym kroku – jest po prostu większa niezależność i swoboda grafika, który na etapie projektowania strony internetowej nie musi się przejmować technicznymi aspektami jej tworzenia za pomocą kodu. Inne spojrzenie na UI – od strony czysto wizualnej może wzbogacać wartość estetyczną ale też nie jest to jakaś reguła.
Kiedy za wygląd strony internetowej odpowiada front-end developer (czyli ta osoba, która będzie kodować stronę do postaci HTML, CSS i JS) to naturalne jest to, że podświadomie dąży on do jego maksymalnego uproszczenia, wyuczonych wzorców i zaprojektowania w taki sposób aby był on łatwy do zakodowania. Oczywiście to też nie jest żadną regułą bo kreatywny web deweloper, który z zasady tworzy strony kreatywne i wykorzystuje techniki web deweloperskie do tworzenia unikalnych doświadczeń, może stworzyć stronę z takimi efektami i rozwiązaniami, na które grafik komputerowy nigdy by nie wpadł i byłyby trudne do stworzenia w zespole. Przykładem są wizualizacje reagujące na dźwięk, kreatywne interakcje reagujące na przewijanie i techniki z GSAP.
Co to jest i jak wygląda projekt graficzny strony internetowej?
Klasyczny projekt graficzny strony internetowej to nic innego jak „zdjęcie” strony internetowej. Jest to pożądany wygląd strony jaki ma się wyświetlić w przeglądarce. Tego typu projekt graficzny może być dostarczony w formatach rastrowych (np. png, jpeg, webp) lub wektorowych (np. pdf). Narzędzia do tworzenia takich projektów to np. Adobe PhotoShop, Corel i inne typowe edytory grafiki rastrowej i wektorowej.
Co to jest i jak wygląda prototyp, makieta i wireframe?
Strona WordPress może powstać już na podstawie modelu szkieletowego, ale często wzorem jest makieta a nawet prototyp. Poniżej wyjaśnienie tych pojęć.
Model szkieletowy (ang. wireframe) to ogólny szkic strony internetowej. Informuje jakie elementy powinny się na niej znajdować i jak mniej-więcej powinny być rozmieszczone. Wireframe można stworzyć w programach Adobe XD, Figma, Sketch ale też na zwykłej kartce papieru. Model szkieletowy trzeba opracować przy każdej realizacji strony internetowej – nawet wtedy, kiedy klient nie dysponuje własnymi materiałami. Model szkieletowy może być też punktem wyjściowym do tworzenia makiety lub prototypu.
Makieta (ang mockup) to typowy projekt graficzny, o którym pisałem w poprzednim rozdziale. Mockup prezentuje już kolorystykę, styl przycisków, a także rozmiar i styl fontów. Mockup może być stworzony przy pomocy podobnych narzędzi czyli Adobe XD, Figma, Sketch czy Photoshop.
Prototyp strony internetowej to wizualizacja finalnej strony internetowej, na której mogą występować animacje, rozwijane harmonijki i slajdery. Prototypy buduje się zazwyczaj przy realizacji złożonych aplikacji. Prototyp pozwala zaprojektować interakcję bez angażowania deweloperów we wczesne fazy opracowywania jej UI i UX. Jedyną różnicą pomiędzy prototypem a gotową stroną czy aplikacją jest to, że jest zapisana w specyficznym formacie (niezgodnym z przeglądarkami) i musi być ostatecznie przepisany na kod HTML, CSS i JS. Narzędzia do tworzenia prototypów to Figma, InVision Studio, Webflow, Adobe XD, Axure RP i Sketch.
Tworzenie strony WordPress w oparciu o szablon HTML – lub inną stronę internetową
Brzmi niedorzecznie, ale już nie raz tworzyłem stronę, która wygląda tak jak istniejąca statyczna strona internetowa, strona WordPress lub strona, którą oparto o inny CMS. To ostatnio jeden z moich ulubionych typów realizacji. Klienci decydują się na taką usługę w przypadku trzech różnych sytuacji:
- Obecnie dobrze działająca i konwertująca strona (lub sklep) korzysta ze zbyt wielu wtyczek, motyw jest przeładowany i uzależniony od page-buildera i jest to jedyna rozsądna forma optymalizacji.
- Druga sytuacja to kiedy motyw lub wtyczka nie jest kompatybilna z nową wersją PHP lub z nową wersją WordPress.
- Klient chce zmienić system CMS,
- Klient kupił sobie ładny szablon HTML i chciałby stworzyć na jego podstawie stronę WordPress.
Przewagą w tej sytuacji jest fakt, że mogę korzystać i podglądać obecne reguły CSS. W dwóch pierwszych sytuacjach, po stworzeniu motywu instalujemy sam motyw na obecnej stronie WordPress a treści (i produktów w sklepie) nie trzeba wprowadzać od nowa ani dokonywać karkołomnych eksportów i importów.
Etap 1: Konwersja projektu graficznego na szablon HTML
Pierwszym etapem konwersji projektu graficznego na stronę WordPress jest stworzenie szablonów HTML. Rezultatem tych prac jest statyczna strona internetowa, która działa w przeglądarce. Szablon HTML może (ale nie musi) mieć działające linki do innych podstron i jedyne czym się różni od finalnego produktu to brak integracji ze środowiskiem WordPress.
Oczywiście obszerność takiego szablonu zależy od preferencji dewelopera. Zupełną stratą czasu jest projektowanie absolutnie wszystkich podstron i wprowadzanie treści. W etapie tworzenia szablonu HTML chodzi tak naprawdę o to aby stworzyć style CSS i wykonać strukturę HTML dla najbardziej złożonych elementów takich jak menu, slajdery czy widżety. W tym etapie decydujemy się na framework CSS i najważniejsze biblioteki JS. Rezultatem prac jest arkusz CSS oraz pliki HTML, które mogą być fundamentem dla szablonów motywu WordPress, który jest tworzony w następnym etapie.
Czasochłonność i obszerność stworzonych szablonów jest tym większa im bardziej kreatywna i nietypowa ma być finalna strona internetowa. Ośmielę się stwierdzić, że przy bardzo prostych, przewidywalnych i szablonowych stronach internetowych – można ten etap całkowicie pominąć.
Etap 2: Tworzenie motywu WordPress
Tworzenie motywu WordPress to nic innego jak przekonwertowanie tych szablonów .html do szablonów .php. Z szablonów HTML usuwana jest treść i dynamiczne elementy takie jak: widgety i menu.
Obecnie (czyli w czasach rozbudowanego i elastycznego Gutenberga) szablony nie zawierają nawet kontenerów. Jeżeli mówimy o stronach (front-page.php i page.php), które będą w pełni edytowalne za pomocą Gutenberga to w praktyce wycinamy wszystko po navbarze (menu głównym). Najbardziej skomplikowaną strukturę HTML mają szablony single.php, home.php gdzie często są zakodowane na sztywne pewne elementy takie jak paginacja, nagłówek strony – bo tych elementów nie edytujemy przy każdym nowotworzonym artykule. W najnowszych realizacjach szablon front-page.php przypomina HTML Boilerplate, który w body wywołuje standardową metodę the_content():
<?php get_template_part( "header" ); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_template_part( "footer" ); ?>
Etap konwersji szablonu HTML na motyw WordPress opisałem z licznymi przykładami w przewodniku: tworzenie motywów WordPress.
Etap 3: Stworzenie widżetów, menu i formularzy
Widżety, menu i formularze mogą mieć specyficzną strukturę HTML i to dlatego poświęcam im osobny punkt. W tym momencie bardzo pomocny okaże się szablon HTML tworzony w etapie pierwszym. Przy realizacji profesjonalnych stron internetowych WordPress trzeba często stworzyć własne widgety, menu i formularze, ponieważ tylko wtedy możemy łatwo organizować ich strukturę HTML. Zapraszam do osobnych przewodników gdzie pokazałem:
- jak stworzyć własne menu w WordPressie,
- jak stworzyć własny widżet WordPress,
- jak stworzyć shortcode WordPress.
Etap 4: Instalacja wtyczek i tworzenie bloków
Może się okazać, że nie jesteśmy w stanie za pomocą samego edytora i domyślnych bloków uzyskać wszystkich niezbędnych narzędzi do odtworzenia treści na naszej stronie WordPress. Z tego powodu odsyłam do artykułów:
Tajemnicą poliszynela jest fakt, że standardowe bloki Gutenberga są mało elastyczne i średnio nadają się do tworzenia stron na podstawie projektu graficznego. Dowody?
- nie otoczysz w łatwy sposób bloku Grupa w standardowy link <a href=””></a>,
- nie stworzysz elementu <section> z własny tłem i paddingiem,
- a blok kolumny to jakiś żart…
Skoro jednak używaliśmy jakiegoś frameworka CSS, możemy w tym etapie zainstalować wtyczkę, która dodaje bloki z przyciskami i innymi elementami UI do standardowej kolekcji bloków w Gutenbergu. To bardzo przyspiesza proces i produktywność podczas tworzenia i edycji strony, której motyw oparty jest o popularny framework np. Bootstrap 5 lub Tailwind.
Nie pogarsza to wydajności tak jak przestarzałe technologie typu Elementor, WP Bakery czy Visual Composer. Różnica bierze się stąd, że nie dodajemy jakichkolwiek plików CSS i JS a wykorzystujemy reguły, które – brawo, zgadłeś – dodaliśmy do strony i posługiwaliśmy się w Etapie 1.
Jeżeli cały CSS pisaliśmy samodzielnie to nie pozostaje nam nic innego jak tworzyć własne bloki. W ostateczności pozostaje ograniczyć się do domyślnych bloków i ich stylowania aby nabrały odpowiedniego kształtu. Pamiętaj, że każdy blok Gutenberga posiada pole do wprowadzenia własnych klas CSS.
Etap 5: Wprowadzenie treści
Wprowadzenie treści to najprzyjemniejszy etap tworzenia strony WordPress na podstawie projektu graficznego – o ile poprzednie etapy zostały starannie wykonane i zakończone sukcesem. Wprowadzenie treści jest satysfakcjonujące, bo szybko można obserwować rezultat prac a w podglądzie strony widzimy praktycznie już ukończoną stronę.
Jeżeli nie będziemy się czepiali się szczegółów, to można przyjąć, że widok strony w edytorze wygląda niemal tak samo jak strona na front-endzie. To ma wiele zalet, bo klient śmielej w takiej sytuacji dokonuje własnych edycji i rozbudowy strony internetowej a my nie musimy interweniować kiedy trzeba zmienić kolejność sekcji na stronie głównej. Aby WordPress w trybie edycji doczytywał stworzony w ramach motywu plik CSS, wystarczy posłużyć się takim kodem w pliku functions.php lub we własnej wtyczce:
add_theme_support( 'editor-styles' );
add_action( 'admin_init', 'add_my_gutenberg_styles' );
function add_my_gutenberg_styles() {
add_editor_style( 'css/my-gutenberg-styles.css' );
}
Etap 6: Optymalizacja i wdrożenie
Strona bez odpowiedniej optymalizacji jest półproduktem nie nadającym się do wdrożenia. Po stworzeniu strony minimalizujemy pliki CSS i JS a kopie plików niezminimalizowanych zostawiamy sobie na wypadek wprowadzania zmian i debugowania. Wyłączamy tryb deweloperski dokonujemy przeglądu SEO. Po sprawdzeniu finalnej strony w analizatorach typu PageSpeed Insights i wyeliminowaniu najważniejszych błędów, strona nadaje się do wdrożenia na hostingu. Procedurę zmiany hostingu i przenoszenia WordPressa opisałem we wpisie: Przenoszenie WordPressa.
Podsumowanie
Nowoczesne rozwiązania w WordPressie pozwalają bez dodatkowych page-builderów zachować elastyczność edycji bez poświęcania wydajności i profesjonalnego procesu tworzenia strony z projektu graficznego. Zapomnij także o sztywnych formularzach ACF lub polach typu „Elastyczna treść”, które zmuszały deweloperów do pisania setek linii kodu tylko po to, by klient mógł zmienić kolejność dwóch divów na stronie internetowej. ACF to doskonała wtyczka ale nie powstała ona po to by budować cały interfejs strony.
Tworzenie strony WordPress na podstawie projektu graficznego to nadal żmudny i czasochłonny proces. Wykorzystując jednak nowoczesny edytor Gutenberg, własny motyw i sprawdzoną kolekcję elastycznych bloków osiągamy dużo lepszą jakość, terminy realizacji i wydajność finalnej strony WordPress.
Filip pisze: 
Lukas 
Odpowiedz lub skomentuj