Come creare una meta box WordPress personalizzata
Pubblicato: 2015-06-09Che cos'è una meta box personalizzata di WordPress?
Le meta box personalizzate consentono di aggiungere ulteriori informazioni a post, pagine e tipi di post personalizzati, oltre alle meta box standard che sono automaticamente disponibili per l'uso "out of the box" in WordPress, che sono incluse nel core di WordPress.
Che tu ne fossi consapevole o meno, stai usando meta box da un po' di tempo ormai. Cose come i widget della dashboard, l'editor, i campi personalizzati, l'immagine in primo piano, le categorie e i tag sono esempi di meta box.
Come creare una meta box WordPress personalizzata
Cosa succede quando devi creare un meta box aggiuntivo, magari qualcosa di un po' più personalizzato per il tuo progetto? Esistono plug-in esistenti che aiutano a creare meta box personalizzate, che possono essere ottime opzioni. Anche se decidi che questa è la strada che stai per intraprendere, è comunque importante comprendere i concetti di base di ciò che sta accadendo sotto il cofano dei meta box personalizzati.
Usa CSS Sprite per rendere reattivo il tuo logo
Ricordi gli sprite CSS? Sono un gruppo di diversi elementi grafici combinati in un unico file e li utilizzeremo per creare un logo reattivo. È una tecnica utilizzata per ottimizzare le prestazioni del browser bec...
Esamineremo i concetti a un livello molto alto quando creeremo questo meta box molto semplice. Al termine, avremo una meta box personalizzata che ci consentirà di inserire il titolo di un prodotto.
Anche se stiamo iniziando in modo semplice, tieni presente che questa idea può essere ampliata per esigenze più complesse. Ci sono molte opzioni e funzionalità aggiuntive che possono essere incluse in una meta box personalizzata. Cose come caselle di controllo, caricamento di file, ecc. Sono tutte possibili funzionalità di una meta casella personalizzata. Questo tutorial presuppone che tu abbia familiarità con i CSS, necessari per definire lo stile dei campi. Non entreremo nei dettagli per discutere lo stile, ma questo è qualcosa che può essere fatto facilmente dopo che il tuo meta box è attivo e funzionante.
Sviluppo del meta box personalizzato
Il codice personalizzato per le meta box può essere incluso in functions.php o in un plugin. Questo esempio includerà il codice necessario sotto forma di plug-in. Questo può essere copiato passo dopo passo per creare un file completo pronto per l'uso.
Il Codex è la tua guida
Il Codex sarà il tuo migliore amico, se non lo è già. Argomenti diversi hanno opzioni diverse e il Codex lo spiegherà in dettaglio. Vale la pena ricordare che il Codex è qualcosa che dovresti conoscere bene.
Prima prova localmente
Ecco l'unico disclaimer per questo tutorial. Si prega di provare prima in un ambiente di sviluppo locale. Sebbene tutti apprezziamo una piccola avventura nelle nostre vite, a nessuno piace lo schermo bianco della morte, specialmente su un sito live. Andremo passo dopo passo attraverso questo tutorial e ci sono dipendenze che si verificano mentre ci muoviamo attraverso di esso. Per questo motivo, ci sono buone probabilità che l'esecuzione di un salvataggio a metà possa causare un errore.
Passaggio uno: crea e inserisci l'intestazione nel plug-in
La creazione di un plug-in può sembrare complessa, ma non tutti i plug-in devono essere centinaia di righe. I plugin possono essere molto semplici e questo ne è un ottimo esempio. Se vai alla cartella wp-content , vedrai una cartella dei plugin . Crea una nuova cartella chiamata custom-post-meta-box con un file custom-post-meta-box.php al suo interno. Questo è il file da cui lavorerai.
Quando crei un plug-in, assicurati che queste informazioni vengano visualizzate prima di qualsiasi codice personalizzato:
<?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 */
Attiva il Plugin
Anche se non abbiamo ancora inserito alcun codice, possiamo attivare il plug-in andando su Plugin e cercando Meta Box personalizzato e scegliendo Attiva. Tieni presente che nulla cambierà ancora del tutto.
CSS opzionale
Questo è facoltativo, ma se prevedi di aggiungere alcuni CSS personalizzati, copialo nel tuo file del plugin. Assicurati che il file .css si trovi nella cartella CSS del tuo plugin.
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' );
Passaggio due: aggiungere la meta box
La funzione add_meta_box viene utilizzata per creare meta box personalizzate. Questa funzione è responsabile solo della registrazione e della visualizzazione di meta box personalizzate.
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' );
Dai un'occhiata alla dashboard, viene visualizzato il titolo "I nostri prodotti", ma non c'è un campo di testo per inserire il nostro testo.
Passaggio tre: aggiunta del campo meta box nell'amministratore
Dobbiamo assicurarci che ci sia un'etichetta e un campo per le informazioni. Usando html, questo è possibile.
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
Vedi come sono avvolte le cose in <label> ? Vediamo il testo descrittivo "Titolo del prodotto" che aiuta l'utente a capire qual è il campo e che tipo di informazioni devono essere inserite. Si noti inoltre che è presente del testo segnaposto, che aggiunge anche informazioni utili.
Il tuo input potrebbe non essere così ampio. Alcuni CSS personalizzati sono stati eseguiti in modo da poter mostrare tutto il testo del segnaposto; l'etichetta ha una larghezza del 100%.
Fase quattro: salvare i dati e l'importanza di utilizzare un nonce
Potresti aver inserito del testo nel passaggio tre e ti sei reso conto che in realtà non viene salvato o visualizzato sulla pagina. Questo passaggio è davvero il luogo in cui avviene tutta la 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;
}
Ci sono alcune cose che stanno succedendo qui. Fondamentalmente, la funzione cmb_save_meta_box_data è ciò di cui abbiamo bisogno affinché tutto il salvataggio avvenga. Ci concentreremo sulla sicurezza con un valore nonce. Questa è una misura di sicurezza che assicura che i dati da salvare provengano dalla fonte corretta. Inoltre, vogliamo assicurarci che il post non sia un salvataggio automatico o una revisione. Quindi il nonce verrà convalidato e l'utente potrà salvare.
Ora che possiamo salvare in sicurezza, ecco come appaiono le meta informazioni sulla pagina. Come puoi vedere, potrebbe essere facilmente stilizzato, ma funziona e i dati vengono salvati.
Ulteriori letture e compiti
Come puoi vedere, in pochi passaggi puoi avere una meta box personalizzata. Come la maggior parte dei progetti di sviluppo, ci sono più modi per ottenere la stessa cosa, quindi potresti trovare altri approcci per questa stessa attività.
Abbiamo dato un'occhiata ai meta box personalizzati a un livello molto alto, quindi potresti voler dare uno sguardo più approfondito a questi concetti. Se ti accorgi di avere una maggiore necessità di meta box personalizzati, ecco alcune ottime fonti per ulteriori scoperte:
- Maggiori informazioni sui nonce
- Plugin Meta Box
- Opzioni per la funzione add_meta_box