"Nie znasz zaawansowanych pól niestandardowych (ACF)? Bez ACF na pewno nie używałbym już WordPressa". Kilka tygodni temu kolega napisał do mnie przez Slacka. Jednak on jest programistą, ja projektantem. Najpóźniej w tym momencie zdałem sobie jednak sprawę, że powinienem (i chcę) się tym zająć.
Co to jest Advanced Custom Fields (ACF)?
Sam WordPress oferuje już szeroki zakres funkcji. Dzięki Advanced Custom Fields (ACF ) możesz rozszerzyć te funkcje jeszcze bardziej - bezpłatnie w wersji standardowej. Dają Ci one pełną kontrolę nad zawartością Twojej strony internetowej.
Domyślnie w backendzie dla postów i stron znajdują się typowe pola, takie jak tytuł, treść, data i autor. Zaawansowane pola niestandardowe, czyli wspomniana poniżej wtyczka, dają ci możliwość rozbudowywania WordPressa, a tym samym stron i postów, praktycznie według własnego uznania i indywidualnie.
Dzięki temu w WordPressie możliwe jest prawie wszystko - Advanced Custom Fields to, że tak powiem, tuning dla WordPressa.
Do czego potrzebne jest Advanced Custom Fields?
Krótkie podsumowanie: Prawdopodobnie potrzebujesz Advanced Custom Fields Prawdopodobnie wtedy, gdy nie możesz przejść dalej za pomocą wbudowanych elementów w zapleczu WordPress. Stoisz przed wyzwaniem, którego nie można lub można tylko częściowo zrealizować za pomocą stron lub postów. W zależności od wymagań klienta może to nastąpić stosunkowo szybko.
W moim przypadku, na przykład, mogłem zbudować wyszukiwanie z kryteriami filtrowania. Nie jest to więc proste wyszukiwanie tekstowe, które przeszukuje całą witrynę w poszukiwaniu odpowiednich treści, ale wyszukiwanie, w którym określone dane można wcześniej wprowadzić za pomocą formularza. Użytkownik ma do dyspozycji różne kryteria filtrowania. Obejmują one
- Nazwa (pole tekstowe)
- Kod pocztowy (pole tekstowe)
- Kraj (rozwijany)
- Certyfikaty (pole wyboru)
Ale o tym więcej później. Ten przypadek użycia podsunął mi pomysł, aby użyć Advanced Custom Fields (ACF). Takie indywidualne wyszukiwanie jest po prostu niemożliwe w przypadku elementów pokładowych WordPressa bez ACF.
Advanced Custom Fields: Darmowa wtyczka
W związku z tym szukałem rozwiązania, które pozwoliłoby mi zaimplementować ten filtr wyszukiwania za pomocą Advanced Custom Fields .
Wtyczka o tej samej nazwie w oficjalnym katalogu wtyczek WordPress jest stale rozwijana, więc cały czas pojawiają się nowe funkcje. Jeśli chcesz być blisko akcji, możesz śledzić ACF na Twitterze.
Wtyczka ACF jest aktywna na ponad 1 milionie stron internetowych. Jest intensywnie testowana i działa bezbłędnie z najnowszą wersją WordPress. Imponujące jest również to, że wtyczka otrzymała już ponad 1000 ocen z 5 gwiazdkami. W porównaniu do zaledwie 40 ocen z jedną gwiazdką - najprawdopodobniej użytkownicy, którzy zrezygnowali po (bardzo) krótkim czasie.
W przypadku takiej wtyczki oczywiste jest, że potrzeba trochę czasu i cierpliwości, aż zrozumiesz, jak z niej korzystać. Oczywiście, tylko zarysowałem temat Advanced Custom Fields. Chcę tylko zaznaczyć, że są inne wtyczki, które instalujesz, a potem działają one wygodnie w tle - z ACF jest inaczej. Musisz aktywnie projektować i rozpoznawać całościowe połączenie pomiędzy bazą danych, backendem i frontendem.
Niezbędne dla tej wtyczki, która jest dość techniczna, jest także support.
Sam jeszcze nie musiałem z tego korzystać. Powód jest prosty: Pierwszej klasy dokumentacja, która obejmuje typy pól, funkcje, filtry i FAQ.
"*" wyświetla wymagane pola
Czym są Custom Post Types?
Wcześniej wspomniałem, że aktywny projekt jest konieczny. W przypadku zaawansowanych pól niestandardowych oznacza to również, że w niektórych przypadkach same pola nie są dla ciebie zbyt użyteczne. Dopiero w połączeniu z niestandardowymi typami postów pojawiają się kolejne opcje.
Najpierw pojawia się pytanie: Co to jest (normalny) Post Type?
Dwa najbardziej znane w WordPressie to Pages i Blog Posts. Dla każdej nowej treści, która ma być tworzona na stronie, decydujesz, który typ postu jest najbardziej odpowiedni. Zależy to od kilku czynników, m.in. od tego, jak chcesz, by informacje były widoczne i jakich pól potrzebujesz w backendzie.
Ale co w przypadku, gdy chcesz dostarczyć treści, które nie mogą być zawarte w zwykłej stronie lub poście?
Być może już się domyśliłeś: potrzebujesz nowego sposobu wprowadzania treści w backendzie. Quasi maska wejściowa z dokładnie tymi polami, których potrzebujesz. To jest to, co Advanced Custom Fields może Ci zaoferować. Wspomniana wyżej strona Plugin pozwala na wygodne definiowanie i tworzenie tych pól w backendzie. Kiedy ta struktura jest już na miejscu, nadchodzi kolejny krok.
W tym przypadku używane są niestandardowe typy postów. Bardzo ważne jest, aby utworzyć własny niestandardowy typ postu do korzystania z Advanced Custom Fields . W moim przypadku po prostu nazywam niestandardowy typ postu (CPT)"terapeuta".
Oczywiście możesz również samodzielnie zaprogramować niestandardowy typ postu. Użyłem jednak do tego wtyczki "Custom Post Type UI", którą wyjaśnię bardziej szczegółowo w następnej sekcji.
Custom Post Type UI: darmowa wtyczka
Jeśli do tej pory było to dla Ciebie zbyt mało magii z samym Advanced Custom Fields (ACF), oto nadchodzi najlepsze: ACF w połączeniu z Custom Post Type UI, w skrócie CPT UI.
Dzięki temu możesz wyświetlać zawartość bazy danych bezpośrednio we frontendzie. W moim przypadku stanąłem przed wyzwaniem zbudowania filtru wyszukiwania z różnymi polami. Musiałem najpierw załadować wszystkie dane do backendu za pomocą importu CSV.
Następnie, z pomocą niestandardowego typu postu i zaawansowanych pól niestandardowych, zbudowałem podstawę dla filtrowania wyszukiwania we frontendzie. Więcej na ten temat w następnym rozdziale.
Przykład praktyczny: Tworzenie wyszukiwania z kryteriami filtrowania
To tyle jeśli chodzi o moment przejścia na backend. Teraz nadszedł czas na frontend. Tak, abyś mógł zastosować całość i wykorzystać poszczególne Advanced Custom Fields do swojego przypadku.
Użyłem ACF do zbudowania spersonalizowanego wyszukiwania z kryteriami filtrowania. Ale w jaki sposób można elegancko zaprezentować zawartość z backendu we frontendzie, aby użytkownik mógł z nią wchodzić w interakcje?
Ponownie, masz wybór między samodzielnym opracowaniem go a użyciem wtyczki. Po raz kolejny spędziłem dużo czasu szukając dobrego małego pomocnika i w końcu natknąłem się na Search & Filter Pro.
To daje mi pomysłowy sposób na wykorzystanie danych dostępnych w backendzie do wyświetlania ich we frontendzie. W moim przykładzie są to:
- Wyszukiwanie (normalne pole wyszukiwania)
- Post Meta (dostęp i wyszukiwanie odpowiedniego zaawansowanego pola niestandardowego w bazie danych)
- Przycisk Wyślij (przycisk do wysłania zapytania lub formularza)
W backendzie może to wyglądać w ten sposób:
Następnie możesz użyć shortcode, aby wstawić filtr wyszukiwania, który właśnie utworzyłeś, w dowolnym miejscu w backendzie (na przykład na stronie).
Zobaczysz jednak, że nadal będzie to wyglądać trochę nieatrakcyjnie. Poprawiłem to za pomocą kilku zmian CSS i myślę, że wynik we frontendzie jest imponujący:
Linki
Nie mogę się doczekać, by zobaczyć, co jeszcze będę mógł zaimplementować w przyszłości dzięki zaawansowanym polom niestandardowym. Czy masz jakieś pytania lub komentarze do tego artykułu? W takim razie czekam na twoją opinię.
Pytania dotyczące ACF
Jakie masz pytania dotyczące ACF i WordPressa? Zachęcamy do komentowania. Chcesz być informowany o nowych postach na temat WordPressa i projektowania stron internetowych? Obserwuj nas na Twitterze, Facebooku, LinkedIn lub poprzez nasz Newsletter.
