Tworzenie niestandardowych meta boxów jest niezwykle proste, przynajmniej jest, gdy już stworzysz swój pierwszy, używając narzędzi zapieczonych w kodzie rdzenia WordPressa. W tym samouczku przeprowadzę cię przez wszystko, co musisz wiedzieć o meta boxach:

• Tworzenie meta boxów.
• Używanie meta boxów z dowolnym typem postu.
• Obsługa sprawdzania poprawności danych.
• Zapisywanie niestandardowych danych meta.
• Pobieranie niestandardowych danych meta na front-end.

Uwaga: Kiedy używam terminu „post” w tym samouczku, odnoszę się do postu dowolnego typu, a nie tylko do domyślnego typu postu blogowego dołączonego do WordPressa.

Co to jest Post Meta Box?

Post meta box jest przeciągalnym polem wyświetlanym na ekranie edycji postu. Jego celem jest umożliwienie użytkownikowi wybrania lub wprowadzenia informacji oprócz głównej treści postu. Te informacje powinny być w jakiś sposób powiązane z postem.

Generalnie, dwa typy danych są wprowadzane do meta boxów:

• Metadane (tj. pola własne),
• Taksonomia.

Oczywiście, istnieją inne możliwe zastosowania, ale te dwa są najbardziej powszechne. Dla celów tego samouczka, będziesz się uczył jak rozwijać meta boxy, które obsługują niestandardowe metadane postów.

Co to są metadane postów?

Metadane postów to dane, które są zapisane w tabeli wp_postmeta w bazie danych. Każdy wpis jest zapisany jako cztery pola w tej tabeli:

• meta_id: Unikalny identyfikator dla tych konkretnych metadanych.
• post_id: Identyfikator postu, do którego dołączone są te metadane.
• meta_key: Klucz używany do identyfikacji danych (będziesz często z tym pracował).
• meta_value: Wartość metadanych.

Na poniższym zrzucie ekranu możesz zobaczyć, jak to wygląda w bazie danych.

Gdy dojdziesz do sedna, metadane to po prostu pary klucz / wartość zapisane dla konkretnego postu. Pozwala to na dodawanie wszelkiego rodzaju niestandardowych danych do twoich postów. Jest to szczególnie przydatne, gdy tworzysz niestandardowe typy postów.

Jedynym ograniczeniem jest twoja wyobraźnia.

Uwaga: Jedną rzeczą, o której należy pamiętać, jest to, że pojedynczy klucz meta może mieć wiele wartości meta. Nie jest to częste zastosowanie, ale może być niezwykle potężne.

Working With Post Metadata

Do tej pory, prawdopodobnie swędzi Cię, aby zbudować kilka niestandardowych meta boxów. Jednakże, aby zrozumieć jak niestandardowe meta boxy są użyteczne, musisz zrozumieć jak dodawać, aktualizować, usuwać i uzyskiwać metadane postu.

Mógłbym napisać książkę na temat różnych sposobów używania metadanych, ale to nie jest główny cel tego poradnika. Możesz użyć następujących linków, aby dowiedzieć się, jak działają funkcje meta postu w WordPressie, jeśli nie jesteś z nimi zaznajomiony.

• add_post_meta()”): Dodaje metadane postu.
• update_post_meta()”): Aktualizuje metadane postu.
• delete_post_meta()”): Usuwa metadane postu.
• get_post_meta()”): Pobiera metadane postu.

Reszta tego poradnika zakłada, że jesteś przynajmniej zaznajomiony z działaniem tych funkcji.

Ustawienia

Przed zbudowaniem meta-boksów, musisz mieć jakieś pomysły na temat typu metadanych, których chcesz użyć. Ten samouczek skupi się na budowaniu meta boxa, który zapisuje niestandardową klasę CSS, która może być używana do stylizacji postów.

Zacznę od nauczenia cię tworzenia niestandardowego kodu, który robi kilka bardzo prostych rzeczy:

• Dodaje pole wejściowe do dodania niestandardowej klasy postu (meta box).
• Zapisuje klasę postu dla klucza meta smashing_post_class.
• Filtruje hak post_class, aby dodać swoją niestandardową klasę postu.

Możesz robić o wiele bardziej złożone rzeczy z meta boxami, ale musisz najpierw nauczyć się podstaw.

Wszystkie kody PHP w poniższych sekcjach trafiają do twojego niestandardowego pliku wtyczki lub pliku functions.php twojego motywu.

Building A Custom Post Meta Box

Teraz, gdy wiesz, co budujesz, czas zacząć nurkować w jakiś kod. Pierwsze dwa fragmenty kodu w tej części samouczka dotyczą głównie ustawienia wszystkiego dla funkcjonalności meta boxu.

Ponieważ chcesz, aby twój post meta box pojawił się tylko na ekranie edytora postów w administracji, użyjesz haków load-post.php i load-post-new.php do zainicjowania kodu meta boxu.

/* Fire our meta box setup function on the post editor screen. */add_action( 'load-post.php', 'smashing_post_meta_boxes_setup' );add_action( 'load-post-new.php', 'smashing_post_meta_boxes_setup' );

Większość programistów WordPressa powinna być zaznajomiona z tym, jak działają haki, więc nie powinno to być dla ciebie niczym nowym. Powyższy kod mówi WordPressowi, że chcesz odpalić funkcję smashing_post_meta_boxes_setup na ekranie edytora postów. Następnym krokiem jest stworzenie tej funkcji.

Poniższy fragment kodu doda twoją funkcję tworzenia meta boxów do haka add_meta_boxes. WordPress zapewnia ten hak do dodawania meta-boksów.

/* Meta box setup function. */function smashing_post_meta_boxes_setup() { /* Add meta boxes on the 'add_meta_boxes' hook. */ add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' );}

Teraz, możesz przejść do zabawnych rzeczy.

W powyższym wycinku kodu, dodałeś funkcję smashing_add_post_meta_boxes() do haka add_meta_boxes. Celem tej funkcji powinno być dodawanie meta boxów postów.

W następnym przykładzie utworzysz pojedynczy meta box za pomocą funkcji add_meta_box() WordPressa. Możesz jednak dodać tyle meta-boksów, ile chcesz w tym momencie podczas tworzenia własnych projektów.

Zanim przejdziemy dalej, przyjrzyjmy się funkcji add_meta_box():

add_meta_box( $id, $title, $callback, $page, $context = 'advanced', $priority = 'default', $callback_args = null );

• $id: Jest to unikalny identyfikator przypisany do twojego meta-boksu. Powinien mieć unikalny prefiks i być poprawnym HTML.
• $title: Tytuł meta boxa. Pamiętaj o internacjonalizacji tego dla tłumaczy.
• $callback: Funkcja wywołania zwrotnego, która wyświetla dane wyjściowe twojego meta-boksu.
• $screen: Ekran lub ekrany, na których ma być pokazany boks (takie jak typ postu, link, lub comment). Akceptuje pojedynczy identyfikator ekranu, obiekt WP_Screen lub tablicę identyfikatorów ekranów. Domyślnie jest to bieżący ekran.
• $context: W którym miejscu na stronie powinien być wyświetlany meta box. Dostępne opcje to normal, advanced i side.
• $priority: Jak wysoki/niski priorytet powinien mieć meta-boks. Dostępne opcje to default, core, high i low.
• $callback_args: Tablica niestandardowych argumentów, które możesz przekazać do swojej funkcji $callback jako drugi parametr.

Poniższy kod doda pole meta klasy postu do ekranu edytora postów.

/* Create one or more meta boxes to be displayed on the post editor screen. */function smashing_add_post_meta_boxes() { add_meta_box( 'smashing-post-class', // Unique ID esc_html__( 'Post Class', 'example' ), // Title 'smashing_post_class_meta_box', // Callback function 'post', // Admin page (or post type) 'side', // Context 'default' // Priority );}

Wciąż jednak musisz wyświetlić HTML pola meta. W tym miejscu pojawia się funkcja smashing_post_class_meta_box() ($callback parametr powyżej).

/* Display the post meta box. */function smashing_post_class_meta_box( $post ) { ?> <?php wp_nonce_field( basename( __FILE__ ), 'smashing_post_class_nonce' ); ?> <p> <label for="smashing-post-class"><?php _e( "Add a custom CSS class, which will be applied to WordPress' post class.", 'example' ); ?></label> <br /> <input class="widefat" type="text" name="smashing-post-class" value="<?php echo esc_attr( get_post_meta( $post->ID, 'smashing_post_class', true ) ); ?>" size="30" /> </p><?php }

To, co robi powyższa funkcja, to wyświetlenie wyjścia HTML dla twojego meta-boksu. Wyświetla ukryte wejście nonce (możesz przeczytać więcej o nonces na WordPress Codex). Następnie wyświetla element wejściowy do dodania niestandardowej klasy postu, a także wyprowadza niestandardową klasę, jeśli taka została wprowadzona.

W tym momencie powinieneś mieć ładnie wyglądający meta box na ekranie edycji postu. Powinno ono wyglądać jak na poniższym zrzucie ekranu.

Meta box nie robi jeszcze nic. Na przykład, nie zapisze twojej niestandardowej klasy postu. O tym właśnie jest następna część tego poradnika.

Zapisywanie danych meta boxu

Teraz, gdy nauczyłeś się jak tworzyć meta box, nadszedł czas, aby dowiedzieć się jak zapisać metadane postu.

Pamiętasz funkcję smashing_post_meta_boxes_setup(), którą stworzyłeś wcześniej? Musisz ją trochę zmodyfikować. Będziesz chciał dodać do niej następujący kod.

/* Save post meta on the 'save_post' hook. */add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );

Więc, ta funkcja będzie w rzeczywistości wyglądać tak:

/* Meta box setup function. */function smashing_post_meta_boxes_setup() { /* Add meta boxes on the 'add_meta_boxes' hook. */ add_action( 'add_meta_boxes', 'smashing_add_post_meta_boxes' ); /* Save post meta on the 'save_post' hook. */ add_action( 'save_post', 'smashing_save_post_class_meta', 10, 2 );}

Nowy kod, który dodajesz, mówi WordPressowi, że chcesz uruchomić niestandardową funkcję na haku save_post. Ta funkcja zapisze, zaktualizuje lub usunie twoje niestandardowe meta postu.

Podczas zapisywania meta postu, twoja funkcja musi przejść przez kilka procesów:

• Weryfikuj nonce ustawione w funkcji meta box.
• Sprawdź, czy bieżący użytkownik ma uprawnienia do edycji postu.
• Pobierz umieszczoną wartość wejściową z $_POST.
• Decyduj, czy meta powinna zostać dodana, zaktualizowana lub usunięta w oparciu o umieszczoną wartość i starą wartość.

Pozostawiłem poniższą funkcję nieco ogólną, abyś miał trochę elastyczności podczas tworzenia swoich własnych meta boxów. Jest to ostatni fragment kodu, który będzie potrzebny do zapisania metadanych dla twojego niestandardowego meta boxu klasy postu.

/* Save the meta box's post metadata. */function smashing_save_post_class_meta( $post_id, $post ) { /* Verify the nonce before proceeding. */ if ( !isset( $_POST ) || !wp_verify_nonce( $_POST, basename( __FILE__ ) ) ) return $post_id; /* Get the post type object. */ $post_type = get_post_type_object( $post->post_type ); /* Check if the current user has permission to edit the post. */ if ( !current_user_can( $post_type->cap->edit_post, $post_id ) ) return $post_id; /* Get the posted data and sanitize it for use as an HTML class. */ $new_meta_value = ( isset( $_POST ) ? sanitize_html_class( $_POST ) : ' ); /* Get the meta key. */ $meta_key = 'smashing_post_class'; /* Get the meta value of the custom field key. */ $meta_value = get_post_meta( $post_id, $meta_key, true ); /* If a new meta value was added and there was no previous value, add it. */ if ( $new_meta_value && ' == $meta_value ) add_post_meta( $post_id, $meta_key, $new_meta_value, true ); /* If the new meta value does not match the old value, update it. */ elseif ( $new_meta_value && $new_meta_value != $meta_value ) update_post_meta( $post_id, $meta_key, $new_meta_value ); /* If there is no new meta value but an old value exists, delete it. */ elseif ( ' == $new_meta_value && $meta_value ) delete_post_meta( $post_id, $meta_key, $meta_value );}

W tym momencie możesz zapisać, zaktualizować lub usunąć dane w meta boxie „Post Class”, który utworzyłeś z ekranu edytora postów.

Używanie metadanych z meta boxów

Masz więc niestandardowe meta boxy postów, które działają, ale nadal musisz coś zrobić z metadanymi, które zapisuje. To jest punkt tworzenia meta boxów. Co zrobić z metadanymi będzie się zmieniać w zależności od projektu, więc nie jest to coś, na co mogę odpowiedzieć za Ciebie. Jednak dowiesz się, jak używać metadanych z utworzonego meta boxu.

Ponieważ budujesz meta box, który pozwala użytkownikowi wprowadzić niestandardową klasę postu, będziesz musiał przefiltrować hak WordPressa post_class, aby niestandardowa klasa pojawiła się obok innych klas postów.

Pamiętasz funkcję get_post_meta() z wcześniejszego kursu? Będziesz jej również potrzebował.

Poniższy kod dodaje niestandardową klasę postu (jeśli taka jest podana) z twojego niestandardowego meta box.

/* Filter the post class hook with our custom post class function. */add_filter( 'post_class', 'smashing_post_class' );function smashing_post_class( $classes ) { /* Get the current post ID. */ $post_id = get_the_ID(); /* If we have a post ID, proceed. */ if ( !empty( $post_id ) ) { /* Get the custom post class. */ $post_class = get_post_meta( $post_id, 'smashing_post_class', true ); /* If a post class was input, sanitize it and add it to the post class array. */ if ( !empty( $post_class ) ) $classes = sanitize_html_class( $post_class ); } return $classes;}

Jeśli spojrzysz na kod źródłowy strony, na której ten post jest wyświetlany na front-end witryny, zobaczysz coś takiego jak poniższy zrzut ekranu.

Pretty cool, prawda? Możesz użyć tej niestandardowej klasy do stylizacji postów, jakkolwiek chcesz w arkuszu stylów swojego motywu.

Bezpieczeństwo

Jedną z rzeczy, o których powinieneś pamiętać podczas zapisywania danych, jest bezpieczeństwo. Bezpieczeństwo to długi temat i jest poza zakresem tego artykułu. Pomyślałem jednak, że najlepiej będzie przynajmniej przypomnieć ci, abyś pamiętał o bezpieczeństwie.

Podałem ci już link wyjaśniający nonces wcześniej w tym tutorialu. Innym zasobem, który chcę Ci udostępnić jest przewodnik WordPress Codex dotyczący sprawdzania poprawności danych. Ta dokumentacja będzie twoim najlepszym przyjacielem podczas nauki jak zapisywać metadane postów i dostarczy ci narzędzi, których będziesz potrzebował do utrzymania bezpieczeństwa twoich wtyczek/tematów.

Punkty bonusowe dla każdego, kto potrafi wymienić wszystkie środki bezpieczeństwa użyte w tym poradniku.

Stwórz niestandardowy Meta Box

Gdy już skopiowałeś, wkleiłeś i przetestowałeś kawałki kodu z tego poradnika, zachęcam cię do wypróbowania czegoś jeszcze bardziej złożonego. Jeśli naprawdę chcesz zobaczyć jak potężne mogą być meta boxy i metadane postów, spróbuj zrobić coś z jednym kluczem meta i wieloma wartościami meta dla tego klucza (jest to trudne).

Mam nadzieję, że podobał ci się ten tutorial. Zapraszam do zadawania pytań na temat tworzenia meta boxów w komentarzach poniżej.

Dalsza lektura

• Extend WordPress With Custom Fields
• Better Image Management With WordPress
• WordPress Power Tips For Template Developers And Consultants
• How To Integrate Facebook With WordPress

.

• A Detailed Guide To WordPress Custom Page Templates
• Building A Custom Archive Page For WordPress
• How To Use Autoloading And A Plugin Container In Plugins
• The Complete Guide To Custom Post Types

(al, il)