Reklama sponsora

Własne pola cz. 1 – Advanced Custom Fields



Własne pola – słowem wstępu

Własne pola, czyli pola użytkownika, pozwalają na lepsze dostosowywanie strony do własnych potrzeb. Dzięki nim możemy „podpiąć” do wpisu dowolną ilość dodatkowych informacji.
Wtyczka ACF jest bardzo przydatnym i pomocnym narzędziem umożliwiającym użytkownikowi tworzenie oraz zarządzanie własnymi polami definiowanymi („custom fields”). Pozwala to na większą kontrolę nad treściami umieszczanymi na naszej stronie oraz szersze możliwości ich edytowania. Wtyczka posiada duży wachlarz typów pól, umożliwia grupowanie pól, a samo ich dodawanie i przypisywanie do wybranych podstron jest bardzo proste. Przejdźmy zatem do instalacji.

 

Instalacja wtyczki

Tutaj nic nowego: przechodzimy w zakładkę „Wtyczki” > „Dodaj nową”, wyszukujemy „Advanced Custom Fields” i klikamy przycisk „Zainstaluj”. Po aktywacji wtyczki  – kliknij „Włącz” – powinna ukazać się nowa zakładka w menu o nazwie „Własne pola”.

Advanced Custom Fields - menu

Advanced Custom Fields – menu

 

Dodawanie nowej grupy pól

Tak jak już zostało wcześniej wspomniane – pola są łączone w grupy. Pozwala to nie tylko na lepszą czytelność i łatwiejszą konfigurację dodanych przez nas pól, ale pozwala to również na przypisywanie wybranych grup pól do wszystkich bądź poszczególnych typów wpisów.
By dodać nową grupę pól, wystarczy kliknąć przycisk „Dodaj nową”, a następnie przechodzimy do konfigurowania swojej pierwszej grupy pól.

Jak widać jedna grupa, na potrzeby tego wpisu, została przeze mnie już wcześniej utworzona.

ACF - grupy pól

ACF – lista grupy pól

 

ACF - dodawanie nowej grupy i warunki wyświetlania

ACF – dodawanie nowej grupy i warunki wyświetlania

Wpierw wprowadzamy nazwę (tytuł) naszej grupy pól, następnie dobrze jest ustalić zestaw warunków (2), które określają w których miejscach będą wykorzystywane/wyświetlane zdefiniowane w tej grupie własne pola (1).

 

Tworzenie nowych pól

Tworzenie własnych pól jest bardzo intuicyjne i proste, nie wymaga żadnej specjalistycznej wiedzy, jedynie trochę praktyki. Przejdźmy zatem do utworzenia swojego pierwszego pola.
Klikamy niebieski przycisk „+Dodaj pole”.  Rozwinął nam się panel konfiguracyjny własnego pola. Wygląda on następująco:

ACF - nowe pole

ACF – nowe pole

W miejscu „Etykieta pola” wpisujemy nazwę, która będzie wyświetlana na stronie edycji. Najlepiej by ta nazwa kojarzyła nam się z tym, co te pole będzie w sobie zawierało. Niżej mamy „Nazwa pola” – ono uzupełnia się automatycznie bazując na tym, co wpisaliśmy w miejscu „Etykieta pola”. Można to oczywiście zmienić według naszych preferencji, jednak polecam zostawić automatyczną nazwę, jeśli nie jest ona zbyt długa.  Następnie wybieramy jakim typem ma być nasze pole. Wybór jest dość duży, większość z nich jest opisana w dalszej części artykułu.
Po wybraniu typu dla naszego pola, możemy wprowadzić tzw. „Instrukcje” – jak sama nazwa wskazuje, są to instrukcje dla autorów, które będą widoczne podczas wprowadzania danych. Uzupełnianie tego nie jest obowiązkowe. Następnie możemy ustalić, czy chcemy by dane pole było polem wymaganym, a zaraz pod tą opcją mamy kolejną ważną pozycje – „Domyślna wartość”. W tym miejscu podajemy co będzie wyświetlane podczas tworzenia nowego wpisu.

Tworząc własne pole natkniemy się na inne, nieopisane tutaj pozycje do uzupełnienia, jednakże nie są one pozycjami istotnymi czy wymagającymi szczególnej uwagi, można je na spokojnie pominąć, gdyż są one wykorzystywane przy bardziej zaawansowanym używaniu wtyczki ACF, tak więc nie będziemy się tym zajmować w tym wpisie.

Po zakończeniu dodawania swojego pola, klikamy w przycisk „Zamknij to pole” znajdujące się na dole panelu konfiguracyjnego nowego pola.

Przykładowe nowe pole:

ACF - nowe pole

ACF – nowe pole

 

Typy pól

  • Tekst – tradycyjne pole tekstowe
  • Obszar tekstowy – wielolinijkowe pole tekstowe
  • Edytor WYSIWYG – wielolinijkowe pole tekstowe z edytorem WYSIWYG
  • Obrazek – pole umożliwiające wgranie obrazka wyświetlanego w formie miniaturki w podanym wymiarze
  • Plik – pole to umożliwia wgranie dowolnego pliku
  • Liczba (number) – pole liczbowe
  • Rozwijalna lista wyboru (dropdown) – rozwijalna lista z możliwością wielokrotnego wyboru
  • Przycisk wyboru (checkbox) – przycisk/pole do zaznaczenia pełniący rolę przełącznika z wielokrotnym wyborem
  • Przycisk opcji (radiobutton) – przycisk pełniący rolę przełącznika pojedynczego wyboru
  • Prawda/Fałsz – pole wyboru „tak/nie”
  • Wybór koloru – pole do wybrania koloru
  • Wybór daty – moduł do wyboru daty; jest również możliwość wyboru formatu
  • Link do strony – pole przechowujące link do dowolnego artykułu z bazy
  • Wpisy – dla użytkownika jest to pole działające podobnie do pola „Link do strony”, jednakże zapewnia ono programiście dostęp nie tylko do URL  ale także do wszystkich pól/danych linkowanego artykułu
  • Relacja – jest to wariant pola typu „Wpisy” działający na takiej samej zasadzie z tą różnicą, że ma inny interface dla użytkownika

Warto wspomnieć, iż istnieje płatna wersja tej wtyczki – „Advanced Custom Fields Pro” – która oferuje dodatkowe 3 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 grupować 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

Wyświetlanie zawartości własnych pól

Pól ACF można używać na dwa sposoby. Pierwszym sposobem jest po prostu dodawanie wybranych przez nas grup pól do poszczególnych wpisów w edycji wpisu. Drugim sposobem – moim zdaniem najwygodniejszym – jest odwoływanie się do nich za pomocą kodu php. Poniżej przedstawię podstawowe i najczęściej używane przykłady kodów.
Jeśli tych kilka przykładów Was nie zadowoli, możecie zajrzeć tutaj po więcej.

By odwołać się do pola i wyświetlić jego zawartość (np. tekstową), wystarczy ten krótki fragment kodu:

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

Oczywiście w miejsce „field_name” wstawiamy to, co ustawiliśmy w „Nazwa pola” podczas tworzenia własnego pola.

Poniżej przedstawiam przykłady na podstawie pola utworzonego wcześniej:

A tak wygląda kod:

własne pola kod

 

Przy polach o typie „obraz” warto wspomnieć, iż możemy wybrać czy chcemy, by pole zwracało adres URL, tablicę obrazów bądź ID obrazu:

W przypadku adresu URL, wystarczy posłużyć się tym kodem:

<img src="<?php the_field('field_name'); ?>" alt="" />

Przykład:

A oto kod:

własne pola kod

Jeśli natomiast chcemy posłużyć się ID obrazu, kod będzie wyglądał następująco:

<?php $image = wp_get_attachment_image_src(get_field('image_test'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_test')) ?>" />

Używając ID, możemy także zwrócić nazwę pola czy też rozmiar samego obrazu. Stąd też w powyższym kodzie przy atrybucie alt korzystamy z metody „get_the_title()” i w argumencie przekazujemy metodę zwracającą ID obrazka.

Zawartość własnego pola można przypisać do zmiennej, można również pobierać i wyświetlać dane pola z innego wpisu (wtedy po nazwie pola, po przecinku podaje się ID tego wpisu, np.:  <?php the_field(‚field_name’, 2); ?>).

Relacje

Relacje są wyjątkowym typem pól w Advanced Custom Fields. Własne pola o tym typie są bardzo przydatnym i praktycznym narzędziem dla programistów, pozwalają one bowiem na zaawansowane linkowanie do innych stron, wpisów bądź konkretnych obiektów wpisu.

Pole realizacji posiada następujące opcje dostosowywania:

  • filtruj wg typu wpisu – można filtrować wybór wybierając typ wpisu (1 -widoczne na screenie poniżej)
  • filtruj wg taksonomii – można filtrować wybór wybierając kategorię wpisu (2 – widoczne na screenie poniżej)
Własne pola - relacja

Własne pola – relacja

Niżej w panelu dodawania pola można wybrać również, czy pole ma zwracać ID wpisy czy obiekt wpisu.

Edycja relacji na stronie wygląda następująco:

relacja - edycja

Relacja – edycja

 
Także jak widać możliwości jakie oferuje ta wtyczka jest naprawdę wiele i niewątpliwie jest jedną z najlepiej przemyślanych i najdokładniej napisanych wtyczek do WordPressa. Dużą zaletą jest również to, że ma bardzo dobrze i szczegółowo napisaną dokumentację (jak na razie tylko po angielsku).

 


Dodaj komentarz

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