Comment créer des boîtes méta personnalisées avec CMB2

Il y a quelques années, je cherchais un moyen d'interroger les messages et d'afficher l'emplacement où un message était écrit sur une carte Google. Au cours de mes recherches, je suis tombé sur un article de blog expliquant comment créer un localisateur de magasins à l'aide de CMB2 et de Google Maps. Depuis, CMB2 est devenu l'un de mes plugins préférés et est utilisé dans la majorité de mes projets.

Tout d'abord, qu'est-ce que CMB2 ?

Eh bien, CMB est un acronyme pour Custom Meta Boxes et selon la description sur la page du plugin, "CMB2 est une méta-boîte, des champs personnalisés et une bibliothèque de formulaires pour WordPress qui vous épateront." Il a été développé par Justin Sternberg de WebDevStudios et était dans le référentiel de plugins depuis un peu plus de deux ans. Cependant, en février dernier, les bonnes personnes du référentiel de plugins WordPress ont reconnu qu'elles avaient fait une erreur et approuvé CMB2 en tant que plugin alors qu'elles n'auraient pas dû le faire.

Vous voyez, les plugins sont généralement capables de faire quelque chose dès la sortie de la boîte ; ils ont certaines fonctionnalités inhérentes. CMB2 est en fait un framework. Comme Sternberg l'a expliqué un jour, "Il s'agit d'un framework de développeur permettant de créer facilement des formulaires et des champs dans vos thèmes et plugins." En fait, lorsque vous installez CMB2, rien ne se passe. Vous n'obtiendrez pas de page d'administration et il n'y a pas d'interface utilisateur d'administration. Pour utiliser CMB2, vous devez être capable d'écrire du code et de l'ajouter à votre fichier functions.php . Pour cette raison, je l'appelle un plugin "non-plugin".

La bonne nouvelle est que l'équipe d'approbation du plugin a accepté de le laisser dans le référentiel, vous pouvez donc continuer à le télécharger et à le mettre à jour à partir de là. Vous pouvez tout lire sur l'histoire ici sur le site de Justin.

Comment configurer CMB2

Pour commencer, vous devrez trouver le fichier example-functions.php dans le répertoire du plugin et le copier dans votre thème. Il peut être copié directement dans le dossier racine du thème, mais pour que votre projet reste bien organisé, je vous suggère de le copier dans un dossier tel que /lib/ ou /includes/ . Si vous savez déjà comment vous souhaitez utiliser CMB2, vous pouvez continuer et renommer le fichier en quelque chose de plus approprié. Par exemple, si vous souhaitez l'utiliser pour créer des champs personnalisés pour une page de témoignages, vous pouvez le nommer testimonial-functions.php .

Ensuite, vous devrez vous assurer que WordPress trouve le nouveau fichier en ajoutant une instruction require_once à votre fichier functions.php . Cela ressemblera à ceci :

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

Il est maintenant temps de vraiment creuser. Ouvrez le fichier testimonial-functions.php (ou quel que soit le nom que vous lui avez donné). Vous remarquerez que non seulement Justin a créé un exemple de presque tous les types de champs possibles, mais il a également créé des fonctions pour afficher les champs par page d'accueil, catégorie, identifiant de publication, etc.

Comment charger JavaScript dans WordPress

JavaScript est l'un des langages de codage les plus populaires. C'est incroyablement utile lors de la création d'un site Web ou d'une application, et il existe d'innombrables bibliothèques et frameworks JavaScript à exploiter, ...

Remarque : Cet article est destiné à vous présenter CMB2 ; il ne s'agira pas d'un didacticiel complet sur la façon d'en utiliser tous les aspects, et comme il s'agit d'un framework et qu'il a été développé pour aider les programmeurs, vous devez avoir une compréhension de base de PHP et du fonctionnement interne de WordPress. Si vous recherchez un plug-in Custom Meta Box doté d'une interface utilisateur d'administration, vous pouvez consulter le plug-in Advanced Custom Fields.

Revenons donc à la création de méta-boîtes personnalisées pour quelque chose de simple comme un témoignage. Tout d'abord, déterminez le nombre et les types de champs dont vous aurez besoin. Par souci de simplicité, disons que nous avons besoin de trois champs. Un pour le témoignage réel, un pour le nom de la personne qui donne le témoignage et un pour une image de la personne.

En travaillant dans le fichier testimonial-functions.php , vous devrez trouver la section pour enregistrer et ajouter votre nouvelle fonction. Ce code ressemble à ceci.

add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );

Ensuite, je vous suggère de renommer votre fonction en quelque chose de pertinent pour votre thème et votre projet.

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() {

Je vous suggère également de renommer le préfixe.

// 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.

Vous avez le choix entre plusieurs types de champs différents. je vais utiliser :

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

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

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

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

Ces trois nouveaux champs doivent être ajoutés à la nouvelle fonction, de sorte que cela ressemblerait à ceci :

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->add_field( array(
	'name' => __( 'Testimonial Author', 'cmb2' ),
	'desc' => __( 'Who is the testimonial from', 'cmb2' ),
	'id'   => $prefix . 'author', //Note, I renamed this to be more appropriate
	'type' => 'textarea_small',
	) );

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

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

Et c'est tout! Votre code final devrait ressembler à :

<?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'            => $prefix . 'metabox',
		'title'         => __( 'Homepage Custom Fields', 'cmb2' ),
		'object_types'  => array( 'page', ), // Post type
		'show_on'      => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox
		) );

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

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

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

Une fois terminé, vous devriez avoir une page qui ressemble à ceci :

L'utilisation de CMB2 est un excellent moyen de donner à votre site Web exactement ce dont vous avez besoin, car les options sont vraiment infinies. Par exemple, CMB2 peut être utilisé pour créer une page d'options de thème avec des méta-boîtes pour les logos, des URL vers des sites de médias sociaux ou des vidéos. Dans le cas de la création d'un site Web pour un client, CMB2 est parfait pour personnaliser l'administrateur afin que le client n'ait pas à formater le contenu pour qu'il corresponde aux styles de votre thème. Et une fois les données saisies, vous pouvez afficher le contenu avec tout le style déjà en place dans votre code HTML et CSS.

Une fois que vous avez maîtrisé l'ajout de champs de base avec CMB2, essayez d'ajouter les groupes de champs répétables. Avec ceux-ci, vous pourrez ajouter autant de types de contenu que vous le souhaitez, puis en utilisant une boucle pour chaque, vous pouvez commencer à créer des diaporamas ou des carrousels.

CMB2 m'a permis de faire passer mes sites WordPress au niveau supérieur et j'espère qu'il en sera de même pour vous.

Et après : plugins !

Trouver le plugin WordPress parfait qui accélère le développement du site, c'est un peu comme essayer de trouver la seule faute de frappe dans une chaîne de code - cela peut prendre un certain temps. Et de nos jours, il existe tellement de plugins pour différentes tâches qu'il peut être difficile de déterminer exactement de quelle fonctionnalité un site a (ou n'a pas) besoin, et quels plugins le fournissent de manière efficace.

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs !