Come creare meta box personalizzati con CMB2

Pubblicato: 2016-07-25

Un paio di anni fa, stavo cercando un modo per interrogare i post e mostrare la posizione in cui era stato scritto un post su una mappa di Google. Nella mia ricerca, mi sono imbattuto in un post sul blog su come costruire un localizzatore di negozi utilizzando CMB2 e Google Maps. Da allora, CMB2 è diventato uno dei miei plugin preferiti e viene utilizzato nella maggior parte dei miei progetti.

Innanzitutto, cos'è CMB2?

Bene, CMB è l'acronimo di Custom Meta Boxes e secondo la descrizione nella pagina del plug-in, "CMB2 è una meta box, campi personalizzati e una libreria di moduli per WordPress che ti lascerà a bocca aperta". È stato sviluppato da Justin Sternberg di WebDevStudios ed era nel repository dei plugin da poco più di due anni. Tuttavia, lo scorso febbraio, le brave persone del repository di plugin di WordPress hanno riconosciuto di aver ingannato e approvato CMB2 come plugin quando non avrebbero dovuto.

Vedi, i plugin in genere sono in grado di fare qualcosa immediatamente; hanno alcune funzionalità intrinseche. CMB2 è in realtà un framework. Come ha spiegato una volta Sternberg, "È un framework per sviluppatori per creare facilmente moduli e campi per i tuoi temi e plug-in". In effetti, quando installi CMB2, non succederà nulla. Non otterrai una pagina di amministrazione e non c'è un'interfaccia utente di amministrazione. Per usare CMB2 devi essere in grado di scrivere codice e aggiungerlo al tuo file functions.php . Per questo motivo, lo chiamo plugin "non plug-in".

La buona notizia è che il team di approvazione del plugin ha accettato di lasciarlo nel repository, così puoi continuare a scaricarlo e aggiornarlo da lì. Puoi leggere tutto sulla storia qui sul sito di Justin.

Come configurare CMB2

Per iniziare, dovrai trovare il file example-functions.php dalla directory del plugin e copiarlo nel tuo tema. Può essere copiato direttamente nella cartella principale del tema, ma per mantenere il tuo progetto ben organizzato, ti suggerisco di copiarlo in una cartella come /lib/ o /includes/ . Se sai già come vorresti usare CMB2, allora potresti voler andare avanti e rinominare il file in qualcosa di più appropriato. Ad esempio, se desideri utilizzarlo per creare campi personalizzati per una pagina di testimonianze, potresti chiamarlo testimonial-functions.php .

Successivamente, dovrai assicurarti che WordPress trovi il nuovo file aggiungendo un'istruzione require_once al tuo file functions.php . Sembrerà qualcosa del genere:

require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');

Ora è il momento di scavare davvero. Apri il file testimonial-functions.php (o come lo hai chiamato). Noterai che non solo Justin ha creato un esempio di quasi ogni tipo di campo possibile, ma ha anche creato funzioni per visualizzare i campi per homepage, categoria, ID post, ecc.

Come caricare JavaScript in WordPress

JavaScript è uno dei linguaggi di codifica più popolari in circolazione. È incredibilmente utile durante la creazione di un sito Web o di un'applicazione e ci sono innumerevoli librerie e framework JavaScript a cui attingere,...

Nota: questo articolo ha lo scopo di introdurti a CMB2; non sarà un tutorial completo su come utilizzarne ogni aspetto e, poiché è un framework ed è stato sviluppato per assistere i programmatori, dovresti avere una conoscenza di base di PHP e del funzionamento interno di WordPress. Se stai cercando un plug-in Meta Box personalizzato con un'interfaccia utente amministratore, potresti voler controllare il plug-in Advanced Custom Fields.

Quindi, torniamo a costruire alcune meta box personalizzate per qualcosa di semplice come una testimonianza. Innanzitutto, determina il numero e i tipi di campi di cui avrai bisogno. Per semplicità, diciamo che abbiamo bisogno di tre campi. Uno per la testimonianza reale, uno per il nome della persona che ha dato la testimonianza e uno per l'immagine della persona.

Lavorando nel file testimonial-functions.php , dovrai trovare la sezione per la registrazione e l'aggiunta della tua nuova funzione. Quel codice assomiglia a questo.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Successivamente, ti suggerisco di rinominare la tua funzione in qualcosa di rilevante per il tuo tema e progetto.

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

Ti suggerisco anche di rinominare il prefisso.

// Start with an underscore to hide fields from custom fields list
$prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.

Ci sono diversi tipi di campo tra cui scegliere. userò:

'type' =&amp;amp;gt; 'textarea_small' // for the author field
'type'    =&amp;amp;gt; 'wysiwyg' // for the testimonial in case we want to include html
'type' =&amp;amp;gt; 'file' // for the image of the project or author

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );

Questi tre nuovi campi devono essere aggiunti alla nuova funzione, in modo che assomigli al seguente:

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

E questo è tutto! Il tuo codice finale dovrebbe essere simile a:

&amp;amp;lt;?php
/**
 * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory)
 *
 * Be sure to replace all instances of 'yourprefix_' with your project's prefix.
 * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/
 *
 * @category YourThemeOrPlugin
 * @package  Demo_CMB2
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/WebDevStudios/CMB2
 */

/**
 * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS!
 */

if ( file_exists( dirname( __FILE__ ) . '/cmb2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/cmb2/init.php';
} elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) {
	require_once dirname( __FILE__ ) . '/CMB2/init.php';
}

add_action( 'cmb2_admin_init', 'register_testimonial_metabox' );
/**
 * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook.
 */
function register_testimonial_metabox() {

 // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_'; //note, you can use anything you'd like here

/**
 * Start field groups here
 */

// This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10

$cmb_demo = new_cmb2_box( array(
		'id'            =&amp;amp;gt; $prefix . 'metabox',
		'title'         =&amp;amp;gt; __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  =&amp;amp;gt; array( 'page', ), // Post type
		'show_on'      =&amp;amp;gt; array( 'id' =&amp;amp;gt; array( 10, ) ), // Specific post IDs to display this metabox
		) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Testimonial Author', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Who is the testimonial from', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'textarea_small',
	) );

$cmb_demo-&amp;amp;gt;add_field( array(
	'name'    =&amp;amp;gt; __( 'Testimonial', 'cmb2' ),
	'desc'    =&amp;amp;gt; __( 'add the testimonial here', 'cmb2' ),
	'id'      =&amp;amp;gt; $prefix . 'testimonial', //Note, I renamed this to be more appropriate
	'type'    =&amp;amp;gt; 'wysiwyg',
	'options' =&amp;amp;gt; array( 'textarea_rows' =&amp;amp;gt; 5, ),
	) );

	$cmb_demo-&amp;amp;gt;add_field( array(
	'name' =&amp;amp;gt; __( 'Author Image', 'cmb2' ),
	'desc' =&amp;amp;gt; __( 'Upload an image or enter a URL.', 'cmb2' ),
	'id'   =&amp;amp;gt; $prefix . 'image', //Note, I renamed this to be more appropriate
	'type' =&amp;amp;gt; 'file',
	) );
}

Al termine, dovresti avere una pagina simile alla seguente:

L'uso di CMB2 è un ottimo modo per dare al tuo sito Web esattamente ciò di cui hai bisogno, poiché le opzioni sono davvero infinite. Ad esempio, CMB2 può essere utilizzato per creare una pagina di opzioni del tema con meta box per loghi, URL a siti di social media o video. Nel caso della creazione di un sito Web per un client, CMB2 è perfetto per personalizzare l'amministratore in modo che il client non debba formattare il contenuto in modo che corrisponda agli stili del tuo tema. E una volta inseriti i dati, puoi visualizzare il contenuto con tutto lo stile già presente nel tuo HTML e CSS.

Una volta che hai imparato ad aggiungere campi di base con CMB2, prova ad aggiungere i gruppi di campi ripetibili. Con questi, sarai in grado di aggiungere tutti i tipi di contenuto che desideri e quindi, utilizzando un ciclo for-ogni, puoi iniziare a creare presentazioni o caroselli.

CMB2 mi ha permesso di portare i miei siti WordPress al livello successivo e spero che farà lo stesso per te.

Cosa c'è dopo: Plugin!

Trovare il plugin perfetto per WordPress che acceleri lo sviluppo del sito è un po' come cercare di trovare il singolo errore di battitura in una stringa di codice: può volerci del tempo. E al giorno d'oggi, ci sono così tanti plug-in per attività diverse che può essere difficile individuare esattamente quali funzionalità ha (o meno) bisogno di un sito e quali plug-in le forniscono in modo efficiente.

Scarica questo ebook per un elenco dei nostri plugin più consigliati per gli sviluppatori!