Własne pola cz. 2 – Advanced Custom Fields Pro

---

Dodano 2019-05-23 15:33:07 przez Klaudia

---

Advanced Custom Fields Pro

W poprzednim wpisie zostały wyjaśnione podstawy użytkowania darmowej wersji wtyczki Advanced Custom Fields umożliwiającej tworzenie swoich własnych pól. W drugiej części tego wpisu zajmiemy się płatną wersją wtyczki – Advanced Custom Fields Pro. Dokładniej przyjrzymy się temu, co ona umożliwia, jakie nowe opcje nam udostępnia a także wyjaśnię jak ich używać.
Jeśli jednak nie wiesz czym są własne pola oraz o wtyczce ACF słyszysz po raz pierwszy, polecam zaznajomić się z tym wpisem, gdzie wszystko zostało w sposób klarowny wytłumaczone.

 

Co nowego?

Małe przypomnienie o tym, co nowego znajdziemy w płatnej wersji wtyczki. Najważniejszą rzeczą są nowe typy pól:

• Pole powtarzalne (Repeater) – pozwala wybrać pole lub grupę pól, które autor będzie mógł dodać do wpisu parę razy; przydatne gdy chcemy dodać listę bądź tabelę różnych elementów
• Elastyczna treść (Flexible content) – umożliwia grupowanie pola różnych typów (w tym także repeater i flexible content)
• Galeria – proste i wygodne w użyciu pole umożliwiające dodanie galerii z obrazkami
• Klonowanie (Clone field) – pozwala wybrać i wyświetlić istniejące już pola na nowej podstronie/nowym wpisie; nie duplikuje to jednak pól w bazie danych, a zamiast tego ładuje i wyświetla wybrane pola w czasie działania programu

 

Pole powtarzalne – Repeater

Pole powtarzalne pozwala stworzyć zestaw pól i elementów, które można dodać do wpisu i wyświetlać wiele razy. Pola te są w pełni edytowalne.
Można także zadecydować gdzie te pola powtarzalne (jaki typ wpisu czy strony) mają się wyświetlać.

 

Edycja pola powtarzalnego na wybranej stronie/wybranym wpisie:

Użycie stworzonego pola edytowalnego:

A tak wygląda kod:

Najpierw sprawdzamy czy pole posiada jakiekolwiek pozycje/rzędy (1), jeśli tak, to następnie w pętli wyświetlamy zawartość tych pól: tekst, który dodaliśmy (2) oraz obrazek (3).

Więcej na temat pola powtarzalnego możecie znaleźć tutaj (po angielsku).

 

Elastyczna treść – flexible content

Pozwala na tworzenie praktycznie gotowych layoutów poprzez grupowanie pól różnego typu.

Na powyższym screenie mamy panel tworzenia pola typu „flexible content”.  Jak widać możemy dodawać dowolną ilość pól różnego typu do jednego układu. Ponadto możemy również tworzyć kilka takich układów (na screenie drugi układ jest pusty). Po lewej stronie mamy kilka opcji układu takie jak duplikowanie, zmiana kolejności wyświetlania, dodawanie nowych czy usuwanie bieżących.

 

 

 

Wygląd flexible content na podstronie:

A tak wygląda kod:

Warunek if(get_row_layout() == ‚tekst’): z pozycji nr. 1 mówi, iż jeśli pętla natknie się na nazwę pola/rzędu layout’u „tekst”, to pobierz do zmiennej $tekst wartość z pola o nazwie „tekst” znajdującego się w tym layoucie (2).

Drugi warunek z konstrukcji elseif jest analogiczny do pierwszego if (3).

Więcej na temat tworzenia swojego layoutu możesz znaleźć tutaj.

Galeria

Pole o tym typie dostarcza prosty i intuicyjny interfejs pozwalający na zarządzanie kolekcją obrazów. Ważną informacją jest to, iż pole galeria zwróci tablicę danych obrazu (czyli id, opis, tytuł, typ, adres url, wymiary oryginalne obrazu oraz wymiary ucięte, które są do wyboru jako thumbnail). Poniżej są wypisane wszystkie indeksy tej tablicy:

Array (
    [ID] => 2822
    [alt] => 
    [title] => przykladowy-obraz-2560-1600
    [caption] => 
    [description] => 
    [mime_type] => image/jpeg
    [type] => image
    [url] => http://acf5/wp-content/uploads/2014/06/przykladowy-obraz-2560x1600.jpg
    [width] => 2560
    [height] => 1600
    [sizes] => Array (
        [thumbnail] => http://acf5/wp-content/uploads/2014/06/przykladowy-obraz-2560x1600-150x150.jpg
        [thumbnail-width] => 150
        [thumbnail-height] => 150
        [medium] => http://acf5/wp-content/uploads/2014/06/przykladowy-obraz-2560x1600-300x187.jpg
        [medium-width] => 300
        [medium-height] => 187
        [large] => http://acf5/wp-content/uploads/2014/06/przykladowy-obraz-2560x1600-1024x640.jpg
        [large-width] => 604
        [large-height] => 377
        [post-thumbnail] => http://acf5/wp-content/uploads/2014/06/przykladowy-obraz-2560x1600-604x270.jpg
        [post-thumbnail-width] => 604
        [post-thumbnail-height] => 270
    )
)

Tworzenie pola galeria:

 

Dodawanie obrazów do galerii:

 

Wygląd podstrony, na której wyświetlana jest galeria:

 

A tak wygląda kod:

Najpierw przypisujemy zawartość pola „galeria” do zmiennej $images (czyli całą tablicę danych). Następnie w pętli foreach iterujemy po tej tablicy (zmienna $images) i do pojedynczego elementu (w tym przypadku obrazu) odwołujemy się używając zmiennej $image. Niżej w kodzie widać jak po kolei odwołujemy się do konkretnych danych obrazu używając odpowiednich indeksów tablicy.
Podany przykład kodu jest jednym z kilku sposobów do wyświetlenia galerii obrazów. Więcej informacji na ten temat możesz znaleźć tutaj.

 

O innych możliwościach i opcjach wtyczki Advanced Custom Fields Pro można się doczytać na tej stronie.