Pierwsze kroki z niestandardowymi polami WordPress

Pola niestandardowe WordPress to naprawdę świetna funkcja, która często jest zaniedbywana. Umożliwiają dodawanie „metadanych” do obszaru strony lub posta, który jest powtarzany na wszystkich stronach lub postach. Może to zaoszczędzić mnóstwo czasu, jeśli masz witrynę, w której chcesz publikować te same informacje na wielu stronach.

Na przykład spójrz na zwykły wpis na blogu w swojej witrynie WordPress. Szanse są takie, że gdzieś na stronie zobaczysz nazwisko autora i datę, która pokazuje, kiedy artykuł został opublikowany. To są metadane i pojawią się w każdym poście w Twojej witrynie.

Jak więc dodać własne metadane do swoich postów lub stron? To proste… korzystając z niestandardowego pola WordPress!

Oczywiście możesz dodać te informacje w każdym poście ręcznie za pomocą edytora stron/postów, ale jest to zarówno czasochłonne, jak i zazwyczaj wymaga starannego formatowania, jeśli chcesz upewnić się, że wszystkie posty wyglądają tak samo. Jeśli publikujesz dużo treści, każdorazowe robienie tego może być męczące.

Edytory stron i postów WordPress oferują dużą funkcjonalność i elastyczność od razu po wyjęciu z pudełka, jeśli chodzi o podstawową treść, która pojawia się na stronie lub poście. Ale czy wiesz, że WordPress umożliwia użytkownikom dodawanie treści, które znajdują się „poza” głównym postem lub treścią strony? W tym artykule przyspieszymy korzystanie z niestandardowych pól WordPress, które pomogą Ci lepiej organizować posty, a także dodadzą przydatne informacje dla czytelników w świetnie wyglądającym formacie.

Zacznijmy!

Co to są pola niestandardowe i metadane?

Treści, takie jak posty, strony, użytkownicy, komentarze i niestandardowe typy postów, zawierają metadane przechowywane w Twojej bazie danych w tabeli postmeta w parze klucz/wartość.

Informacje, które zwykle widzisz pod tytułem postu lub strony, takie jak nazwa administratora, data lub licznik komentarzy, są zawarte w metadanych posta.

Pole niestandardowe to dodatkowe pole, w którym możesz dodać dodatkowe informacje do swojego posta, a także stanowi część metadanych posta.

Pola niestandardowe dotyczą stron, wpisów lub niestandardowych typów wpisów i składają się również z par klucz/wartość. Klucz to „nazwa” elementu metadanych, a wartość to dane, które są powiązane z kluczem i mogą się różnić dla każdego posta.

W WordPressie możesz dodawać pola niestandardowe, korzystając z wbudowanej funkcji pól niestandardowych lub możesz pójść o krok dalej, korzystając z wtyczki pól niestandardowych, która jeszcze bardziej zwiększy kontrolę nad polem niestandardowym. Przyjrzymy się obu opcjom w tym artykule.

Dodaj pola niestandardowe za pomocą pól niestandardowych WordPress

Wbudowane ustawienia pól niestandardowych WordPress są domyślnie ukryte, co wyjaśnia, dlaczego możesz nie wiedzieć, że ta funkcja istnieje. Aby z niego skorzystać, najpierw musimy go włączyć.

Jeśli używasz klasycznego edytora WordPress (tj. nie Gutenberga), otwórz nowy post i przejdź na początek tego posta. Po prawej stronie zobaczysz pole z napisem „Opcje ekranu”. Kliknij to, a pojawi się menu rozwijane z polami wyboru. W tym powinieneś zobaczyć taki, który mówi „Pola niestandardowe”. Zaznacz to, aby je włączyć.

Jeśli używasz Gutenberga, kliknij ikonę „trzy kropki”, która pojawia się w prawym górnym rogu posta. Pojawi się menu, a na dole tego menu powinno widnieć „Opcje”. Kliknij to, a pojawi się nowe menu podręczne z polami wyboru. Na tej liście powinieneś zobaczyć takie, które mówi „Pola niestandardowe”. Zaznacz to pole, a następnie zamknij wyskakujące menu.

Kolejne kroki – dodawanie własnych pól

Dodanie własnych pól jest całkiem proste. Po włączeniu ich, jak opisano powyżej, przejdź na dół swojego posta i powinieneś zobaczyć nową sekcję o nazwie (zgadłeś) „Pola niestandardowe”.

Zobaczysz dwa pola w sekcji Pola niestandardowe: „Nazwa” i „Wartość”. Pole Nazwa ma kilka wstępnie wypełnionych wartości domyślnych, które odnoszą się do istniejących pól, które zostały dodane do Twojej witryny WordPress. W naszym przypadku chcemy dodać własne nowe pole. Aby to zrobić, kliknij tekst „Wprowadź nowy” znajdujący się pod polem Nazwa.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

W tym przykładzie chcemy utworzyć link do zewnętrznej strony internetowej, który został wykorzystany jako źródło napisanego przez nas artykułu. Nazwiemy to pole „Źródło”. Kliknij tekst „Wprowadź nowy”, a następnie wpisz „Źródło”, a następnie adres URL do wybranej witryny w sekcji Wartość. Będzie to wyglądać tak:

Następnym razem nie będziesz musiał klikać tekstu „Wprowadź nowy” i ręcznie wpisywać „Źródło”. Pojawi się teraz na rozwijanej liście wartości.

Jeśli masz dostęp do swojej bazy danych (np. przez phpMyAdmin), możesz otworzyć tabelę postmeta, przefiltrować tabelę według edytowanego identyfikatora posta i powinieneś zobaczyć nowe niestandardowe pole z jego wartością.

Teraz, gdy potwierdziliśmy, że niestandardowe pole jest prawidłowo przechowywane dla postu, zobaczmy, jak możemy je wyświetlić na początku naszego postu, gdzie odwiedzający naszą witrynę będą mogli je zobaczyć!

Wyświetlanie wartości pól niestandardowych

Aby wyświetlić naszą nową wartość pola niestandardowego w naszym poście, musimy dodać kod do naszego pliku szablonu pojedynczego postu. Zwykle można to znaleźć w pliku singular.php , który znajduje się w głównym folderze motywu. W naszym przypadku (motyw Twenty Twenty) znajduje się on w pliku /wp-content/themes/twentytwenty/template-parts/content.php .

Wykorzystamy podstawową funkcję get_post_meta , którą WordPress zapewnia do pobierania pola meta postu z bazy danych. Struktura funkcji jest następująca:

 get_post_meta( $post_id, $key, $single )

Jedynym wymaganym argumentem jest $post_id . Argument $key jest metakluczem do pobrania, a argument $single określa, czy zwracana jest pojedyncza wartość i jest bezużyteczny, jeśli $key nie jest w ogóle zdefiniowany.

Jeśli zadeklarowany jest tylko $post_id , wynikiem będzie tablica zawierająca wszystkie klucze związane z konkretnym postem. Tak więc, jeśli po prostu wstawisz get_post_meta( $post_id ) , otrzymasz coś takiego:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Jeśli użyjesz get_post_meta( $post_id, 'filed1_key' ) , otrzymasz coś takiego jak Array ( [0] => value1 ) , a jeśli użyjesz get_post_meta( $post_id, 'filed1_key', true ) , tak jak to robiliśmy wcześniej, otrzymasz po prostu value1 .

Ponadto w niektórych postach możesz nie chcieć definiować pola źródłowego, więc musimy uwzględnić w kodzie sprawdzenie, czy pole istnieje dla postu.

Mając to wszystko na uwadze, kod, którego potrzebujemy, wygląda następująco:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Kod wstawimy zaraz za treścią posta, aby wewnątrz elementu div HTML z klasą „entry-content” kod wyglądał tak:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Zobaczmy teraz, co osiągnęliśmy, otwierając nowy post i przyglądając się, jak ta treść będzie wyglądać w interfejsie użytkownika.

Przypominamy, że jeśli masz trudności ze znalezieniem pliku szablonu odpowiadającego widokowi pojedynczego posta, możesz zapoznać się z diagramem hierarchii szablonów WordPress.

Oczywiście będzie trochę pracy do wykonania w celu nadania stylu tego wyjścia. To wykracza poza zakres tego artykułu, ale omówimy coś w przyszłym poście.

Dodawanie niestandardowych pól za pomocą wtyczki

Wtyczka Advanced Custom Fields to jedna z najlepszych dostępnych wtyczek, która umożliwia szybkie dodawanie niestandardowych pól do witryny WordPress i zapewnia dalszą kontrolę nad niestandardowymi danymi pól. Korzystając z jego kreatora, możesz łatwo tworzyć niestandardowe pola, które można następnie dodawać do swoich postów, użytkowników, taksonomii, mediów, komentarzy, a nawet niestandardowych stron opcji.

Twórz własne pola za pomocą ACF

Po zainstalowaniu i aktywacji wtyczki ACF przejdź do „Pola niestandardowe > Grupy pól”, gdzie wyświetlane są zarejestrowane pola.

Naciśnij przycisk „Dodaj nowe”, aby rozpocząć tworzenie pól. Można je następnie dodać do grup.

Dostępnych jest mnóstwo opcji, które poprawią zachowanie pól niestandardowych. Oprócz podstawowej konfiguracji, która obejmuje etykietę i nazwę pola, możesz również zdefiniować typ pola, określić, czy pole jest wymagane, zmienić wartość domyślną, tekst zastępczy i oczywiście wybrać typy postów, w których będzie ono umieszczane przez używając argumentu logicznego.

Dostępnych jest również kilka dodatkowych ustawień, które pozwalają zmienić wygląd pola (bardzo pomocne) oraz lista pól wyboru, które pozwalają określić, co powinno być ukryte na odpowiednich ekranach edycji.

Niesamowite, prawda?

Ponadto w menu Narzędzia ACF możesz eksportować lub importować grupy pól w formacie JSON, aby przyspieszyć działanie, jeśli zostały już utworzone w innym miejscu.

Praktyczny przykład z wykorzystaniem zaawansowanych pól niestandardowych

Załóżmy, że utworzyliśmy niestandardowy typ postów o nazwie „Książki” i chcielibyśmy dodać kilka niestandardowych pól do każdego posta w książce, np. Gatunek, Autor książki i Rok wydania. Pierwszą rzeczą, którą powinniśmy zrobić, jest utworzenie grupy pól i pól zawierających w ten sposób:

Jak widać, nie wszystkie pola mają ten sam typ.

• Pole Autor to proste pole tekstowe, w którym będziemy wpisywać pełne imię i nazwisko autora.
• Pole Gatunek jest polem wyboru i musi akceptować wiele wartości. Książka może być związana z więcej niż jednym gatunkiem.
• Wstępnie zdefiniowane wybory gatunku należy wstawić w polu Wybory, każdy w osobnym wierszu.

Pole okładki powinno być również polem wyboru pojedynczej wartości ze wstępnie zdefiniowanymi opcjami.

Teraz chodźmy i edytujmy Book Post. Pola będą ładnie pogrupowane na pasku bocznym.

Jeśli chcesz zmienić pozycję grupy pól, przejdź do odpowiednich ustawień:

Wypełnij pola, a także treść testową artykułu i zaktualizuj post. W tym momencie, jeśli odwiedzisz przedni widok Book Post, zauważysz, że nadal nic nie jest wyświetlane w odniesieniu do naszych niestandardowych pól.

Wyświetl swoje niestandardowe pola ACF

Możesz łatwo wyświetlić niestandardowe pola w szablonie motywu, korzystając z przyjaznych funkcji wtyczki ACF. Dwa z nich to:

• get_field() – Zwraca wartość określonego pola.
• the_field() – Wyświetla wartość określonego pola.

Są to najczęściej używane funkcje we wtyczce ACF. Jeśli chcesz zobaczyć pełną listę funkcji wtyczek, możesz odwiedzić oficjalną dokumentację, aby dowiedzieć się więcej.

Tak więc, aby wyprowadzić własne pole niestandardowe w szablonie widoku posta, musisz dodać trochę kodu, podobnie jak w przypadku korzystania z domyślnych pól niestandardowych WordPress. Jednak tym razem będziemy używać funkcji wtyczki ACF. Ponieważ używamy motywu Twenty Twenty, musimy edytować plik content.php w folderze dwadzieściatwenty twentytwenty/template-parts/ . Zaraz po zamknięciu sekcji wewnętrznej dodaliśmy następujące wiersze:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

W widoku z przodu możemy teraz zobaczyć pola niestandardowe.

Jednak pole gatunku nie jest wyświetlane poprawnie. Dzieje się tak, ponieważ zawiera wiele wartości, dlatego funkcja get_field zwraca tablicę. Aby to naprawić, będziemy musieli przekonwertować tablicę na serię jej wartości. Jest to łatwe w PHP dzięki funkcji implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Jeśli chcesz selektywnie wyświetlać niektóre pola, ale nie wszystkie w niektórych postach, możesz to zrobić za pomocą niektórych skrótów ACF. Aby to zrobić, otwórz swój post, a następnie dodaj jeden krótki kod Gutenberga dla każdego pola i umieść krótki kod w następujący sposób:

 [acf field="MY_CUSTOM_FIELD"/]

Zastąp MY_CUSTOM_FIELD nazwą pola i to powinno działać idealnie.

Jak widać, korzystanie z wtyczki Advanced Custom Fields daje nam fantastyczną elastyczność w tworzeniu niestandardowych pól i wyświetlaniu ich tam, gdzie chcemy.

Wniosek

Programiści z całej branży korzystają z funkcji pól niestandardowych w systemie WordPress, aby zapewnić lepszą strukturę i czytelność ich witryn internetowych. To kolejna wyróżniająca się funkcja WordPress, która po raz kolejny pomaga wyjaśnić, dlaczego WordPress jest tak popularny. Mamy nadzieję, że ten artykuł dostarczył Ci informacji, których potrzebujesz, aby dodać własne pola niestandardowe do swojej witryny. Miłego rozwoju!

Zobacz też

Tabele listy administratorów WordPress: Dodaj niestandardowe filtry
Dodawanie niestandardowych pól do pozycji menu WordPress