Creare una custom meta box per salvare dei dati personalizzati in WORDPRESS

Quando pubblichiamo degli articoli in wordpress siamo abituati alle meta boxes, magari senza sapere che si chiamano così:
La meta box che non manca mai è quella relativa alla pubblicazione (in alto a destra) ma poi c’è anche la meta box dell’excerpt, delle versioni, dei custom fields e molte altre.
Per chi ancora non lo sapesse possiamo intervenire nella pagina della creazione degli articoli creando delle metaboxes totalmente custom con dei dati che vogliamo noi, con delle immagini o qualsiasi cosa, a tal proposito costruiremo una meta box contenente un input di testo con il metodo add_meta_box().

Come le altre modifiche al core di wordpress, anche questa andrà eseguita all’interno del file functions.php del nostro tema (o in alternativa dovrà essere sviluppata come plugin):

//verifichiamo che la funzione venga lanciata al momento appropriato
add_action('add_meta_boxes', function() {
    add_meta_box(
    'kldg_snippet_info', // id della meta box
    'Snippet info', // titolo della meta box
    'kldg_snippet_info_cb', //nome della callback function da eseguire nella metabox
    'snippet', // nome del post type al quale aggiungere la meta box
    'normal', // dove posizionare la metabox (normal, advanced o side)
    'high' // priorità della MB, dove verrà posizionata (high, core, default o low)
    );
});

Come vediamo il metodo add_meta_box() accetta una serie di parametri (consultabili dettagliatamente nel codex nella pagina di referenza): il primo è l’id univoco (ed è per questo che abbiamo impostato un prefisso) della meta box, il secondo è il titolo della meta box, il terzo è la callback function, o il suo nome, contenente ciò che verrà effettivamente visualizzato all’interno della metabox (spiegato qui di seguito), il nome del post type nel quale verrà utilizzata questa meta box, dove verrà posizionata la meta box all’interno della pagina di modifica/aggiunta dei posts ed infine la priorità cioè quanto più in alto verrà posizionata.

Fatto ciò se salviamo il file functions.php e visualizziamo la pagina di aggiunta/modifica dei post (in questo caso del nostro custom post type chiamato “snippet”) visualizzeremo il box senza alcun contenuto.
Provvediamo dunque a riempire il box:

<?php
function kldg_snippet_info_cb() {
    // recupero del informazioni del post corrente
    global $post;
    //ottengo il valore del meta box se già salvato
    $url = get_post_meta($post->ID, 'kldg_url', true);
    // proteggo la sessione aggiungendo dei campi nascosti
    wp_nonce_field(__FILE__, 'kldg_nonce');
    ?>
    <label for="kldg_url">URL di riferimento</label>
    <input type="text" name="kldg_url" id="kldg_url" class="widefat" value="<?php echo $url; ?>">
    <?php
}

Creiamo la funzione il cui nome è stato passato come parametro ad add_meta_box() che, oltre a recuperare le informazioni riguardanti il post corrente e inserire dei campi nascosti per motivi di sicurezza, altro non fa che inserire un input di testo ed una etichetta con del semplicissimo html.
Come potete notare abbiamo recuperato le informazioni riguardanti il post corrente per poter visualizzare all’interno dell’input di testo il valore che verrà salvato; già perchè provando ora a pubblicare la pagina avendo inserito qualsiasi valore all’interno della nostra meta box noteremmo che, tale valore, non viene archiviato da nessuna parte.
Salviamolo quindi:

// verifichiamo che la funzione venga lanciata solamente al momento del salvataggio
add_action('save_post', function () {
    // ottengo le informazioni relative al post
    global $post;
    // non salvare la metabox con l'autosalvataggio di wordpress
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
        return;
    }

    // check per la sicurezza:
    // verifichiamo che i campi nascosti inseriti con wp_nonce_field()
    // siano corretti, in caso contrario non effettuiamo il salvataggio
    if ($_POST && wp_verify_nonce($_POST['kldg_nonce'], __FILE__) ) {
        // verifico che sia stato inserito un valore nel form
        if ( isset($_POST['kldg_url']) ) {
            // salvo le informazioni contenute nella MB
            update_post_meta($post->ID, 'kldg_url', $_POST['kldg_url']);
        }
    }  
});

Con questo passaggio, già sufficientemente commentato, verifichiamo che la metabox non venga salvata con l’auto salvataggio ma solamente quando pubblicheremo o salveremo come bozza il post, verifichiamo i campi nascosti inseriti precedentemente (per ragioni di sicurezza) e salviamo, senza macchinose query e tabelle create ad hoc nel database, il nostro imput di testo con il metodo update_post_meta() di wordpress che richiede tre parametri: l’id del post (recuperato tramite la global $post), un id impostato al momento del dato (per convenzione utilizzeremo lo stesso del campo di testo) e il valore da associarci.

custom meta box di esempio

In questo post abbiamo utilizzato numerosi metodi di wordpress che potrebbero necessitare di qualche approfondimento:

Matteo Currò

Autore: Mi chiamo , ho 31 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.