Cum să creați o cutie meta personalizată WordPress
Publicat: 2015-06-09Ce este o metabox personalizată WordPress?
Metaboxele personalizate permit adăugarea de informații suplimentare la postări, pagini și tipuri de postări personalizate, în afară de metaboxele standard care sunt disponibile automat pentru a fi utilizate chiar „din cutie” în WordPress, care sunt incluse în nucleul WordPress.
Indiferent dacă știai sau nu, folosești metabox-uri de ceva vreme. Lucruri precum widget-urile tabloului de bord, editorul, câmpurile personalizate, imaginea prezentată, categoriile și etichetele sunt exemple de casete meta.
Cum să creați o cutie meta personalizată WordPress
Ce se întâmplă când trebuie să creați o metabox suplimentară, poate ceva mai personalizat pentru proiectul dvs.? Există pluginuri existente care ajută la crearea metabox-urilor personalizate, care pot fi opțiuni grozave. Chiar dacă decideți că acesta este traseul pe care urmează să îl urmați, este totuși important să înțelegeți conceptele de bază despre ceea ce se întâmplă sub capota metaboxelor personalizate.
Folosiți CSS Sprites pentru a face logo-ul dvs. receptiv
Îți amintești sprite-urile CSS? Sunt un grup de elemente grafice diferite combinate într-un singur fișier și le vom folosi pentru a crea o siglă receptivă. Este o tehnică folosită pentru a optimiza performanța browserului, deoarece...
Vom trece peste concepte la un nivel foarte înalt atunci când vom crea această metabox foarte simplă. Când terminăm, vom avea o casetă meta personalizată care ne va permite să introducem un titlu de produs.
Chiar dacă începem simplu, rețineți că această idee poate fi extinsă pentru nevoi mai complexe. Există o mulțime de opțiuni și caracteristici suplimentare care pot fi incluse într-o cutie meta personalizată. Lucruri precum casetele de selectare, încărcarea fișierelor etc. sunt toate caracteristicile posibile ale unei metacasete personalizate. Acest tutorial presupune că sunteți familiarizat cu CSS, care este necesar pentru stilarea câmpurilor. Nu vom intra în amănunte pentru a discuta despre stil, dar acesta este ceva care poate fi făcut cu ușurință după ce caseta meta este deschisă și funcțională.
Dezvoltarea metaboxului personalizat
Codul personalizat pentru casetele meta poate fi inclus în functions.php sau într-un plugin. Acest exemplu va include codul necesar sub forma unui plugin. Acesta poate fi copiat pas cu pas pentru a crea un fișier complet gata de utilizare.
Codexul este ghidul tău
Codexul va fi cel mai bun prieten al tău, dacă nu este deja. Argumentele diferite au opțiuni diferite, iar Codexul va explica acest lucru în detaliu. Merită menționat că Codexul este ceva pe care ar trebui să-l cunoașteți bine.
Testați mai întâi local
Iată singura declinare a răspunderii pentru acest tutorial. Vă rugăm să încercați mai întâi acest lucru într-un mediu de dezvoltare locală. Deși cu toții apreciem o mică aventură în viața noastră, nimănui nu-i place ecranul alb al morții, mai ales pe un site live. Vom parcurge pas cu pas acest tutorial și există dependențe care apar pe măsură ce trecem prin el. Din acest motiv, există șanse mari ca o salvare la jumătatea drumului să poată cauza o eroare.
Pasul unu: creați și puneți titlul în plugin
Crearea unui plugin poate suna complexă, dar nu toate pluginurile trebuie să aibă sute de linii. Pluginurile pot fi foarte simple, iar acesta este un exemplu grozav în acest sens. Dacă accesați folderul wp-content , veți vedea un folder de pluginuri . Creați un folder nou numit custom-post-meta-box cu un fișier custom-post-meta-box.php în el. Acesta este fișierul din care veți lucra.
Când creați un plugin, asigurați-vă că aceste informații apar înaintea oricărui cod personalizat:
<?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 */
Activați pluginul
Chiar dacă nu am introdus încă niciun cod acolo, putem activa pluginul mergând la Plugins și căutând Custom Meta Box și alegând Activare. Vă rugăm să rețineți că nimic nu se va schimba încă.
CSS opțional
Acest lucru este opțional, dar dacă intenționați să adăugați niște css personalizate, copiați-l în fișierul dvs. de plugin. Asigurați-vă că fișierul .css este găsit în folderul css al pluginului dvs.
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' );
Pasul doi: adăugarea casetei meta
Funcția add_meta_box este utilizată pentru a crea metabox personalizate. Această funcție este responsabilă doar pentru înregistrarea și afișarea metaboxelor personalizate.
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' );
Aruncă o privire la tabloul de bord, se afișează titlul „Produsele noastre”, dar nu există un câmp de text în care să introducem textul.
Pasul trei: adăugarea câmpului meta box în admin
Trebuie să ne asigurăm că există o etichetă și un câmp pentru informații. Prin utilizarea html, acest lucru este posibil.
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
Vedeți cum sunt împachetate lucrurile în <label> ? Ajungem să vedem textul descriptiv „Titlul produsului” care ajută utilizatorul să înțeleagă care este câmpul și ce tip de informații trebuie introduse. De asemenea, rețineți că există text substituent, care adaugă și informații utile.
Este posibil ca intrarea dvs. să nu fie la fel de largă. S-au făcut unele css personalizate, astfel încât să poată fi afișat tot textul substituent; eticheta are o lățime de 100%.
Pasul patru: Salvarea datelor și importanța utilizării unui nonce
Este posibil să fi introdus text în pasul trei și să fi realizat că de fapt nu este salvat sau afișat pe pagină. Acest pas este într-adevăr locul în care se întâmplă toată 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;
}
Sunt câteva lucruri care se întâmplă aici. Practic, funcția cmb_save_meta_box_data este ceea ce avem nevoie pentru ca toată salvarea să aibă loc. Ne vom concentra pe securitate cu o valoare nonce. Aceasta este o măsură de securitate care se asigură că datele care urmează să fie salvate provin din sursa corectă. De asemenea, vrem să ne asigurăm că postarea nu este o salvare automată sau o revizuire. Apoi nonce va fi validat și utilizatorul poate salva.
Acum că putem salva în siguranță, așa apar metainformațiile pe pagină. După cum puteți vedea, ar putea fi ușor stilat, dar funcționează și datele sunt salvate.
Lectură suplimentară și teme
După cum puteți vedea, în doar câțiva pași, puteți avea o cutie meta personalizată. La fel ca majoritatea proiectelor de dezvoltare, există mai multe moduri de a realiza același lucru, așa că este posibil să găsiți alte abordări pentru aceeași sarcină.
Am aruncat o privire la casetele meta personalizate la un nivel foarte înalt, așa că poate doriți să aruncați o privire mai profundă asupra acestor concepte. Dacă aveți o nevoie mai mare de casete meta personalizate, iată câteva surse excelente pentru descoperiri suplimentare:
- Mai multe informații despre nonces
- Pluginul Meta Box
- Opțiuni pentru funcția add_meta_box