"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)?

WordPress już sam w sobie oferuje szeroki wachlarz funkcji. Dzięki Advanced Custom Fields (ACF) możesz jeszcze bardziej rozszerzyć te funkcje - bezpłatnie w wersji standardowej. Pozwalają ci na pełną kontrolę nad treścią twojej strony.

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?

W skrócie: Prawdopodobnie potrzebujesz Advanced Custom Fields (Zaawansowane pola niestandardowe), kiedy nie możesz już sobie poradzić z elementami standardowymi w backendzie WordPressa. Stoisz przed wyzwaniem, które nie może być zrealizowane lub może być zrealizowane tylko częściowo przy pomocy stron lub postów.

W zależności od życzenia klienta może to nastąpić stosunkowo szybko. Jeśli sam jesteś projektantem stron internetowych, to z pewnością jest Ci to również znane.

W moim przypadku, na przykład, mogłem stworzyć wyszukiwanie z kryteriami filtrowania. Nie jest to zwykłe wyszukiwanie tekstowe, które przeszukuje całą stronę w poszukiwaniu odpowiedniej treści, ale wyszukiwanie, w którym konkretne dane można wprowadzić wcześniej za pomocą formularza. Użytkownik ma do dyspozycji różne kryteria filtrowania. Są to między innymi:

• 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

Szukałem więc rozwiązania, aby zaimplementować to wyszukiwanie filtrów za pomocą Advanced Custom Fields .

Wtyczka o tej samej nazwie w oficjalnym katalogu wtyczek WordPressa pochodzi od Elliota Condona. Australijczyk pracuje nad nim bardzo aktywnie i ciągle go rozwija, dzięki czemu wciąż pojawiają się nowe funkcje. Jeśli chcesz być blisko akcji, możesz śledzić ACF na Twitterze.

Jeśli byłeś już odważny i w pełni polegałeś na edytorze blokowym (Gutenberg) wprowadzonym od wersji 5.0 WordPressa, w Advanced Custom Fields znajdują się również bloki dla nowego edytora.

Wtyczka ACF jest obecnie aktywna na ponad 1 milionie stron internetowych. Jest ona bardzo intensywnie testowana i działa bezbłędnie z najnowszą wersją WordPressa. Imponujące jest również to, że wtyczka otrzymała już ponad 1000 ocen z 5 gwiazdkami. Z kolei 16 recenzji z jedną gwiazdką jest marnych - to 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.

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 momencie do gry wchodzą niestandardowe typy postów. Bardzo ważne jest, aby wiedzieć, że ma sens tworzenie niestandardowego typu postu do korzystania z Advanced Custom Fields . W moim przypadku nazywam niestandardowy typ postu (CPT) po prostu terapeutą.

Oczywiście możesz też sam 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 części.

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, by stworzyć własne wyszukiwanie z kryteriami filtrowania. Jak jednak można elegancko zaprezentować treść z backendu we frontendzie, tak by umożliwić użytkownikowi interakcję?

Ponownie, masz wybór pomiędzy samodzielnym tworzeniem go a użyciem wtyczki. Długo szukałem dobrego małego pomocnika i w końcu natrafiłem na "Search & Filter Pro" (link na końcu tekstu).

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 wtedy nadal będzie to wyglądać nieco nieatrakcyjnie. Ulepszyłem to przez kilka uchwytów CSS i stwierdzam, że wynik we frontendzie jest całkiem niezły:

Linki uzupełniające

• Wtyczka ACF: https://de.wordpress.org/plugins/advanced-custom-fields
• Custom Post Type UI Plugin: https://wordpress.org/plugins/custom-post-type-ui
• Rozszerzenia: https://awesomeacf.com
• Wyszukiwanie i filtrowanie Pro (wtyczka Premium): https://searchandfilter.com

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ę.