Jak tworzyć i używać niestandardowych pól w WordPress

Niestandardowe pola WordPress to świetny sposób na rozszerzenie typowej treści posta lub strony w Twojej witrynie. Są to fragmenty metadanych, które są dołączone do posta lub strony w Twojej witrynie WordPress, co oznacza, że ​​za pomocą tej metody możesz dodawać dowolne dodatkowe informacje do swoich treści.

Pola niestandardowe, zorganizowane w formacie klucz/wartość, służą do dodawania danych do wielu postów lub stron. Klucz to nazwa, która zapewnia spójność i identyfikuje określone pole, na przykład „Element”. To jest zawsze to samo. Wartość to informacja, która zostanie wyświetlona w polu. Wartość będzie różna w różnych postach, w zależności od wprowadzonych informacji.

Dodawanie niestandardowych pól do posta

Poniższe kroki pokażą Ci, jak używać niestandardowych pól w swoich postach. Jeśli wolisz używać ich na stronach, te same pomysły będą miały zastosowanie, ale będą musiały zostać zaimplementowane w plikach szablonów odpowiedzialnych za tworzenie stron, a nie postów.

1. Przejdź do ekranu edytora postów i zaznacz „Pola niestandardowe”.

2. Znajdź pole Pola niestandardowe w ramach edycji posta. Gdy jesteś na stronie postu, zobaczysz nową sekcję na dole z nagłówkiem „Pola niestandardowe”.

Przyjrzyjmy się teraz bardzo prostemu przykładowi działania niestandardowych pól WordPress. Wszystko ułoży się w tym przykładzie dla bloga fitness. Użyjemy niestandardowych pól do śledzenia i wyświetlania różnych rodzajów aktywności fizycznej w postach.

3. Dodaj klucz, którym w tym przypadku jest „Typ ćwiczenia”. Użyjemy tego pola, aby dodać szczegółowe informacje do posta. Kliknij „Wprowadź nowy” i wpisz klucz w polu.

4. Dodaj wartość. Chodźmy na ten zumba. Pamiętaj, że pojawi się to tylko w tym konkretnym poście. W innym poście możesz wpisać inną wartość, na przykład „eliptyczny” lub inny rodzaj ćwiczenia.

5. Zapisz wiadomość.

W tej chwili tak naprawdę niewiele zobaczysz. Nadal musisz dodać trochę formatowania, aby wyświetlić informacje. Na razie te dodatkowe informacje są przechowywane w bazie danych, więc można je wywołać do wyświetlenia. W tym samouczku zdecydowałem się wyświetlać te niestandardowe pola w postach (zamiast na stronach), więc omówię najbardziej podstawowy sposób formatowania wszystkiego.

Wyświetlanie pól niestandardowych w poście

Korzystanie z modyfikacji szablonu w celu dodania niestandardowych pól jako powtarzających się danych witryny to skuteczny sposób radzenia sobie z tym problemem. Załóżmy, że zaczynasz od wyświetlenia niestandardowych pól na początku posta, ale później decydujesz, że u dołu będzie to wyglądało lepiej. Korzystając z modyfikacji szablonów, zmiana ta jest łatwa do wykonania, ponieważ zmiana szablonu spowoduje aktualizację całej witryny. Jeśli nie skorzystałeś z tej metody i zamiast tego zapisałeś informacje indywidualnie w każdym poście, musiałbyś edytować każdy pojedynczy post, aby wprowadzić zmianę, co znacznie utrudniłoby wprowadzanie zmian.

W tym przykładzie niestandardowe pole zostanie wyświetlone przed postem, aby czytelnik mógł zobaczyć typ ćwiczenia przed przeczytaniem całego postu. Aby wyświetlić to w ten sposób, dane zostaną wywołane przed pętlą WordPress.

Uwaga: te dostosowania powinny być oczywiście wykonane w motywie potomnym, a my będziemy używać pliku single.php . Jak zawsze, takie dostosowania najlepiej testować w środowisku programistycznym.

1. Otwórz plik single.php i dodaj ten kod poza pętlą WordPress:

 <?php the_meta(); ?>

Wyświetli się coś takiego:

Jeśli wolisz, aby ten fragment był wyświetlany w innym miejscu na stronie, spróbuj umieścić ten fragment w pętli lub po pętli. Na przykład, umieszczając funkcję wewnątrz znacznika <main> , informacje o niestandardowym polu będą wyświetlane jako część głównej treści.

 <div class="content-area"> <main class="site-main" role="main">

To podejście będzie działać, aby wyświetlić również inne utworzone przez Ciebie pola niestandardowe.

W tym przykładzie należy wspomnieć o jednej rzeczy: motyw potomny został utworzony z motywu nadrzędnego WordPress Twenty Fifteen, który jest bardzo popularny. Jeśli eksperymentujesz z miejscem wyświetlania niestandardowych pól, w motywie potomnym mogą być potrzebne inne szablony oprócz pliku single.php . Aby wyświetlić informacje w poście, do motywu potomnego dodano content.php . Powyższy fragment został umieszczony w treści strony, więc pojawił się jako część wpisu.

2. Stylizuj pola. Jeśli przejdziesz do inspektora, zobaczysz kilka nowych klas dodanych do strony.

Oto jak wygląda przykład z dwoma różnymi polami niestandardowymi:

• Rodzaj ćwiczeń: Zumba
• Pora dnia: Rano

Praca z listą jest dość prosta. Z pewną stylizacją będzie wyglądać bardziej zintegrowana ze stylem witryny. Za pomocą zaledwie kilku prostych modyfikacji CSS możemy dostosować kolor tekstu i styl listy.

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

Więcej niestandardowych dostosowań pól

Stylizacja z poprzedniego przykładu będzie działać dobrze, ale robimy coś więcej. Poniższe przykłady pokażą, w jaki sposób pola niestandardowe można dostosować za pomocą dodatkowych opcji wyświetlania dla określonych przypadków użycia. Uczynienie niestandardowego pola odczytywanym jako część posta i ustawienie kontekstu za pomocą pomocnego nagłówka będzie doskonałym dodatkiem do posta. Jeśli postępujesz krok po kroku, pamiętaj o skomentowaniu <?php the_meta(); ?> <?php the_meta(); ?> , który dodałeś w poprzednim przykładzie.

W tym przykładzie rzeczy zostały nieco zmodyfikowane. Klucz został uproszczony do „ćwiczeń”, dzięki czemu można go łatwiej dodać do szablonu, a fragment kodu został dodany w pliku content.php motywu potomnego, dzięki czemu pojawi się w treści posta, zamiast przed lub po nim .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

Pole niestandardowe jest teraz wyświetlane pod nagłówkiem „Dzisiejsze ćwiczenie:” w formacie listy. Zostało to ustawione jako <h3> , ale można je łatwo dostosować do innego stylu nagłówka lub akapitu. Jeśli nie chcesz tego w formacie listy, można to również uporządkować w dowolny sposób.

Warunkowe niestandardowe

Pola

Może się zdarzyć, że pole niestandardowe nie zostanie uwzględnione. Załóżmy na przykład, że istnieje post bez wartości ćwiczeń. Umożliwi to wyświetlenie informacji o rezerwie, więc nie będzie po prostu puste.

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

Wtyczka zaawansowanych pól niestandardowych

Postępując zgodnie z tym samouczkiem, możesz łatwo uruchomić niestandardowe pola. Jeśli wolisz użyć wtyczki do dodania niestandardowych pól, istnieją również dostępne opcje. Zaawansowane pola niestandardowe to bardzo popularna opcja. Zastępuje to domyślny interfejs pól niestandardowych w WordPress. Produkt końcowy utworzony na podstawie tego samouczka można również utworzyć za pomocą tej wtyczki.

Grupy terenowe

Wtyczka Advanced Custom Fields pozwala na tworzenie grup pól, o czym warto wspomnieć, ponieważ są one ściśle powiązane z powyższym samouczkiem. Zasadniczo stworzyliśmy bardzo podstawową wersję mini grupy terenowej. Grupy zaawansowanych pól niestandardowych zawierają pola niestandardowe, reguły dotyczące lokalizacji i opcje wyświetlania. Każda grupa pól będzie używać swoich reguł lokalizacji, aby wyświetlać pola w razie potrzeby we właściwej lokalizacji. Podobnie jak w przypadku ręcznego sposobu robienia rzeczy, te opcje wyświetlania umożliwiają dostosowanie strony w dowolny sposób. Dzięki tej wtyczce istnieje wiele grup pól do wyboru.

To ledwie zarysowuje powierzchnię tego, co można zrobić za pomocą tej wtyczki. Aby uzyskać pełny obraz, odwiedź witrynę Advanced Custom Fields.

Niestandardowe pola to standardowa funkcja WordPressa. Dokonując zaledwie kilku modyfikacji szablonu, możesz łatwo dodać tę funkcjonalność do swojej witryny. Te kroki obejmują podstawy i po odrobinie eksperymentów będziesz mieć jasne zrozumienie, jak zaimplementować pola niestandardowe. Planując następny projekt, pamiętaj o elastyczności, jaką oferują pola niestandardowe. Mogą pomieścić różne rodzaje treści, jednocześnie ułatwiając wprowadzanie zmian w całej witrynie.