PORADNIK

Advanced Custom Fields – własne typy pól WordPress

W tym poradniku dowiesz się jak dodać własne typy pól dla Custom Post Type w WordPress za pomocą pluginu Advanced Custom Fields. Dzięki własnym typom pól możemy dodać do własnego typu post’a właściwości, obrazy i każdą inną treść jaka ustalałaby dodatkowe funkcjonalności naszego wpisu. W tym poradniku dowiesz się jak dodać takie pola do danego typu post’ów.

Jak dodać własne typy pól dla Custom Post Type za pomocą pluginu Advanced Custom Fields? – WordPress

Czego będziemy potrzebować aby dodać własne typy pól w WordPress (plugin Advanced Custom Fields)?

  1. Plugin Advanced Custom Fields – plugin pozwalający dodawać własne typy pól,Advanced Custom Fields - własne typy pól WordPress
  2. Wiedzy z poprzedniego poradnika – Tworzenie template dla custom post – jeśli nie wiesz jak stworzyć Custom Post Type za pomocą CPT UI odsyłam Cię do tego poradnika,
  3. Podstawowej wiedzy z języka PHP – nie będą tu używane żadne skomplikowane funkcje natomiast należałoby zapoznać się z podstawową składnią języka, aby móc zrozumieć kod, który będzie w tym poradniku.

Let’s do it!

Po zainstalowaniu pluginu ACF (Advanced Custom Fields) przechodzimy do stworzenia nowego typu post’a – Projekt. Będziemy chcieli stworzyć listę projektów w formie portfolio, które będą zawierały kilka podstawowych pól:

  • Tytuł,
  • Krótki opis projektu,
  • Opis projektu,
  • Rok stworzenia projektu,
  • Co wykonaliśmy w projekcie,
  • Obraz wyróżniający,
  • Obrazy projektu

Przechodzimy do pluginu CPT UI i dodajemy nowy typ post’a (jeśli nie wiesz jak to zrobić ponownie odsyłam do poprzedniego poradnika):

  • Slug -> projekt,
  • Plural -> Projekty,
  • Singular -> Projekt

Skorzystajmy z wbudowanych opcji CPT UI aby stworzyć kilka podstawowych pól naszego custom post’a.

Po stworzeniu Custom Post Type -> Projekt i dodaniu podstawowych pól przechodzimy do dodania pozostalych pól za pomocą Custom Fields. Przejdź do zakładki w panelu WordPressa: Własne pola -> Dodaj nową. Następnie należy nadać tytuł grupie pól. Tutaj proponuję aby nazewnictwo się nie mieszało się w dalszej części tworzenia projektu nazwać od liczby pojedynczej naszego Custom Post’a do którego chcemy dodać dane pola i dodać nazwę Inputs  aby było wiadomo, że chodzi o własne typy pól. W naszym przypadku będzie to: Projekt Inputs.

Kliknij przycisk dodaj pole i wybierz potrzebny typ pola oraz nadaj odpowiednią nazwę.

Etykieta pola -> Nazwa wyświetlająca pole, mogą występować polskie znaki i spacje – będzie widoczna tylko w panelu WordPress’a. Nadaj taką etykietę, abyś wiedział za co odpowiada dane pole, np. ”Co wykonaliśmy w projekcie”.

Nazwa pola -> Podobnie jak slug w przypadku dodawania typu post’a, nie może zawierać polskich znaków oraz będzie wykorzystywana w kodzie PHP. Nadaj łatwą nazwę pola, np. “wykonanie”.

Typ pola -> typy pól są różne, są one opisane w dokumentacji pluginu. W naszym przypadku będzie to np. Tekst

Reszta pól -> są one opcjonalne i możemy za ich pomocą dostosować wprowadzanie pola do naszego projektu, natomiast w naszym przypadku nie będzie to potrzebne. Więcej informacji znajdziesz w dokumentacji.

Pamiętaj aby po stworzeniu wszystkich typów pól, dodać Warunek dla danej grupy pól:

Typ wpisu -> jest równe -> Projekt (Custom Post Type, u nas typ: Projekt).

Advanced Custom Fields - własne typy pól WordPress 3

Gotowe! 

Dodaliśmy własne typy pól dla własnego typu post’a. Teraz możemy przejść do dodania kilku przykładowych projektów.

Advanced Custom Fields - własne typy pól WordPress 2

Dodaliśmy kilka przykładowych projektów podglądowych. Teraz przechodzimy do strony backend’owej i spróbujemy stworzyć widok dla pojedynczego projektu, wyświetlający wszystkie pola.

Pracujemy na pustym motywie wp_tutorial, stworzonym na potrzeby tutoriala. Jeśli nie wiesz jak stworzyć własny motyw odsyłam do poradnika. Kopiujemy plik single.php i dodajemy do niego nazwę naszego custom post type slug, tworząc plik single-projekt.php.

Przystępujemy do edycji naszego kodu:

W ten sposób wyświetliliśmy wszystkie pola custom post’a typu projekt. Główną metodą wyświetlania wartości pola jest metoda the_field(‘nazwa_pola’). Za jej pomocą wyświetliliśmy pola: wykonanie, rok.

Użyliśmy także metody get_field(‘nazwa_pola’) w celu pobrania obrazów. Obrazy pobierane za pomocą custom field’s można pobrać za pomocą tablicy lub adresu url. Domyślnie jest zwracana tablica, na której później operujemy w celu pobrania tytułu obrazu oraz tekstu alternatywnego, a także ustawienia odpowiedniego rozmiaru zdjęcia.

  • W wartości $title przechowujemy tytuł obrazu,
  • $alt przechowuje tekst alternatywny,
  • $size określa rozmiar obrazu,
  • $thumb odpowiada za pobranie adresu obrazu w odpowiednim rozmiarze.

Metody esc_attr() oraz esc_url() pozwalają na odpowiednie wyświetlenie atrybutów oraz adresu url.

Otrzymaliśmy widok, w którym znajdują się wszystkie dodane pola. W ten sposób możemy wyświetlić dowolnie dodaną zawartość za pomocą pluginów CPT UI oraz ACF.

Podsumowanie

Dodawanie custom post type z własnymi typami pól jest zaawansowanym zastosowaniem WordPress dzięki, któremu możemy dodawać wiele modułów, widoków oraz funkcjonalności, które nie występują w podstawowej wersji WordPress’a. Zastosowanie z naszego przykładu jest dosyć prostym rozwiązaniem, natomiast trzeba znać podstawową składnię PHP oraz HTML. Dodatkowo pojawiają się wbudowane funkcje WordPress oraz ACF. Największą trudnością w danym przykładzie jest pobieranie obrazów oraz odpowiednie wyświetlenie. Gdy, poznamy funkcję z powyższego przykładu bez problemu będziemy mogli wyświetlać własne typy pól w widokach.