ACF jako panel sterowania do karuzeli slajdów
Krótki raport z udoskonalania zastanego rozwiązania typu rotator slajdów. Od nieczytelnego kodu, który może zmienić tylko programista do zarządzania przez nietechnicznego redaktora – z użyciem prostego panelu WordPress. Wszystko z pomocą wtyczki ACF (Advanced Custom Fields) i kodu PHP.
Wstęp
Jeden z moich klientów ma blog, na którym promuje produkty ze swojego sklepu. Jednym ze sposobów promocji jest rotator z produktami, który wyświetlany jest w kilku miejscach na stronie. Wygląda to z grubsza jak poniżej.
Stronę i rotator wykonał dla mojego klienta jeszcze poprzedni programista. Kilka lat temu otrzymałem zlecenie objęcia opieką techniczną tego bloga. Wszystko byłoby super gdyby nie takie drobne szczegóły:
- Slajdy na rotatorze często się zmieniają – trzeba dodawać aktualnie promowane produkty, zmieniać opisy, fotki i tak dalej. Klient zawsze musiał to zlecać autorowi rozwiązania,
- Rotator jest zakodowany w HTML/JS – trzeba to więc robić bezpośrednio w kodzie strony (teraz wiadomo czemu musiał zlecać),
- Rotator występuje na 3 różnych podstronach i to jako niezależny kod – trzeba więc poprawiać w 3 miejscach (teraz wiadomo, dlaczego poprzedni opiekun realizował te zmiany tak wolno, że klient zaczął szukać alternatywy).
Po dwóch pierwszych zleceniach na zmianę treści i grafik tego rotatora postanowiłem ułatwić sobie życie. Nie uśmiechało mi się edytowanie 3 plików aby podmienić grafikę czy tekst na jednym slajdzie.
Ponowne wykorzystanie raz napisanego kodu? A komu to potrzebne?
Pierwszy krok to było wydzielenie kodu rotatora go zewnętrznego pliku, czegoś w rodzaju pod-szablonu WordPress. Taki plik można następnie dodawać w plikach zawierających kod stron za pomocą prostego kodu PHP:
<? get_template_part( $slug );Mogłem w końcu zmieniać wszystko w jednym miejscu, edytując jeden plik. Nadal było to jednak zadanie podatne na błędy. Jeden niedomknięty tag czy nawias w PHP rujnował całą podstronę serwisu.
Pod koniec roku klient wpadł na pomysł rewolucji i wymiany wszystkich grafik, tekstów, teł i tytułów slajdów – na świąteczne. Pomyślałem sobie – skoro mam stracić godzinę czy dwie na edycję HTML to równie dobrze mogę zrobić to lepiej – z pomocą ACF. Postanowiłem umilić sobie życie na przyszłość i przygotować z jego pomocą panel zarządzania do tych slajdów.
Skoro mamy ACF to może zrobić sobie panel zarządzania?
Po pierwsze – zdefiniowałem tak zwane pole powtarzalne (repeater)…
…a w nim pola przechowujące obrazki, teksty, czy style CSS dla poszczególnych slajdów.
Następnie zdefiniowałem podstronę dla administratora, gdzie można zarządzać zawartością pól. Po przeszkoleniu może to robić mało techniczny redaktor czy właściciel strony.
Na sam koniec pozostało najtrudniejsze – osadzenie w kodzie WordPress. Nie jestem jakimś zaawansowanym programistą, ale z pomocą kilku tutoriali i dokumentacji wtyczki ACF udało mi się sklecić prosty i w miarę elegancki kod, który robi robotę. Pobiera on obiekt zawierający wszystkie wiersze z pola ‘rotatorslajdy’ i iteruje po każdym, wypluwając fragmenty kodu HTML, budując w ten sposób całą potrzebną strukturę.
Podsumowanie
Co z tego mam? Możliwość:
- szybkiej zmiany każdego slajdu (również usuwanie i dodawanie slajdów) z poziomu prostego panelu WordPress zamiast babranie się w kodzie (gdzie łatwo coś popsuć),
- nagrania dla klienta poradnika – jak ma dodawać/edytować/usuwać slajdy.
Czy mogłem zamiast tego użyć jakiejś gotowej wtyczki do generowania rotatora? Oczywiście że tak. Czy nauczyłbym się wtedy czegoś nowego? Raczej nie.
Ostatecznie ewolucja jednej prostej (zdawałoby się) funkcji wyglądała następująco:
EDIT – dostałem od znajomego słuszną uwagę, że powyższy kod PHP jest nieelegancki. Zgadam się w 110%. Faktycznie zaadaptowałem istniejący kod (znaleziony w sieci i poprawiony przez AI), nie siląc się na jakieś jego upiększanie. Tu na swoją obronę mam tylko tyle, że nie jestem profesjonalistą i perfekcjonistą jeśli chodzi o pisanie (a raczej poprawianie) kodu. Dla mnie (nie-programisty) wystarczy, że działa – nie musi wyglądać :).
EDIT2 – a może da się lepiej? Napisz do mnie jak można to jeszcze poprawić!