skip to Main Content

Comment créer des boites méta sur WordPress pour les débutants

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Les botes Meta sont une caractéristique utile pour WordPress qui vous permet d’ajouter des données complètement personnalisées à un article ou une page sur WordPress.

Disons, par exemple, vous créez un site web pour un client qui a besoin d’afficher l’information nutritionnelle aux côtés des produits dans un magasin. Vous pouvez ajouter un nombre illimité de boîtes de méta personnalisées à l’écran d’édition des articles et des pages sur WordPress, et même pour les formats de publications personnalisé.

Habituellement, les boites méta personnalisés contiennent des données et des champs de formulaire, qui permettent aux administrateurs d’ajouter / modifier / ou de supprimer les méta-données.

Dans ce tutoriel, je vais vous montrer comment ajouter vos propres boîtes de méta personnalisés à un écran d’édition d’un format de publication. Nous explorerons comment ajouter et gérer les champs de texte, comment ajouter des boutons radio et des cases à cocher qui donneront aux utilisateurs un contrôle plus avancé sur les métas données du format de publication.

Qu’est-ce qu’une boite méta ou Meta Box ?

Une boîte méta est une section déplaçable affiché dans l’écran l’écran d’édition du contenu sur WordPress. Les utilisateurs peuvent sélectionner ou saisir des informations supplémentaires dans les boites méta en plus du contenu de l’article.

Il existe deux types de données que vous pouvez entrer dans les boîtes méta: les métadonnées (c’est à dire les champs personnalisés), et les termes de taxonomie.

Comment ajouter une zone meta

WordPress dispose d’une fonction appelé  add_meta_box dans le but précis d’ajouter une nouvelle boite méta .  Add_meta_box doit être appelée à l’intérieur d’une fonction de rappel qui doit être exécuté lorsque boîtes meta sont en cours de chargement. Cette tâche peut être effectuée par le « hook » add_meta_box_{format de publication}, comme suggéré dans le Codex .

Cela étant dit, nous allons ajouter le code suivant dans le fichier principal d’un plugin ou d’un thème sur le fichier function.php (en gardant à l’esprit qu’il est toujours préférable de créer un thème enfant  au lieu de modifier le fichier functions.php d’un thème):

<?php
/ **
 * Ajouter méta boîte
 *
* param Poste $ post L'objet de poste
* link Https://codex.wordpress.org/Plugin_API/Action_Reference/add_meta_boxes
 * /
fonction  food_add_meta_boxes ( $post ) {
	add_meta_box ( ' food_meta_box ' , __ ( « valeur nutritive » , « food_example_plugin ' ), ' food_build_meta_box ' , 'food' , 'side' , 'low' );
}
add_action ( ' add_meta_boxes_food ' , ' food_add_meta_boxes ' );

Ceci est notre première boîte de méta personnalisé. Dans le code ci-dessus, nous passons six arguments à la fonction add_meta_box : une pièce d’identité pour la boîte méta, un titre, une fonction de rappel, le slug du type de pubication personnalisé ( food), le contexte ( side ) et la priorité ( low) .

La fonction de rappel permet d’imprimer le balisage HTML dans la boîte méta, et nous allons le définir comme suit:

<? Php
/ **
 * Construire boîte champ de méta personnalisé
 *
* param $post post L'objet de poste
 * /
fonction food_build_meta_box ( $post ) {
 // Notre code ici
}

Aucun contenu HTML n’est encore imprimé, mais la boîte méta est déjà en place. Donc, nous allons aller plus en détails.

empty_custom_meta_box

Tout d’abord, nous devrions envisager de garder les choses en toute sécurité. Nous avons besoin d’appeler la fonction wp_nonce_field , qui produit un champ nonce , le but étant de faire en sorte que la demande du formulaire provient du site actuel. Donc, nous allons ajouter la ligne de code suivant à la fonction de rappel :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

<?php
wp_nonce_field ( basename ( __FILE__ ), ‘ food_meta_box_nonce ‘ );

Ici, nous avons passé à la fonction que deux des quatre arguments admis. Le premier est le nom de l’action, ici mis au nom du dossier de base du fichier en cours, tandis que le second argument est le nom attribut du champ caché. Même si le champ nonce ne garantit pas une protection absolue, il est recommandé d’inclure toujours dans toute boîte de méta personnalisé (vérifier le WordPress Codex pour une explication plus détaillée ).

Une fois que nous en avons terminé avec la sécurité, nous devons extraire de la base de données les valeurs de champs personnalisés et a gérer les champs des boîtes méta. C’est ici où la fonction get_post_meta  devient très pratique.

Dans notre exemple (ou sur le fichier « fonctions », selon la façon dont vous souhaitez implémenter l’exemple de ce tutoriel) nous faisons usage de trois champs personnalisés simples, deux chaînes, et un tableau. Le code ci-dessous montre comment saisir leurs valeurs sur la base de données:

<?php
// retrieve the_food_cholesterol current value
$current_cholesterol = get_post_meta( $post->ID, '_food_cholesterol', true );

// retrieve the _food_carbohydrates current value
$current_carbohydrates = get_post_meta( $post->ID, '_food_carbohydrates', true );

// stores _food_vitamins array
$current_vitamins = ( get_post_meta( $post->ID, '_food_vitamins', true ) ) ? get_post_meta( $post->ID, '_food_vitamins', true ) : array();

Dans cet exemple, les slugs de champs personnalisés sont précédés par des underscores, ce qui signifie que nous avons affaire à des champs personnalisés cachés. De cette façon, ils ne seront pas affiché à l’administrateur sur les champs intégrés des champs personnalisés de la boite méta.

Enfin, il est temps d’imprimer le balisage.

L’impression des champs de formulaire

Maintenant, nous devons produire la sortie. Commençons par l’ajout d’un champ de texte simple, ce qui permettra à l’utilisateur de stocker la valeur d’un champ personnalisé unique, dans ce cas, les hydrates de carbone :

?>
<div class='inside'>
 <h3><?php _e( 'Carbohydrates', 'food_example_plugin' ); ?></h3>
 <p>
 <input type="text" name="carbohydrates" value="<?php echo $current_carbohydrates; ?>" /> 
 </p>
</div>
<?php

Dans le code précédent, le champ personnalisé lui-même fourni la valeur du champ actuel. Le prochain champ personnalisé comportera deux boutons radio :

<h3><?php _e( 'Cholesterol', 'food_example_plugin' ); ?></h3>
<p>
 <input type="radio" name="cholesterol" value="0" <?php checked( $current_cholesterol, '0' ); ?> /> Yes<br />
 <input type="radio" name="cholesterol" value="1" <?php checked( $current_cholesterol, '1' ); ?> /> No
</p>

C’est donc là que les choses deviennent unpeu plus difficiles. La fonction checked compare les deux chaines passé comme arguments. S’il y a correspondance, alors le champ sera activé « checked ».

Enfin, nous allons ajouter des groupes de cases à cocher à la boite méta :

<h3><?php _e( 'Vitamins', 'food_example_plugin' ); ?></h3>
<p>
 <input type="checkbox" name="vitamins[]" value="Vitamin A" <?php checked( ( in_array( 'Vitamin A', $current_vitamins ) ) ? 'Vitamin A' : '', 'Vitamin A' ); ?> />Vitamin A <br />
 <input type="checkbox" name="vitamins[]" value="Thiamin (B1)" <?php checked( ( in_array( 'Thiamin (B1)', $current_vitamins ) ) ? 'Thiamin (B1)' : '', 'Thiamin (B1)' ); ?> />Thiamin (B1) <br />

 <!-- more vitamins here -->
</p>

La valeur de l’attribut « name » correspond à l’élément d’un tableau, et plus tard, ceci nous permettra de sauvegarder les données plus efficacement.

Maintenant, considérons le premier argument de la fonction « checked ».

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

<?php
( in_array( 'Thiamin (B1)', $current_vitamins ) ) ? 'Thiamin (B1)' : ''

c’est une opération ternaire qui vérifie si la valeur actuelle de la case à cocher est identique à la variable « $current_vitamins« . Si la condition est vérifiée, alors il renvoi la même valeur, sinon il renvoi une chaîne vide.

Maintenant que la logique devrait être claire, nous pouvons raccourcir le code avec un tableau dans une boucle « foreach » :

<?php
// an array of values
$vitamins = array( 'Vitamin A', 'Thiamin (B1)', 'Riboflavin (B2)', 'Niacin (B3)', 'Pantothenic Acid (B5)', 'Vitamin B6', 'Vitamin B12', 'Vitamin C', 'Vitamin D', 'Vitamin E', 'Vitamin K' );
// stores _food_vitamins array 
$current_vitamins = ( get_post_meta( $post->ID, '_food_vitamins', true ) ) ? get_post_meta( $post->ID, '_food_vitamins', true ) : array();
?>
<div class='inside'>
 <h3><?php _e( 'Vitamins', 'food_example_plugin' ); ?></h3>
 <p>
 <?php
 foreach ( $vitamins as $vitamin ) {
 ?>
 <input type="checkbox" name="vitamins[]" value="<?php echo $vitamin; ?>" <?php checked( ( in_array( $vitamin, $current_vitamins ) ) ? $vitamin : '', $vitamin ); ?> /><?php echo $vitamin; ?> <br />
 <?php
 }
 ?>
 </p>
</div>

Maintenant nous allons tout mettre ensemble :

<?php
/**
 * Build custom field meta box
 *
 * @param post $post The post object
 */
function food_build_meta_box( $post ){
 // make sure the form request comes from WordPress
 wp_nonce_field( basename( __FILE__ ), 'food_meta_box_nonce' );
 // retrieve the _food_cholesterol current value
 $current_cholesterol = get_post_meta( $post->ID, '_food_cholesterol', true );
 // retrieve the _food_carbohydrates current value
 $current_carbohydrates = get_post_meta( $post->ID, '_food_carbohydrates', true );
 $vitamins = array( 'Vitamin A', 'Thiamin (B1)', 'Riboflavin (B2)', 'Niacin (B3)', 'Pantothenic Acid (B5)', 'Vitamin B6', 'Vitamin B12', 'Vitamin C', 'Vitamin D', 'Vitamin E', 'Vitamin K' );
 
 // stores _food_vitamins array 
 $current_vitamins = ( get_post_meta( $post->ID, '_food_vitamins', true ) ) ? get_post_meta( $post->ID, '_food_vitamins', true ) : array();
 ?>
 <div class='inside'>

 <h3><?php _e( 'Cholesterol', 'food_example_plugin' ); ?></h3>
 <p>
 <input type="radio" name="cholesterol" value="0" <?php checked( $current_cholesterol, '0' ); ?> /> Yes<br />
 <input type="radio" name="cholesterol" value="1" <?php checked( $current_cholesterol, '1' ); ?> /> No
 </p>

 <h3><?php _e( 'Carbohydrates', 'food_example_plugin' ); ?></h3>
 <p>
 <input type="text" name="carbohydrates" value="<?php echo $current_carbohydrates; ?>" /> 
 </p>

 <h3><?php _e( 'Vitamins', 'food_example_plugin' ); ?></h3>
 <p>
 <?php
 foreach ( $vitamins as $vitamin ) {
 ?>
 <input type="checkbox" name="vitamins[]" value="<?php echo $vitamin; ?>" <?php checked( ( in_array( $vitamin, $current_vitamins ) ) ? $vitamin : '', $vitamin ); ?> /><?php echo $vitamin; ?> <br />
 <?php
 }
 ?>
 </p>
 </div>
 <?php
}

Et voici à quoi rassemblera la boite méta terminée sur l’interface d’édition.

food_meta_box

Comment sauvegarder les données

Maintenant que la boite méta est prêt, il n’est cependant pas possible de sauvegarder les données. Pour accomplir cela, nous allons devoir définir une fonction de rappel qui sera appelé lorsque l’article/page sera sauvegardé :

<?php
/**
 * Store custom field meta box data
 *
 * @param int $post_id The post ID.
 */
function food_save_meta_boxes_data( $post_id ){
 // code here
}
add_action( 'save_post_food', 'food_save_meta_boxes_data', 10, 2 );

Le crochet « save_{$post_type} » s’exécute lorsque le type de publication personnalisé est enregistré ou mis à jour.

Maintenant regardons comment faire les choses à l’intérieur de cette fonction. La première chose que nous avons à faire c’est de vérifier que la valeur du champ « nonce ».

<?php
// verify meta box nonce
if ( !isset( $_POST['food_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['food_meta_box_nonce'], basename( __FILE__ ) ) ){
 return;
}

Si le champ nonce n’est pas défini ou si sa valeur n’est pas correcte ou a expiré, alors l’exécution est interrompue plus de détails ici.

Si vous souhaitez sauter la fonction en cas de sauvegarde automatique, nous pouvons ajouter la condition suivante :

<?php
// return if autosave
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
 return;
}

Ensuite, nous devons vérifier le rôle de l’utilisateur :

<?php
// Check the user's permissions.
if ( ! current_user_can( 'edit_post', $post_id ) ){
 return;
}

et enfin nous sauvegardons les données :

<?php
// store custom fields values
// cholesterol string
if ( isset( $_REQUEST['cholesterol'] ) ) {
 update_post_meta( $post_id, '_food_cholesterol', sanitize_text_field( $_POST['cholesterol'] ) );
}
// store custom fields values
// carbohydrates string
if ( isset( $_REQUEST['carbohydrates'] ) ) {
 update_post_meta( $post_id, '_food_carbohydrates', sanitize_text_field( $_POST['carbohydrates'] ) );
}
// store custom fields values
// vitamins array
if( isset( $_POST['vitamins'] ) ){
 $vitamins = (array) $_POST['vitamins'];
 // sinitize array
 $vitamins = array_map( 'sanitize_text_field', $vitamins );
 // save data
 update_post_meta( $post_id, '_food_vitamins', $vitamins );
}else{
 // delete data
 delete_post_meta( $post_id, '_food_vitamins' );
}

Si au moins un seul élément existe dans le tableau, alors la variable $vitamins sera sauvegardé avec la valeur correspondante. Plus tard, la fonction array_map de PHP appliquera la fonction sanitize_text_field sur chaque élément du tableau. Si aucune case a coché n’a été défini pour une option, alors le tableau $_POST[ ‘vitamins’ ] n’existera pas à nous pourront donc la supprimer en appelant la fonction « delete_post_meta ».

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Voici le code complet :

<?php
/**
 * Store custom field meta box data
 *
 * @param int $post_id The post ID.
 * @link https://codex.wordpress.org/Plugin_API/Action_Reference/save_post
 */
function food_save_meta_box_data( $post_id ){
 // verify taxonomies meta box nonce
 if ( !isset( $_POST['food_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['food_meta_box_nonce'], basename( __FILE__ ) ) ){
 return;
 }
 // return if autosave
 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
 return;
 }
 // Check the user's permissions.
 if ( ! current_user_can( 'edit_post', $post_id ) ){
 return;
 }
 // store custom fields values
 if( isset( $_POST['vitamins'] ) ){
 $vitamins = (array) $_POST['vitamins'];
 // sinitize array
 $vitamins = array_map( 'sanitize_text_field', $vitamins );
 // save data
 update_post_meta( $post_id, '_food_vitamins', $vitamins );
 }else{
 // delete data
 delete_post_meta( $post_id, '_food_vitamins' );
 }
}
add_action( 'save_post_food', 'food_save_meta_box_data' );

Il s’agit d’un code rassemblé dans un plugin que vous pouvez télécharger sur Github.

Résumé

Maintenant que nous savons comment créer une boite méta, vous pouvez continuer à vous entraîner en créant des formulaires sur votre tableau de bord. HTML5 à apporté de nouveaux champs, et vous pouvez faire des tests sur ces derniers en utilisant un champ de date ou de couleur.

Vous aurez beaucoup plus de possibilité en utilisant jQuery UI ou d’autres librairie disponibles. Ce tutoriel ne fait que gratter la surface et vous donne un aperçu sur les possibilités. Le reste du travail dépendra de votre volonté à apprendre.

C’est tout pour ce tutoriel. N’hésitez pas à le partager avec vos amis, ou à laissez des suggestions dans les commentaires.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
5 Partages
Partagez
Tweetez
Enregistrer5