Własne pole w WordPress. Advanced Custom Fields w akcji.

Czasami jest tak, że potrzebujemy stworzyć stronę nie tylko z treścią główną, ale z dodatkowymi boksami umieszczonymi w dowolnym miejscu. Jeżeli dobrze znamy HTML i CSS to nie ma większego problemu. Wystarczy stworzyć klasy, przypisać do kontenerów i po krzyku. Co w sytuacji, gdy oddajemy stronę klientowi, który się nie zna? Na 100% po kilku dniach zadzwoni telefon z reklamacją, że wszystko się rozsypało. Aby temu zapobiec musimy stworzyć „własne pole”.

Własne pole – Advanced Custom Fields

Dzięki milionom wtyczek do WordPress’a nie musimy za dużo programować, żeby strona wyglądała jak chcemy. Dodatkowe pola (ale nie tylko) zapewnia wtyczka Advanced Custom Fields autorstwa Eliota Condon’a.

Po zainstalowaniu przechodzimy menu „Własne pola” i zakładamy nową grupę pól.

Na szczęście nie wszystkie pola są wymagane. Ważne jest by nadać etykietę i nazwę pola, taką by nam się jednoznacznie kojarzyła, a także wybrać rodzaj pola z listy. Do wyboru mamy m.in.:

  • Tekst
  • Pole tekstowe
  • Liczbę
  • Email
  • Hasło
  • Edytor WYSIWYG
  • Obrazek
  • Plik
  • Różne pola wyboru
  • Linki

Jest tego trochę. W projekcie, który teraz robiłem najbardziej przydał mi się edytor WYSIWYG oraz przycisk wyboru.

WYSIWYG

Wybierając WYSIWYG otrzymujemy pole z wbudowanym domyślnym wizualnym edytorem kodu. Zawsze trzeba mieć na uwadze wygodę klienta. Klient zadowolony nie dzwoni po godzinach! Alternatywą do WYSIWYG jest „Obszar tekstowy”. To pole przyda nam się, gdy mamy do wstawienia kilka linii tekstu bez ozdobników.

Przycisk wyboru

Bardzo ciekawe rozwiązanie, gdy klient np. przez jakiś czas nie chce pokazywać fragmentu szablonu. W moim przypadku wyłączyłem wyświetlanie sekcji z ostatnimi wpisami na blogu – po prostu jeszcze ich nie ma. Ale możemy też to zastosować do wyświetlania komunikatu o awarii lub promocji.

Gdzie to ma się wyświetlić?

Ważne jest by dobrze pole przypisać do treści. Możemy jest dodać do wybranej strony, szablonu, określonego typu lub rodzica strony.  Pole może być widoczne do użytkownika o wybranej roli, albo wpisu w odpowiedniej formie lub kategorii. Opcji jest na prawdę dużo. Dodatkowo możemy zrobić wykluczanie wg powyższych lub stworzyć grupę zasad.

Opcje

Autor na prawdę zadbał o szczegóły. Każde pole ma listę opcji. Np. nr w kolejności. Jeżeli nasze boksy wyświetlają się w pewnej kolejności, to warto zadbać by pola też miały taką kolejność. Dodatkowo, jeżeli pole jest ważniejsze od głównej treści, to możemy je ustawić tuż za tytułem. Do wyboru jest też boczny panel. Jeżeli nasze pole ma zastąpić inne domyślne, to możemy je wybrać z bogatej listy.

Czas na kod

Tyle o tym, co można zrobić na podstawowym poziomie. Teraz trzeba wartość pola wyświetlić w szablonie.

Są dwie znane mi możliwości. Poprzez tzw shortcode albo za pomocą funkcji the_field() lub get_field() w kodzie php szablonu.

the_field() i get_field()

Jeżeli programujemy stronę szablonu i wiemy gdzie na pewno ma znaleźć się treść z pola to wstawiamy ją na sztywno za pomocą kodu

1
<?php the_field('nazwa_pola'); ?>

Możemy też stworzyć warunek sprawdzający czy wartość istnieje

1
2
3
4
5
<?php if( get_field('text_field') ): ?>

<h2><?php the_field('text_field'); ?></h2>

<?php endif; ?>

Drugim parametrem funkcji the_field i get_field jest $post_id gdzie możemy wskazać inny od aktualnego numer postu, kategorii czy taxonomii.

Różnica między funkcjami jest taka, że wartość get_field możemy przypisać do zmiennej, a the_field służy bezpośrednio do wyświetlania zawartości.

shortcode

Jeżeli zostawiamy możliwość wyświetlania danych klientowi w edytorze, to musi on się posłużyć shortcode’m:

1
[acf field="{$field_name}"]

lub

1
[acf field="{$field_name}" post_id="{$post_id}"]

Dodaj komentarz