Jak stworzyć niestandardową skrzynkę WordPress?
Opublikowany: 2015-06-09Co to jest niestandardowe metabox WordPress?
Niestandardowe meta-pola umożliwiają dodawanie dodatkowych informacji do postów, stron i niestandardowych typów postów, poza standardowymi meta-polami, które są automatycznie dostępne do użycia zaraz po wyjęciu z pudełka w WordPressie, które są zawarte w rdzeniu WordPress.
Niezależnie od tego, czy byłeś tego świadomy, czy nie, od jakiegoś czasu używasz metaboxów. Rzeczy takie jak widżety pulpitu nawigacyjnego, edytor, pola niestandardowe, polecany obraz, kategorie i tagi to przykłady metapól.
Jak stworzyć niestandardową skrzynkę WordPress?
Co się stanie, gdy musisz stworzyć dodatkowe metabox, może coś bardziej niestandardowego dla twojego projektu? Istnieją istniejące wtyczki, które pomagają tworzyć niestandardowe pola meta, które mogą być świetnymi opcjami. Nawet jeśli zdecydujesz, że jest to trasa, którą zamierzasz obrać, nadal ważne jest zrozumienie podstawowych pojęć tego, co dzieje się pod maską niestandardowych metaboxów.
Użyj sprite'ów CSS, aby Twoje logo było responsywne
Pamiętasz sprite'y CSS? To grupa różnych grafik połączonych w jeden plik i użyjemy ich do stworzenia responsywnego logo. Jest to technika wykorzystywana do optymalizacji wydajności przeglądarki, ponieważ...
Będziemy omawiać koncepcje na bardzo wysokim poziomie, tworząc to bardzo proste metabox. Kiedy skończymy, otrzymamy niestandardowe pole meta, które pozwoli nam wpisać tytuł produktu.
Chociaż zaczynamy od prostych, pamiętaj, że ten pomysł można rozszerzyć o bardziej złożone potrzeby. Istnieje wiele opcji i dodatkowych funkcji, które można uwzględnić w niestandardowym polu meta. Rzeczy takie jak pola wyboru, przesyłanie plików itp. to wszystkie możliwe funkcje niestandardowego pola meta. Ten samouczek zakłada, że znasz CSS, który jest potrzebny do stylizowania pól. Nie będziemy szczegółowo omawiać stylizacji, ale jest to coś, co można łatwo zrobić po uruchomieniu metaboxa.
Opracowywanie niestandardowego metabox
Niestandardowy kod dla metaboxów może być zawarty w functions.php lub we wtyczce. Ten przykład będzie zawierał potrzebny kod w postaci wtyczki. Można to skopiować krok po kroku, aby stworzyć kompletny plik, który jest gotowy do użycia.
Kodeks jest Twoim przewodnikiem
Kodeks będzie twoim najlepszym przyjacielem, jeśli jeszcze nie jest. Różne argumenty mają różne opcje, a Kodeks wyjaśni to bardzo szczegółowo. Warto wspomnieć, że Codex to coś, co warto dobrze poznać.
Najpierw przetestuj lokalnie
Oto jedyne zastrzeżenie dotyczące tego samouczka. Spróbuj najpierw w lokalnym środowisku programistycznym. Chociaż wszyscy doceniamy małą przygodę w naszym życiu, nikt nie lubi białego ekranu śmierci, zwłaszcza na stronie na żywo. Przejdziemy krok po kroku przez ten samouczek i istnieją zależności, które pojawiają się, gdy przez niego przechodzimy. Z tego powodu istnieje duża szansa, że wykonanie zapisu w połowie może spowodować błąd.
Krok pierwszy: utwórz i wstaw nagłówek do wtyczki
Tworzenie wtyczki może wydawać się skomplikowane, ale nie wszystkie wtyczki muszą mieć setki linii. Wtyczki mogą być bardzo proste i jest to świetny przykład. Jeśli przejdziesz do folderu wp-content , zobaczysz folder wtyczek . Utwórz nowy folder o nazwie custom-post-meta-box z plikiem custom-post-meta-box.php . To jest plik, z którego będziesz pracować.
Podczas tworzenia wtyczki upewnij się, że ta informacja pojawia się przed dowolnym niestandardowym kodem:
<?php /* Plugin Name: Custom Meta Box Plugin URI: www.yourwebsite.com Description: Creates a meta box in WordPress Version: 1.0.0 Author: Your Name Author URI: www.yourwebsite.com License: GPL2 */
Aktywuj wtyczkę
Mimo że nie umieściliśmy tam jeszcze żadnego kodu, możemy aktywować wtyczkę, przechodząc do Wtyczki i szukając Custom Meta Box i wybierając Aktywuj. Proszę pamiętać, że nic się jeszcze nie zmieni.
Opcjonalny CSS
Jest to opcjonalne, ale jeśli planujesz dodać niestandardowy css, skopiuj to do pliku wtyczki. Upewnij się, że plik .css znajduje się w folderze css Twojej wtyczki.
function cmb_add_admin_styles() {
wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );
}
add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );
Krok drugi: dodanie pola meta
Funkcja add_meta_box służy do tworzenia niestandardowych pól meta. Ta funkcja jest odpowiedzialna tylko za rejestrację i wyświetlanie niestandardowych pól meta.
function cmb_add_meta_box() {
add_meta_box(
'custom_post_metabox',
'Our Products',
'cmb_display_meta_box',
'post',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'cmb_add_meta_box' );
Spójrz na pulpit, pojawia się tytuł „Nasze produkty”, ale nie ma pola tekstowego, w którym można by wpisać nasz tekst.
Krok trzeci: dodanie pola metabox w panelu administracyjnym
Musimy upewnić się, że jest etykieta i pole na informacje. Dzięki użyciu html jest to możliwe.
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
Zobacz, jak rzeczy są opakowane w <label> ? Widzimy opisowy tekst „Tytuł produktu”, który pomaga użytkownikowi zrozumieć, czym jest pole i jakiego rodzaju informacje należy wprowadzić. Pamiętaj też, że istnieje tekst zastępczy, który również zawiera przydatne informacje.
Twoje dane wejściowe mogą nie być tak szerokie. Zrobiono trochę niestandardowego css, aby można było wyświetlić cały tekst zastępczy; etykieta ma szerokość 100%.
Krok czwarty: Zapisywanie danych i znaczenie używania jednorazówki
Być może wpisałeś tekst w kroku trzecim i zdałeś sobie sprawę, że w rzeczywistości nie jest on zapisywany ani wyświetlany na stronie. Na tym etapie dzieje się cała magia.
function cmb_save_meta_box_data( $post_id ) {
if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {
if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {
$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );
update_post_meta( $post_id, 'product-title', $product_title );
}
}
}
add_action( 'save_post', 'cmb_save_meta_box_data' );
function cmb_display_product( $content ) {
if ( is_single () ){
$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );
$content .= $html;
}
return $content;
}
add_action('the_content', 'cmb_display_product');
function cmb_user_can_save( $post_id, $nonce ) {
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );
return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;
}
Dzieje się tutaj kilka rzeczy. Zasadniczo funkcja cmb_save_meta_box_data jest tym, czego potrzebujemy, aby całe zapisywanie miało miejsce. Skupimy się na bezpieczeństwie o wartości jednorazowej. Jest to środek bezpieczeństwa, który zapewnia, że zapisywane dane pochodzą z właściwego źródła. Ponadto chcemy się upewnić, że post nie jest autozapisem ani poprawką. Wtedy numer jednorazowy zostanie zweryfikowany, a użytkownik może zapisać.
Teraz, gdy możemy bezpiecznie zapisać, w ten sposób metainformacje pojawiają się na stronie. Jak widać, można go łatwo ostylizować, ale działa, a dane są zapisywane.
Dalsza lektura i praca domowa
Jak widać, w zaledwie kilku krokach możesz mieć niestandardowe pole meta. Podobnie jak większość projektów deweloperskich, istnieje wiele sposobów na osiągnięcie tego samego celu, więc możesz znaleźć inne podejścia do tego samego zadania.
Przyjrzeliśmy się niestandardowym metaboksom na bardzo wysokim poziomie, więc możesz przyjrzeć się bliżej tym koncepcjom. Jeśli okaże się, że masz większe zapotrzebowanie na niestandardowe metaboxy, oto kilka świetnych źródeł do dalszych odkryć:
- Więcej informacji o nonces
- Wtyczka Meta Box
- Opcje funkcji add_meta_box