Crea Meta Box in WordPress

Crea Meta Box senza problemi!

Creare plugin o temi profesionali richiede sempre la necessità di dover creare anche dei pannelli interni al nostro WordPress in grado di richiedere, e salvare, le informazioni necessarie al suo corretto funzionamento. Oggi vedremo uno strumento di sviluppo che potrà aiutarti molto durante la creazione delle tue Custom Field.

Contenuti Extra

  1. Crea Meta Box senza problemi!

Se ancora non hai incontrato questo termine, all’interno di WordPress questo assume il significato di poter aggiungere qualsiasi campo input all’interno del tuo backend. Per farla semplice, hai presente quando aggiungi titolo, descrizione e focus keyword all’interno del tuo WordPress SEO by Yoast? Ecco, stai utilizzando delle meta box!

Vuoi qualche altro piccolo esempio per scatenare la tua fantasia? Potremmo parlare di aggiungere i propri pannelli per far personalizzare parti del tuo template al tuo cliente, aggiungere determinati campi soltanto su determinate pagine, CPT o anche in articoli di una determinata categoria. Fatto tutto questo ti resta soltanto il dubbio di scoprire come fare a mostrarli nel frontend della nostra piattaforma preferita.

E ecco che sono più che felice di dirti che con questa piccola serie di articoli imparerai a fare tutto questo con una libreria (o mini framework) per WordPress!

Il progetto prende il nome di Custom Metaboxes and Fields for WordPress e potrai trovare il suo sorgente all’interno della pagina dedicata su GitHub. Ti posso assicurare che ben presto imparerai ad amare questa libreria, e non soltanto perché è sviluppata e mantenuta da parte del team di WebDevStudios (che contiene alcuni tra i più grandi autori di libri per questa piattaforma) ma sopratutto perché è veramente semplice da utilizzare!

Prima di passare al codice diamo un’occhiata ai diversi tipi di campi che si possno creare:

  • Testo
    • text (optionally repeatable)
    • text small (optionally repeatable)
    • text medium (optionally repeatable)
    • text url (optionally repeatable)
    • text email (optionally repeatable)
    • text money (optionally repeatable)
    • textarea
    • textarea small
    • textarea code
  • Date
    • date picker
    • date picker (unix timestamp)
    • date time picker combo (unix timestamp)
    • date time picker with time zone combo (serialized DateTime object)
    • time zone dropdown
    • time picker
  • Comuni
    • select
    • radio
    • radio inline
    • checkbox
    • multicheck
    • Image/file upload
  • Varie
    • color picker
    • taxonomy radio
    • taxonomy select
    • WYSIWYG/TinyMCE
    • oEmbed

[elenco preso dal readme]

Posso capire che puoi essere stupefatto dal lungo elenco di possibili campi che potrai inserire, ma ti assicuro che d’ora in avanti non avrai più bisogno di scervellarti su come implementare le tue meta box, tutto quello che dovrai fare è iniziare a utilizzare questa libreria (seguendo le successive istruzioni) ed iniziare a divertirti!

  1. Scarica il progetto attraverso il link che ti ho dato (o direttamente da qua per fare prima 😉 );
  2. unzippalo e copialo all’interno del tema o plugin in una cartella separata;
  3. aggiungi il seguente codice nel tuo file .php:

Questo codice non fà altro che verificare se la libreria è già caricata ed in caso negativo, la rende disponibile. Naturalmente modificate il percorso al file init.php in modo che rispecchi il vostro template/plugin.

Detto questo vediamo un attimo come si definiscono i campi leggendo il file example-functions.php che contiene degli esempi.

Non inserisco il codice in questo articolo per non allungarlo troppo ma da come si può vedere nel file viene creata una funzion e ed associata ad un’hook.

Adesso vediamo di studiare un attimo il codice:

Questo è utile per  dare un prefisso in modo che i nostri campi non vadano in conflitto con altri, consiglio di dargli un nome specifico al vostro sito o plugin.

Viene creato un’array multidimensionale con un nome specifico che contiene un’id. Questi due valori possono essere uguali tra di loro ma non devono essere ripetuti per altri array altrimenti non verranno visualizzati.

Il titolo è il nome del box, pages specifica il post type in cui verrà mostrato questo box, in questo caso per le pagine.

Context specifica la zona del backend in cui verrà mostrato, priority è per impostare l’ordine e show_names mostrerà la label per i vari campi. La proprietà commentatata ovvero cmb_styles carica il file css nel frontend.

Adesso vediamo un’estratto riguardo i vari campi

Il nome da mostrare, la descrizione, id che deve essere univoco che usa la variabile specificata all’inizio per il prefisso ed ovviamente il tipo.

Ognuna di questi campi ha poi dei parametri diversi che potete trovare nel file di esempio o nel wiki che permettono di personalizzarlo.

Il valore repeatable aggiunerà un pulsante + e permetterà di aggiungere più campi in cascata.

In questa pagina del wiki ci sono degli esempi riguardo alla visualizzazione dei campi a seconda dell’id, del template della pagina ed altro.

Per chi vuole delle regole personalizzate in quest’altra pagina si possono trovare degli snippet che permettono di aggiungere altri tipi di verifiche. Potete trovarne anche uno mio che permetterà di mostrare il campo secondo il ruolo utente.

Vi starete chiedendo: ma adesso che ho i campi come sfrutto questi dati?

Come scritto nel wiki con la funzione get_post_meta() basta specificare l’id del campo e del post type da cui prendere le informazioni si avrà il valore:

Altro dettaglio utile è che si possono aggiungere i campi anche nel profilo utente come si può vedere qui:

Basta soltanto specificare in pages il valore user.

Nella prossima puntata vedremo come sfruttarli per utilizzarli nel frontend.

Lascia il tuo Pensiero

2 Responses to “Crea Meta Box senza problemi!”

    • Daniele Scasciafratte

      Quando ho scritto l’articolo non esisteva ancora CMB2 quindi é riferito alla prima versione.
      Le motivazioni in questo caso é principalmente una: il fatto che essendo open source e gpl posso includerlo in bundle anche con i miei plugin/temi nel repo wordpress rispetto ad altre soluzioni commerciali oltre alla vastitá di opzioni e funzionalitá.

      Rispondi