Niezbędny przewodnik po polach niestandardowych WordPress

Jeśli istnieje jedna cecha WordPressa, która odróżnia go od innych systemów zarządzania treścią (CMS), to jest to dostosowanie. Pola niestandardowe w WordPressie są wbudowaną częścią CMS, która pozwala rozszerzyć nie tylko wyświetlane metadane i informacje, ale także całkowicie zmienić funkcjonalność i użyteczność postu lub strony. Chcemy pomóc Ci zrozumieć podstawy. Omówimy, czym jest pole niestandardowe, dlaczego są przydatne, i przedstawimy kilka rzeczywistych przykładów ich użycia.

Subskrybuj nasz kanał YouTube

Co to są niestandardowe pola WordPress?

Krótko mówiąc, niestandardowe pola WordPress umożliwiają dodawanie określonych elementów do stron. Może to być określony rodzaj obrazu, wpisu lub biografii autora, może ocena, a nawet coś w rodzaju, jak mówi wpis w Kodeksie w polach niestandardowych, nastrój, aktualnie czytane, słuchane lub pola pogody.

Te pola tworzą tak zwane metadane Twojego posta (w zasadzie wszystko, co nie jest zawarte w głównej treści Twojego artykułu). Domyślnie WordPress ma meta-boksy dla ogólnych informacji, takich jak tagi, kategorie, permalink, polecane obrazy itp. Jeśli chcesz dodać więcej, użyjesz niestandardowych pól.

Możesz nawet dodać informacje, które każdy z autorów w Twoim zespole musi uzupełnić, aby opublikować post.

Możesz utworzyć wymagane pole, które nie pozwoli na opublikowanie wpisu, dopóki pewne kryteria nie zostaną zaznaczone. Pamiętaj więc, że te niestandardowe pola służą nie tylko do informacji w interfejsie użytkownika. Mogą być również przydatne na zapleczu.

Dodawanie niestandardowych pól do postu WordPress

Domyślnie niestandardowe pola WordPress są wyłączone w edytorze stron i postów. Jeśli używasz Edytora bloków, łatwo je włączyć. Wystarczy kliknąć ikonę koła zębatego w prawym górnym rogu ekranu. Wybierz Opcje .

Następnie wybierz opcję włączenia pól niestandardowych u dołu wyskakującego ekranu. Będziesz musiał ponownie załadować stronę, więc najpierw zapisz swoją pracę.

Po włączeniu i ponownym załadowaniu u dołu ekranu pojawią się meta-pola pól niestandardowych. Pod częścią edytora treści na ekranie.

Podczas gdy niestandardowe pola WordPress są niesamowicie potężne, domyślne są ograniczone do wartości tekstowej. Potrzeba PHP i rozwoju, aby były bardziej niezawodne. Na szczęście istnieją wtyczki, które działają dla Ciebie, a my przedstawimy Ci, jak je uruchomić. Jeśli potrzebujesz tylko pola tekstowego w niektórych postach i nie chcesz wtyczki, możesz pominąć poniżej dodawanie niestandardowych pól WordPress do interfejsu Twojego motywu. Dotyczy to zarówno pól domyślnych, jak i tych generowanych przez wtyczki, takie jak Zaawansowane pola niestandardowe.

Korzystanie z wtyczki Advanced Custom Fields

Podobnie jak w przypadku większości rzeczy w WordPressie, masz dwie opcje implementacji. Możesz ręcznie edytować pliki PHP, aby dodać funkcjonalność pola niestandardowego, lub możesz użyć wtyczki. W takim przypadku zdecydowanie zalecamy skorzystanie z trasy wtyczki. Jeśli jednak czujesz potrzebę edycji PHP i dostania się do kodu, możesz to zrobić w sekcji Wygląd – Edytor motywów . Oto strona WP Codex na polach niestandardowych, abyś mógł zacząć. Łączy się z różnymi znacznikami szablonów i haczykami, które będą potrzebne do działania.

Ale znowu, zdecydowanie zalecamy używanie wtyczki Advanced Custom Fields zamiast ulepszania kodu. Wtyczka pozwala na wszystko, co chcesz z niestandardowych pól (a potem trochę), więc nie czujemy potrzeby wymyślania koła na nowo. Kiedy to działa, to działa. Użyj tego.

Po zainstalowaniu i aktywacji ACF zauważysz wpis Custom Fields na lewym pasku bocznym panelu administracyjnego WordPress. Zawiera trzy opcje: Grupy pól , Dodaj nowy i Narzędzia .

Grupy pól można traktować jako zestawy. Wszystko, co chcesz, aby pojawiło się w tym samym polu, zostanie uwzględnione w tej samej grupie. Dodaj nowy pozwoli Ci dodać zarówno nową grupę, jak i nowe pole niestandardowe. Podczas gdy Narzędzia to miejsce, w którym można importować i eksportować różne istniejące zestawy pól niestandardowych z innych witryn WordPress.

Podstawy ACF

Tworzenie samych pól jest dość proste. Przejdź do okna Dodaj nowy .

Bez względu na wszystko, niestandardowe pola ACF zostaną uwzględnione w grupie pól . Oznacza to tylko określone pola zawarte w tym samym polu. Możesz więc nazwać go tak, jak chcesz, aby pojawił się w edytorze postów. Za każdym razem, gdy chcesz dodać indywidualny wpis do grupy, kliknij przycisk Dodaj pole . Zrób to za każdym razem, gdy chcesz mieć inne pole w tym samym metaboxie. Reguły lokalizacji określają, gdzie i kiedy pojawi się okno. W tym przykładzie, ponieważ Post Type Is Equal To Post , oznacza to, że pojawi się on tylko w Postach. Nie Strony ani inne niestandardowe typy postów.

Następnie możesz wybrać Ustawienia dla samego pola. Co będzie robić i jaką funkcję będzie pełnić na stronie.

Zasadniczo wybierasz miejsce docelowe (pod treścią posta w edytorze, na pasku bocznym, nad treścią itp.), a także miejsce dla samego tekstu i pól. Najbardziej interesujący jest obszar Ukryj na ekranie . W zależności od tego, jak chcesz używać pól niestandardowych, możesz wykluczyć wszystkie inne meta-boksy z wersji roboczych. Wybierz warunki dla wyglądu tego pola niestandardowego, a następnie określ, które inne pola są z nim wyświetlane, jeśli takie istnieją. Wiele razy nawet nie będziesz się tym martwić.

Tworzenie własnych pól za pomocą ACF

Po nazwaniu grupy pól możesz kliknąć przycisk Dodaj pole . Możesz mieć dowolną liczbę pól w tej samej grupie, ale upewnij się, że wszystkie są ze sobą powiązane. Dzięki ACF możesz stworzyć prawie każdy rodzaj pola wejściowego, jaki możesz sobie wyobrazić.

W tym przykładzie załóżmy, że prowadzimy popkulturową witrynę WordPress, która przegląda filmy i chce, aby pola niestandardowe pokazywały ocenę, czy film jest przesyłany strumieniowo, a jeśli tak, to gdzie go znaleźć.

To wszystko znajdowałoby się w tej samej grupie pól, ale w różnych polach. Jak widać powyżej, Is It Streaming? pole jest skonfigurowane jako przycisk radiowy z selektorem tak/nie, który jest wymagany przed publikacją. Dodatkowo chcemy, aby pole warunkowe wyświetlało się, jeśli pole jest oznaczone jako Tak. Odbywa się to po prostu przez ponowne naciśnięcie przycisku Dodaj pole .

Po włączeniu przełącznika Logika warunkowa wystarczy wybrać pole, któremu podlega i jaka ma być wartość. W takim przypadku Czy to jest przesyłanie strumieniowe? musi być równy Tak.

W edytorze postów wpis w polach niestandardowych będzie wyglądał tak:

A kiedy opublikujesz swój post, wprowadzone metadane będą jego częścią. Ale jest jeszcze jeden problem. Nie możesz tego zobaczyć, ani Twoi goście.

Jak wyświetlić niestandardowe pola w interfejsie WordPress?

Nawet jeśli zrobiłeś to wszystko perfekcyjnie, wprowadzone dane nie pojawią się w interfejsie witryny bez drobnych poprawek. W końcu gdzie by się pojawiła? Wiele razy Twój motyw będzie umożliwiał wyświetlanie metadanych i pól niestandardowych, ale różnią się one motywem. Sprawdź opcje motywu w dokumentacji.

Innym sposobem wyświetlania niestandardowych pól na interfejsie użytkownika są wbudowane skróty ACF. Chociaż w ACF nie ma wbudowanego dostosowania ani kreatora, możesz użyć poniższego kodu skrótu tylko dla pól tekstowych .

Ale ponieważ ogranicza się do pól tekstowych, może mieć ograniczone zastosowanie dla wielu osób. Możesz również przejść do PHP i użyć kodu ACF, jak w przykładach z dokumentacji. Możesz także uaktualnić do ACF Pro i uzyskać dostęp do wbudowanego bloku Gutenberga, który wyświetla niestandardowe pole dokładnie tak, jak je stylizujesz w kreatorze.

Ale tak jak powiedzieliśmy, wiele motywów jest obecnie wyposażonych w integrację pól niestandardowych, a my pokażemy, jak to jest obsługiwane w Divi.

Jak wyświetlić niestandardowe pola na interfejsie użytkownika za pomocą Divi

Po pierwsze, pamiętaj, że wiele modułów Divi może renderować skróty. Tak wiele razy niestandardowe pola tekstowe utworzone w ACF można po prostu wstawić za pomocą ich skrótów, jak wspomnieliśmy powyżej.

W powyższym przykładzie, w którym zastosowano logikę warunkową i przyciski opcji, będziemy używać funkcji dynamicznej zawartości Divi. Jest też bardzo łatwy w użyciu. Pokażemy ci to za pomocą Divi Theme Builder, ale możesz go użyć w dosłownie dowolnym module, który obsługuje go w zwykłym kreatorze Divi. Kliknij Czarny + i wybierz żądany moduł. W tym celu jest to moduł tekstowy .

Następnie znajdź część modułu, do której chcesz wstawić niestandardowe pole. Poszukaj ikony Treści dynamiczne po prawej stronie dowolnego miejsca, które obsługuje tę funkcję.

Kliknij go, aby wybrać z menu rozwijanego wszystkie dostępne rodzaje zawartości dynamicznej, w tym wszystkie pola niestandardowe. Mogą być na samym dole.

Divi daje możliwość dodawania etykiet przed/po do zawartości pola. Chcemy, aby nasz tekst był naturalnie czytany jako część posta, więc czy ten film można przesyłać strumieniowo online? zostanie umieszczony przed wartością podczas renderowania pola. Dodaliśmy również spację na końcu, aby oddzielić naszą etykietę od wartości ACF.

Ponieważ możesz mieć tylko jeden element zawartości dynamicznej na obszar modułu, powtórz ten proces dla innych pól. Pamiętaj jednak, że chociaż pole niestandardowe jest warunkowe, moduł Divi nie jest . Jeśli więc użyjesz etykiety przed/po w polu warunkowym, nadal będziesz widzieć tę etykietę. Jeśli zostawisz je puste, żadna wartość nie zostanie wyrenderowana.

Dodatkowo opcja Włącz surowy HTML pozwoli na renderowanie dowolnego kodu umieszczonego w polu ACF, takiego jak linki do różnych platform itp.

Zawijanie

Jak widać, pomimo tego, że wydaje się to dość skomplikowane, niestandardowe pola WordPress to funkcja, której nie wymaga programista. Po prostu zainstaluj ACF i zacznij dostosowywać sposób wprowadzania informacji przez Ciebie i Twój zespół. Niezależnie od tego, czy jest to witryna z recenzjami, rynek e-commerce, czy nawet przyjazny blog, w którym chcesz dzielić się tym, co dzieje się w Twoim życiu, możliwość ulepszania i ulepszania metadanych postów i stron może wznieść Twoją witrynę na wyższy poziom.

Do czego używasz niestandardowych pól WordPress?

Polecane zdjęcie SurfsUp / shutterstock.com