WordPress niestandardowe pola są ważną częścią tego, co sprawia, że WordPress jest elastycznym systemem zarządzania treścią, a nie „tylko platformą blogową”.

jeśli chodzi o niestandardowe pola WordPress, wtyczka Freemium Advanced Custom Fields jest jedną z najbardziej znanych nazw. Ułatwia to pracę z niestandardowymi polami we wszystkich aspektach, a także jest to temat dzisiejszego postu.

w szczególności wyjaśnimy, dlaczego zaawansowane Pola niestandardowe są tak cenne, a następnie pokażemy krok po kroku, jak możesz je zastosować w swojej witrynie WordPress.

oto wszystko, co znajdziesz w tym poście:
Jest wiele do omówienia, więc zanurkujmy…

Co czy pola niestandardowe WordPress? Na Co Ci Pozwalają?

niestandardowe pola WordPress pozwalają dodawać, przechowywać i wyświetlać dodatkowe informacje o treści w WordPress. Na poziomie bardziej technicznym pola niestandardowe pomagają w przechowywaniu metadanych.

nawet jeśli nie znasz tego terminu, pola niestandardowe zasilają wiele funkcji w Twoich ulubionych wtyczkach i motywach.

na przykład WooCommerce, najpopularniejszy sposób budowania sklepu eCommerce, używa niestandardowych pól do przechowywania dodatkowych informacji o produkcie, takich jak:

• cena
• Waga
• Kolor

lub, jeśli masz wtyczkę kalendarza wydarzeń WordPress, ta wtyczka użyje niestandardowych pól do przechowywania dodatkowych informacji o wydarzeniu, takich jak:

• lokalizacja
• czas rozpoczęcia/zakończenia
• cena

Możesz również utworzyć własne niestandardowe pola do przechowywania informacji istotnych dla Twoich unikalnych potrzeb, o czym jest cały ten post.

jak fajne są niestandardowe pola w WordPressie? 👨 💻Dowiedz się, jak z nich skorzystać dzięki niesamowitemu @wp_acf w naszym najnowszym przewodniku! Click Kliknij, aby tweetować

kiedy należy używać niestandardowych pól?

teraz możesz się zastanawiać, dlaczego w ogóle potrzebujesz niestandardowych pól.

na przykład, jeśli chcesz opublikować wydarzenie w swojej witrynie WordPress, nie możesz po prostu umieścić wszystkich tych informacji jako zwykłego tekstu w edytorze WordPress?

cóż, tak, mógłbyś. Ale używanie niestandardowych pól jest lepszym podejściem z kilku powodów:

• łatwiejsze wprowadzanie danych — zamiast wpisywać rzeczy od zera, dobrze rozplanowana niestandardowa Grupa pól znacznie ułatwi wprowadzanie danych. Na przykład, zamiast wpisywać datę, możesz po prostu wybrać datę z selektora daty.spójność
• – informacje wprowadzane w niestandardowych polach będą zawsze wyświetlane zgodnie z ustawieniami, co oznacza, że będą spójne w całej witrynie.
• łatwe aktualizacje i konserwacja-jeśli chcesz coś zmienić w sposobie wyświetlania tych informacji w przyszłości, możesz po prostu zaktualizować jedną rzecz, zamiast edytować każdy post indywidualnie.

WordPress zawiera wbudowaną funkcjonalność pól niestandardowych

WordPress zawiera wbudowaną funkcjonalność dodawania pól niestandardowych do treści. W klasycznym edytorze TinyMCE można to włączyć w obszarze Opcje ekranu. W nowym edytorze bloków możesz go włączyć w obszarze opcji:

możesz wprowadzić swoje niestandardowe dane pól za pomocą par klucz / wartość:

ta natywna funkcjonalność pól niestandardowych jest całkowicie funkcjonalna, ale nie jest to najbardziej przyjazny dla użytkownika sposób robienia rzeczy, dlatego wiele osób zwraca się do zaawansowanej wtyczki pól niestandardowych.

zaawansowane Pola niestandardowe znacznie ułatwiają

mówiąc prościej, zaawansowane Pola niestandardowe znacznie ułatwiają pracę z niestandardowymi polami w WordPress w… prawie wszystkich aspektach.

upraszcza interfejs do dodawania i zarządzania niestandardowymi polami w pulpicie nawigacyjnym WordPress, a także upraszcza proces wyświetlania informacji z niestandardowych pól na frontendzie witryny. Fakt ten pomaga wyjaśnić, dlaczego jest aktywny na ponad 1 milionie witryn z oceną 4.9 dla ponad 1000 recenzji.

w backendzie umożliwia tworzenie przyjaznych dla użytkownika pól meta, które zawierają wstępnie wybrane typy pól. Zamiast ogólnego interfejsu pary klucz-wartość (takiego jak ten, który widziałeś powyżej), będziesz mógł używać selektorów dat, pól wyboru i innych podobnych funkcji:

w sumie zaawansowane Pola niestandardowe oferują ponad 30 różnych typów pól, które można dodać do dowolnego obszaru na pulpicie nawigacyjnym, w tym posty, użytkownicy, taksonomie, media, komentarze, a nawet strony opcji niestandardowych.

tutaj możesz zobaczyć szczegółowe informacje o każdym typie pola.

zaawansowane Pola niestandardowe również znacznie ułatwiają wyświetlanie tych informacji, dzięki dobrze udokumentowanym funkcjom, skróconym kodom, blokom Gutenberga i innym.

lub możesz znaleźć integracje z innymi narzędziami, takimi jak przeciągnij i upuść narzędzia do tworzenia stron WordPress.

Advanced Custom Fields free vs Pro: którego potrzebujesz?

zaawansowane Pola niestandardowe są dostępne zarówno w bezpłatnej, jak i niedrogiej wersji premium.

dla większości podstawowych zastosowań darmowa wersja jest całkowicie w porządku. Daje dostęp do prawie wszystkich typów pól, a także wszystkich oszczędnych i przyjaznych dla użytkownika funkcji opisanych powyżej.

Jeśli chcesz tylko przechowywać dodatkowe informacje o swoich treściach, darmowa wersja jest wszystkim, czego potrzebujesz.

mając to na uwadze, wersja Pro dodaje kilka całkiem wygodnych funkcji, które pomagają w korzystaniu z zaawansowanych pól niestandardowych w bardziej interesujący sposób:

• pola Repeater — pozwalają one na powtarzanie określonych pól / grup pól na zasadzie post-by-post. Na przykład, jeśli dodajesz informacje o mówcy do zdarzenia, pole repeater pomoże Ci poradzić sobie z sytuacją, w której jest więcej niż jeden głośnik (możesz po prostu „powtórzyć” pola dla mówcy tyle razy, ile potrzeba, co pozwala na obsługę przypadków brzegowych, w których jest wiele głośników).
• bloki ACF-wyświetla pola jako blok Gutenberga, a nie Pole meta. Jest to szczególnie wygodne, jeśli tworzysz witrynę dla klienta i chcesz dać mu łatwy sposób wprowadzania i wizualizacji niestandardowych danych pól.
• elastyczne pole zawartości-tworzenie układów z innych pól. To trochę jak lekki Kreator stron oparty na niestandardowych informacjach o polach.
• pole Galerii-Prześlij wiele zdjęć do jednego pola.

istnieją również inne różnice, takie jak strony opcji, możliwość klonowania pól, ulepszenia pól relacji i inne Mniejsze poprawki.

możesz zobaczyć wszystkie funkcje ACF PRO tutaj.

ACF PRO zaczyna się od $25 za dożywotnie użytkowanie na jednej stronie. Lub możesz zapłacić $100 za dożywotnie użytkowanie na nieograniczonych witrynach.

w razie wątpliwości zacznij od darmowej wersji, dopóki nie zorientujesz się, jakiej funkcjonalności potrzebujesz. W razie potrzeby zawsze możesz dokonać aktualizacji później.

Advanced Custom Fields Tutorial: Jak dodać pola

przejdźmy teraz do samouczka Advanced Custom Fields, a pokażę Ci, jak utworzyć i wyświetlić pierwszy zestaw niestandardowych pól.

w tym przykładzie załóżmy, że masz bloga o bieganiu. Jesteś jak … naprawdę biegasz i chcesz dzielić się swoimi codziennymi treningami z czytelnikami. W szczególności, z każdym wpisem na blogu, chcesz udostępnić bieg:

• cel-powiedzmy, że masz dwa różne rodzaje biegania: „speed work „I”conditioning”.
• dystans — jak długi był twój bieg.
• czas rozpoczęcia-Kiedy rozpocząłeś bieg.
• Czas zakończenia-po zakończeniu biegu.
• Lokalizacja-miejsce, w którym odbył się twój bieg.

aby zebrać te informacje, należy dodać pięć niestandardowych pól.

należy pamiętać, że zasady, których nauczysz się w tym samouczku Advanced Custom Fields, odnoszą się do każdego przypadku użycia. Wybieramy konkretny przykład, ponieważ pomaga nam namacalny przykład, z którym można się połączyć.

podzielimy ten samouczek na dwie części:

1. jak dodawać i zarządzać niestandardowymi polami w backendzie.
2. Jak wyświetlić niestandardowe informacje o polach na frontendzie witryny.

Utwórz nową grupę pól

Po zainstalowaniu i aktywowaniu darmowej wersji zaawansowanych pól niestandardowych z WordPress.org, przejdź do pola niestandardowe > Dodaj nowy, aby utworzyć pierwszą grupę pól.

jak sama nazwa wskazuje, „Grupa pól” to grupa jednego lub więcej niestandardowych pól, które są wyświetlane razem na pulpicie nawigacyjnym WordPress.

w tym przykładzie utworzysz jedną grupę pól, która zawiera pięć pól niestandardowych.

nadaj grupie pól nazwę, a następnie wybierz jej lokalizację. W tym przykładzie chcemy wyświetlić te niestandardowe pola dla zwykłych postów na blogu WordPress, abyś mógł zostawić go jako domyślny Post.

Jeśli jednak chcesz wyświetlić niestandardowe pola w innym miejscu, na przykład obok niestandardowego typu postu lub z taksonomią, powinieneś to zmienić. Możesz także skonfigurować wiele reguł, aby wyświetlać pola w wielu lokalizacjach:

Dodaj pola niestandardowe

następnie kliknij przycisk + Dodaj pole, aby dodać pierwsze pole niestandardowe:

otworzy to wiele opcji, ale niekoniecznie musisz wypełniać wszystko.

dwie najważniejsze opcje to:

• Etykieta pola — to, co pojawi się w edytorze. Zostanie on również użyty do wygenerowania nazwy pola, która będzie używana w kodzie. Nie musisz zmieniać nazwy pola (ale możesz, jeśli zajdzie taka potrzeba).
• Typ pola-jest to typ informacji, które chcesz zebrać. Na przykład pole Numer do zbierania informacji liczbowych lub pole e-mail do zbierania adresu e-mail.

dla tego pierwszego pola wymagane jest pole typu przycisku radiowego:

w dalszej części można wprowadzić opcje wyboru przycisku opcji w polu wyboru:

istnieje również wiele innych opcji, takich jak to, czy pole jest wymagane, czy nie, i wartość domyślna. Możesz je skonfigurować do swoich potrzeb.

spójrzmy na inny przykład: niestandardowe pole do zbierania odległości biegu. Tym razem potrzebny jest typ pola numerycznego:

Możesz również uczynić rzeczy nieco bardziej przyjaznymi dla użytkownika, decydując się na dołączenie jednostki odległości. A jeśli chcesz, możesz również dodać walidację z wartością minimalną i maksymalną. Na przykład, prawdopodobnie nie jedziesz na 1000-milowych biegach (a jeśli to zrobisz… OMG, jesteś najlepszym Forrest Gump)!

Po prostu powtórz proces dla wszystkich innych niestandardowych pól, które chcesz zebrać. Po zakończeniu powinno to wyglądać mniej więcej tak:

skonfiguruj ustawienia i opublikuj

aby zakończyć działanie, przewiń w dół do okna Ustawienia. Tutaj możesz kontrolować sposób wyświetlania pól w edytorze WordPress.

w większości przypadków możesz zostawić je jako domyślne. Ale możesz to zmienić, jeśli chcesz. Na przykład możesz wybrać wyświetlanie niestandardowych pól nad zwykłym edytorem WordPress:

Po dokonaniu wyborów opublikuj swoją grupę pól, aby ją aktywować.

dodaj kilka informacji w edytorze WordPress

Po opublikowaniu grupy pól zobaczysz, że Twoje pola pojawią się, gdy utworzysz nowy post.

domyślnie pojawią się razem pod edytorem zarówno w klasycznym edytorze TinyMCE, jak i w nowym edytorze bloków:

informacje wprowadzone tutaj zostaną zapisane w bazie danych WordPress Twojej witryny w celu łatwego wyszukiwania (zobaczysz to w następnej części naszego samouczka zaawansowane Pola niestandardowe).

odkrywanie logiki warunkowej

zanim przejdziemy do przodu, zróbmy szybki objazd.

Zobacz, jednym z powodów, dla których zaawansowane Pola niestandardowe są tak popularne, są wszystkie interesujące implementacje, na które pozwalają.

i jedną z potężnych opcji tutaj jest logika warunkowa, która pozwala pokazywać/ukrywać pola na podstawie odpowiedzi na poprzednie pole.

przyjrzyjmy się szybkiemu przykładowi, jak to działa…

powiedzmy, że chcesz blogować o jedzeniu, podróżach lub czymkolwiek innym niż bieganie. Kiedy piszesz o temacie bez uruchamiania, nie ma sensu wyświetlać niestandardowych pól w celu uzyskania informacji o uruchomieniu, prawda?

Co, jeśli zamiast automatycznie wyświetlać wszystkie pola niestandardowe, które właśnie utworzyłeś, możesz dodać pole niestandardowe z napisem ” Czy ten post to bieg?”:

Jeśli zaznaczysz to pole, Automatycznie pojawią się pola informacji o uruchomieniu. Jeśli pozostawisz je niezaznaczone, pozostaną one ukryte:

To właśnie pozwala Ci robić logika warunkowa!

aby to skonfigurować, edytujesz swoją grupę pól i dodajesz nowe pole True / False dla ” Is this a run?”:

następnie edytujesz istniejące pola i włączasz logikę warunkową, aby każde pole wyświetlało się tylko wtedy, gdy „Czy to jest bieg?”pole jest zaznaczone:

Jak wyświetlić zaawansowane Pola niestandardowe na interfejsie

Ok, jesteśmy w połowie drogi do zaawansowanych pól niestandardowych. Możesz teraz dodawać informacje do pól niestandardowych, kojarzyć je z odpowiednim typem postu i przechowywać w bazie danych.

jednak nadal istnieje jeden potencjalny problem: informacje z pól niestandardowych nie pojawiają się jeszcze nigdzie na interfejsie!

oznacza to, że nawet jeśli dodałeś kilka niestandardowych pól do edytora postów na blogu, Twój wpis na blogu nadal wygląda jak normalny wpis na blogu na interfejsie:

naprawmy to.

istnieje kilka różnych sposobów wyświetlania zaawansowanych niestandardowych danych pól na interfejsie witryny. Dokładna metoda, którą wybierzesz, zależy od twoich potrzeb i poziomu wiedzy. Oto trzy różne sposoby osiągnięcia tego celu:

1. pliki szablonów motywu — wymaga to trochę wiedzy technicznej, ale jest to najlepsze podejście przez większość czasu, zwłaszcza jeśli wygodnie pracujesz w plikach szablonów motywu.
2. z shortcode-jest to bardzo prosta i dobra opcja, jeśli chcesz tylko wstawić niestandardowe dane pól w zależności od przypadku. Wymaga to jednak znacznie więcej pracy ręcznej, ponieważ musisz dodać skróty do każdego postu.
3. z Elementor Pro-jest to świetne rozwiązanie, ponieważ całkowicie eliminuje potrzebę pracy z PHP, ale jest to produkt premium i oznacza również, że musisz użyć Elementor Pro do tworzenia szablonów.

możesz kliknąć powyżej, aby przejść bezpośrednio do określonej metody lub przeczytać je wszystkie. To zależy od Ciebie.

Jak dodać zaawansowane niestandardowe pola w plikach szablonów motywu

pierwszym sposobem wyświetlania niestandardowych informacji o polach jest dodanie funkcji PHP zaawansowanych niestandardowych pól bezpośrednio do plików szablonów motywu podrzędnego.

jest to trochę zaawansowane, ponieważ wymaga zagłębienia się w pliki szablonów motywu, ale zapewnia, że pola niestandardowe będą automatycznie wyświetlane w tym samym miejscu za każdym razem.

w szczególności musisz edytować pojedynczy szablon dla danego typu postu.

dla zwykłego posta na blogu jest to singiel.php. Niektóre motywy dzielą rzeczy na części szablonów. Na przykład w przypadku motywu TwentyNineteen musisz edytować content-single.część szablonu php.

Jeśli czujesz się zagubiony, możesz użyć innej metody.

Po znalezieniu pliku szablonu motywu dla pojedynczego posta możesz użyć funkcji The_field() zaawansowanych pól niestandardowych, aby wyświetlić informacje o polu. Na przykład

<?php the_field('FIELD_NAME'); ?>

Dowiedz się więcej tutaj na ten temat.

na przykład, aby wyświetlić pole „cel”, użyjesz

<?php the_field('purpose'); ?>

Możesz znaleźć nazwę pola podczas edycji grupy pól:

tak więc, łącząc małe znaczniki HTML z PHP, możesz uzyskać coś takiego, aby wyświetlić wszystkie pola:

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

aby dodać to powyżej zwykłej treści postu, dodałbyś to do pliku szablonu motywu powyżej the_content():

a teraz, po odświeżeniu posta na blogu, możesz zobaczyć niestandardowe dane pól nad zwykłą zawartością WordPress:

aby dowiedzieć się więcej, sprawdź pełną dokumentację zaawansowanych pól niestandardowych.

Jak wyświetlić zaawansowane dane pól niestandardowych za pomocą skrótu

aby uzyskać znacznie prostszy sposób wyświetlania danych pól niestandardowych, możesz również użyć skrótów. Minusem jest to, że musisz dodać shortcode za każdym razem, gdy chcesz wyświetlić niestandardowe pole. Nie ma łatwego sposobu na automatyzację tego zadania.

skrót jest następujący:

na przykład, jeśli wpisałeś to w edytorze WordPress:

wtedy frontend witryny wyglądałby dokładnie tak samo, jak poprzednia metoda szablonu motywu: