WordPress Meta Boxy – szybki przewodnik

WordPress Meta Boxes to przeciągane pola, które są wyświetlane na ekranie edycji i służą do obsługi dodatkowych danych, takich jak terminy taksonomii. W tym artykule przyjrzymy się metaboksom WordPressa i zobaczymy, jak możemy tworzyć własne, dowiemy się, jak zapisać wprowadzone przez nas zmiany i jak możemy wyświetlić ich zawartość w interfejsie naszej witryny.

Zacznijmy!

Pola niestandardowe, pola meta i metadane

Istnieje wiele nieporozumień dotyczących różnicy między tymi trzema terminami. Przyjrzyjmy się wszystkim trzem, aby lepiej zrozumieć, czym one są i jak działają.

Metadane

Metadane wpisu to dodatkowe informacje o poście, które są przechowywane w tabeli postmeta bazy danych.

Każda para klucz/wartość jest uważana za „pole post”. Nie ma ograniczeń co do liczby wpisów meta, które może mieć ta tabela.

Pola niestandardowe

Istnieją pola wstępnie zdefiniowane przez WordPress, takie jak obraz funkcji, które są technicznie niestandardowymi polami. Inne można dodać za pomocą wtyczki lub niestandardowego kodu i zdefiniować przez administratora. Możesz dowiedzieć się więcej o polach niestandardowych, czytając nasz artykuł „Pierwsze kroki z polami niestandardowymi WordPressa”.

Metaboksy

Gdy otworzysz post WordPress, aby go edytować, zobaczysz, że strona jest podzielona na różne sekcje (z których wiele znajduje się na pasku bocznym po prawej stronie).

Wszystkie te sekcje są technicznie „metapudełkami”. Tak więc główny edytor postów, kontenery do wyboru kategorii, publikowania posta, dodawania tagów, dodawania polecanego obrazu to wszystkie meta pola zawierające elementy HTML, które wchodzą w interakcję z metadanymi posta. W zależności od sposobu obsługi metadanych przez witrynę, pola te pojawią się w różnych lokalizacjach na ekranie.

Jako dalszy przykład spójrzmy na pole meta Polecany obraz. Zwykle znajduje się to na prawym pasku bocznym ekranu administratora posta. Tam możesz łatwo zmienić obraz. Kiedy to robisz, w rzeczywistości aktualizujesz _thumbnail_id metadanych tego posta.

Niestandardowe pole meta, takie jak „źródło” (które dodaliśmy w naszym samouczku dotyczącym pól niestandardowych) , można zwykle znaleźć pod głównym edytorem postów.

Tworzenie MetaBoxu dla naszego niestandardowego typu postu

Teraz mamy jaśniejsze pojęcie o tym, czym dokładnie są metaboxy, możemy przejść dalej i zbudować własne niestandardowe metaboxy dla naszej witryny. Ten samouczek jest kontynuacją naszego samouczka na temat niestandardowych typów postów… jeśli chcesz śledzić go krok po kroku, musisz sprawdzić ten artykuł i utworzyć niestandardowy typ posta o nazwie „przepisy”, a następnie skonfigurować kilka „przepisów ' posty testowe z wybranym wyróżnionym obrazem.

W tym samouczku zamierzamy rozszerzyć nasz niestandardowy typ postu, dodając nowe pole meta, które będzie używane do określenia, czy przepis jest wegański, czy nie, zaznaczając pole wyboru.

Krok 1 – Zarejestruj Meta Box

Aby dodać metabox w naszym niestandardowym typie posta, używamy funkcji add_meta_box dostarczanej przez WordPress. Oto struktura funkcji wraz z argumentami, których użyjemy:

 add_meta_box( $id, $title, $callback, $screen, $context )

Dla unikalnego identyfikatora użyjemy is_vegan , a dla tytułu pola meta ciąg Is Vegan .

Funkcja zwrotna pokazująca zawartość pudełka to display_vegan_meta_box . Atrybut $screen odnosi się do ekranu administratora, na którym będzie wyświetlane metabox. W naszym przypadku jest to obszar edycji posta przepisu, więc będzie to unikalna nazwa typu posta, która jak wspomniano wcześniej to recipes . Parametr $context różni się w zależności od ekranu administratora.

Konteksty ekranu edycji posta, których tutaj użyjemy, obejmują normalne, boczne i zaawansowane jako dostępne wartości kontekstu. Użyjemy wartości bocznej, aby wyświetlić pole meta na pasku bocznym strony edycji posta.

Podsumowując, przy użyciu parametrów zdefiniowanych powyżej kod, który powinniśmy dodać w naszym my-custom-post-type.php powinien wyglądać tak:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Jak zobaczysz, użyliśmy admin_init , które jest uruchamiane przed jakimkolwiek innym podpięciem, gdy użytkownik uzyskuje dostęp do obszaru administracyjnego.

Teraz, jeśli odwiedzasz stronę edycji posta z przepisem, powinieneś zobaczyć pole na pasku bocznym. Oczywiście zawartość jest obecnie pusta.

Następnym krokiem jest wypełnienie pudełka pożądaną zawartością.

Krok 2 – Wyświetl podstawową zawartość Meta Box

Zawartość tego pudełka będzie prosta. Wszystko czego potrzebujemy to opis i pole wyboru. Jak wspomniano, zawartość jest zwracana w funkcji display_vegan_meta_box .

Proszę kontynuować i dodać poniższy fragment kodu pod funkcją my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

To, co zrobiliśmy w tej funkcji, to wypisanie pola wyboru HTML, które na razie nie jest zaznaczone. Po wprowadzeniu funkcji zapisywania wrócimy do tej sekcji kodu, aby wprowadzić więcej zmian, dzięki czemu po załadowaniu strony edycji postu pole wyboru przywróci zapisany stan pola wyboru.

Krok 3 – Zapisz wartość Meta Box w bazie danych

Aby zapisać wartość pól wejściowych metaboksu, używamy haka akcji save_post , który WordPress zapewnia w następujący sposób:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Wewnątrz funkcji update_vegan_bo x z argumentem $post_id zawarliśmy pewne warunki. Najpierw chcemy sprawdzić, czy użytkownik ma uprawnienia do edycji posta, a także upewnić się, że edytujemy typ posta z recipes .

Jeśli więc post należy do typu recipes , sprawdzamy wartość checkboxa. Pamiętaj, że domyślnie, gdy pole wyboru jest zaznaczone, przechowywana wartość bazy danych to 'tak', a jeśli nie, to wartością jest NULL. Poprawiliśmy to nieco, aby wartość „nie” została zapisana, gdy zapisujemy post z odznaczonym wegańskim polem meta.

Tutaj użyliśmy funkcji WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

W jego argumentach zdefiniowaliśmy identyfikator posta, klucz meta, wartość meta. Funkcja może jednak przyjąć jeszcze jeden argument, $prev_value
na wypadek, gdybyśmy chcieli sprawdzić poprzednią wartość przed aktualizacją i tylko jeśli jest równa, kontynuuj i aktualizuj.

Krok 4 – Popraw kod treści Meta Box

Wróćmy teraz do poprzedniej funkcji, która wyprowadza zawartość pola meta i dodajmy kilka wierszy kodu, które pobierają powiązane dane z bazy danych.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Tak więc najpierw pobieramy meta wartość is_vegan , a następnie, jeśli to konieczne, checked wartość zostanie przekazana do zmiennej $checked i zostanie odzwierciedlona w danych wyjściowych HTML.

I to wszystko. Mamy teraz działające metabox, którego można użyć do określenia, czy przepis w naszym niestandardowym poście jest wegański, czy nie.

Wniosek

Metaboksy oferują zwiększony poziom kontroli i elastyczności w postach i mogą być wykorzystywane na różne sposoby. Szczególnie miłe w nich jest to, że są oddzielone od reszty treści postu, a jednocześnie znajdują się na tym samym ekranie administratora, co znacznie ułatwia zarządzanie nimi, niż gdyby znajdowały się w innym miejscu w panelu administracyjnym WordPressa.

Podobnie jak w przypadku większości kodowania WordPress, zapoznanie się z używaniem metaboxów może zająć trochę czasu. Mamy nadzieję, że powyższe informacje wystarczą, aby zacząć. Udanego kodowania!