Case study: Advanced Custom Fields

Szacunkowy czas czytania: 3 minuty

 

Kilka dni temu moje portfolio poszerzyło się o projekt strony dla amerykańskiego salonu samochodowego. Realizując to zlecenie użyłam wtyczki Advanced Custom Fields w wersji darmowej. Jest to wtyczka, która wymaga od użytkownika podstawowej znajomości programowania: głównie rozeznania z strukturze wordpressowych plików PHP oraz znajomości zagadnień front-endowych.

 

Nie wyobrażam sobie szybkiego zaprojektowania strony Transatlantic Auto Sales bez użycia tej wtyczki.
Dlaczego?

Wymagania klienta:

  • prosta strona z niewielką liczbą podstron,
  • głównym celem serwisu ma być zamieszczanie ofert samochodów na sprzedaż,
  • pojedyncza oferta ma być dodawana jako post,
  • oferty mają mieć powtarzalny szablon (te same pola do wypełnienia, liczba zdjęć),
  • podstawowa wyszukiwarka,
  • dodawanie ofert ma być proste i intuicyjne

Rozwiązanie:

  • wykonałam stronę główną, podstronę z ofertami i podstronę kontakt – całość na bezpłatnym motywie Zerif Lite,
  • grafiki + próbne zdjęcia samochodów: Pixabay,
  • szablon postu dla oferty: Advanced Custom Fields w wersji Free,
  • prosta wyszukiwarka dodana do głównego menu

Zalety:

  • dzięki użyciu Advanced Custom Fields stworzyłam szablon postów-ofert wraz ze wskazówkami dla pracowników salonu, jakie informacje wprowadzać w danym polu,
  • wersja bezpłatna wtyczki jest wystarczająca do średniozaawansowanych projektów – można tworzyć pola tekstowe, dodawać obrazy, dodatkowe edytory tekstu WYSIWYG, pola wyboru, linki, pickery dat i kolorów oraz wiele innych

Przykładowe zastosowania rozwiązań:

  • dla krótkiego opisu, pojawiającego się na liście ofert, pozostawiłam oryginalny edytor WYSIWYG,
  • dla producenta, modelu i roku produkcji wybrałam pola tekstowe (z opcją obowiązkowe) z Advanced Custom Fields (dalej ACF),
  • dla skrzyni biegów, typu paliwa oraz ogólnej kondycji pojazdu i świadectwa dopuszczenia do ruchu, wybrałam dropdown z ograniczoną (podaną przez Klienta) liczbą opcji (ACF),
  • dla przebiegu w milach i koloru wybrałam pola tekstowe nieobowiązkowe (ACF),
  • dla długiego opisu na karcie oferty dodałam dodatkowy edytor tekstu (ACF),
  • dla głównego zdjęcia i max. 8 mniejszych zdjęć na karcie oferty wybrałam opcję Add Image (ACF),
  • dla zdjęcia pojawiającego się na liście ofert pozostawiłam WordPressową opcję „Obrazek wyróżniający”,
  • dodatkowo dodałam prostą wyszukiwarkę w menu głównym,
  • w przypadku, gdyby Klient nie dodał wszystkich z 8 możliwych zdjęć, dodałam event JavaScriptowy onerror, który dodaje obrazek domyślny

 

Jak działa Advanced Custom Fields?

W skrócie:

  • instalujemy wtyczkę,
  • tworzymy zestaw pól, które mają się powtarzać w naszym wpisie/poście,
  • każde pole otrzymuje swoją unikalną nazwę – to właśnie odnosząc się do niej przeniesiemy wartości wpisane w kokpicie przez użytkowników do kodu strony,
  • w zależności gdzie chcemy wyświetlić wprowadzone w polach informacje, tam dodajemy kod <?php the_field(‚nazwa-pola’); ?> + ewentualnie znaczniki HTMLa (np. kolumny, wiersze). W moim przypadku był to szablon pojedynczego wpisu content-single.php.

Wtyczka daje naprawdę duże możliwości tworzenia dostosowanych do potrzeb Klienta szablonów postów lub podstron. Warto poświęcić czas na zapoznanie się z nią!