Reklama sponsora

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



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

Tworzenie pola powtarzalnego

Tworzenie pola powtarzalnego

 

Edycja pola powtarzalnego na wybranej stronie/wybranym wpisie:

Edycja pola powtarzalnego

Edycja pola powtarzalnego

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.

 

Dodawanie pola flexible content do podstrony

Dodawanie pola flexible content do podstrony

 

Przykład uzupełnionego pola flexible content

Przykład uzupełnionego pola flexible content

 

Wygląd flexible content na podstronie:

Advanced Custom Fields Pro - przykład flexible content

Advanced Custom Fields Pro – przykład flexible content

A tak wygląda kod:

Kod wyświetlania pola flexible

Kod wyświetlania pola flexible

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:

Tworzenie pola galeria

Tworzenie pola galeria

 

Dodawanie obrazów do galerii:

Dodawanie obrazów w edycji strony

Dodawanie obrazów w edycji strony

 

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

galeria

galeria

 

A tak wygląda kod:

kod wyswietlania galerii

Kod wyświetlania galerii

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.

 


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *