Kontekst
PigOut.pl publikuje recenzje i treści editorialowe z obszaru popkultury, książek, filmów i seriali. Strona miała przenieść mocny kierunek wizualny z projektu Figma, a jednocześnie pozostać praktyczna dla zespołu, który regularnie aktualizuje treści.
Oznaczało to połączenie dwóch elementów: frontendu wiernie odwzorowującego projekt graficzny oraz backendu, w którym redaktorzy mogą publikować recenzje, artykuły i aktualizować stronę główną bez walki z systemem i bez czekania na developera. Projekt Figma został przygotowany przez grafika, a ja odpowiadałem za pełne wdrożenie WordPress.
Oznaczało to połączenie dwóch elementów: frontendu wiernie odwzorowującego projekt graficzny oraz backendu, w którym redaktorzy mogą publikować recenzje, artykuły i aktualizować stronę główną bez walki z systemem i bez czekania na developera. Projekt Figma został przygotowany przez grafika, a ja odpowiadałem za pełne wdrożenie WordPress.
System publikacji treści
Zamiast tworzyć jednorazowe szablony pod konkretne podstrony, przygotowałem system bloków treści wielokrotnego użytku, z których redaktorzy mogą komponować układy. Szablony recenzji obsługują długie treści dotyczące filmów, książek i seriali, a elastyczna struktura artykułów sprawdza się przy wpisach blogowych, treściach związanych z podcastem i stronach współpracy.
Strona główna działa na tej samej zasadzie. Wyróżnione recenzje, najnowsze treści i sekcje współpracy są blokami, które można przestawiać lub podmieniać z poziomu panelu WordPress. Dzięki temu strona może zmieniać akcenty wraz z nowymi publikacjami bez edycji kodu.
Strona główna działa na tej samej zasadzie. Wyróżnione recenzje, najnowsze treści i sekcje współpracy są blokami, które można przestawiać lub podmieniać z poziomu panelu WordPress. Dzięki temu strona może zmieniać akcenty wraz z nowymi publikacjami bez edycji kodu.
Filtrowanie AJAX
Na stronie z dużą liczbą treści przeglądanie jest jedną z najważniejszych akcji użytkownika. Widoki kategorii i archiwów korzystają z filtrowania AJAX, dzięki czemu czytelnicy mogą zawężać treści według typu lub tematu, a lista aktualizuje się bez pełnego przeładowania strony.
Widoki z filtrowaniem działają na tej samej strukturze treści, która jest używana w pozostałych częściach serwisu. Dzięki temu nowy typ treści dodany w systemie publikacji może być obsługiwany przez filtry bez osobnej pracy po stronie frontendu.
Widoki z filtrowaniem działają na tej samej strukturze treści, która jest używana w pozostałych częściach serwisu. Dzięki temu nowy typ treści dodany w systemie publikacji może być obsługiwany przez filtry bez osobnej pracy po stronie frontendu.
Zakres techniczny
Wdrożenie zostało przygotowane jako dedykowany motyw WordPress napisany od podstaw, z szablonami, partialami i blokami wielokrotnego użytku dopasowanymi do publikacji editorialowych. Endpointy AJAX obsługują filtrowane listy treści, a ustawienia po stronie panelu administracyjnego utrzymują prosty proces publikacji dla użytkowników nietechnicznych.
Warstwa frontendowa została wdrożona bezpośrednio w kodzie, z responsywnymi układami dla różnych szerokości ekranu. GSAP odpowiada za animacje sekcji przy scrollowaniu i przejścia treści w miejscach, w których ruch realnie wspiera czytelność interfejsu.
Warstwa frontendowa została wdrożona bezpośrednio w kodzie, z responsywnymi układami dla różnych szerokości ekranu. GSAP odpowiada za animacje sekcji przy scrollowaniu i przejścia treści w miejscach, w których ruch realnie wspiera czytelność interfejsu.
Efekt
PigOut.pl działa jako aktywna platforma editorialowa z dedykowanym frontendem, wielokrotnego użytku systemem publikacji i przeglądaniem treści opartym o AJAX, wszystko zbudowane wokół indywidualnego projektu Figma.
