Les méta-boîtes WordPress – Un guide rapide

Les méta-boîtes WordPress sont des boîtes déplaçables qui s'affichent dans votre écran d'édition et sont utilisées pour gérer des données supplémentaires telles que les termes de taxonomie. Dans cet article, nous allons jeter un œil aux méta-boîtes WordPress et voir comment nous pouvons créer nos propres boîtes personnalisées, découvrir comment enregistrer les modifications que nous apportons et comment nous pouvons afficher leur contenu sur le front-end de notre site Web.

Commençons!

Champs personnalisés, boîtes de méta et métadonnées

Il y a beaucoup de confusion sur la différence entre ces trois termes. Jetons un coup d'œil aux trois pour mieux comprendre ce qu'ils sont et comment ils fonctionnent.

Métadonnées

Les métadonnées d'une publication sont les informations supplémentaires sur une publication qui sont stockées dans la table postmeta de la base de données.

Chaque paire clé/valeur est considérée comme un « champ de publication ». Il n'y a pas de limite au nombre d'entrées méta que ce tableau peut avoir.

Les champs personnalisés

Certains champs sont prédéfinis par WordPress, comme l'image caractéristique, qui sont techniquement des champs personnalisés. D'autres peuvent être ajoutés par un plugin ou un code personnalisé et définis par l'utilisateur admin. Vous pouvez en savoir plus sur les champs personnalisés en lisant notre article « Premiers pas avec les champs personnalisés WordPress ».

Métaboxes

Lorsque vous ouvrez un article WordPress pour le modifier, vous verrez que la page est divisée en différentes sections (dont beaucoup sont situées dans la barre latérale sur le côté droit).

Toutes ces sections sont techniquement des « méta-boîtes ». Ainsi, l'éditeur de publication principal, les conteneurs pour choisir les catégories, publier la publication, ajouter des balises, ajouter une image en vedette sont tous des méta-boîtes contenant des éléments HTML qui interagissent avec les métadonnées de la publication. Selon la façon dont les métadonnées sont gérées par le site Web, ces cases apparaîtront à différents endroits sur votre écran.

À titre d'exemple supplémentaire, examinons la méta-boîte de l'image en vedette. Cela se trouve normalement dans la barre latérale droite de l'écran d'administration d'un message. Là, vous pouvez facilement changer l'image. Lorsque vous faites cela, vous mettez en fait à jour le _thumbnail_id des métadonnées de ce message.

Une méta-boîte de champ personnalisée, comme la "source" (que nous avons ajoutée dans notre didacticiel sur les champs personnalisés), se trouve généralement sous l'éditeur de publication principal.

Création d'une Meta Box pour notre type de publication personnalisé

Maintenant que nous avons une idée plus claire de ce que sont exactement les méta-boîtes, nous pouvons passer à autre chose et créer notre propre méta-boîte personnalisée pour notre site Web. Ce didacticiel fait suite à notre didacticiel sur les types de publication personnalisés… si vous souhaitez suivre étape par étape, vous devrez consulter cet article et créer un type de publication personnalisé appelé "recettes", puis configurer quelques "recettes". ' Tester les messages avec une image sélectionnée sélectionnée.

Dans ce tutoriel, nous allons développer notre type de publication personnalisé en ajoutant une nouvelle méta-boîte qui sera utilisée pour définir si la recette est végétalienne ou non en cochant une case.

Étape 1 - Enregistrez la Meta Box

Pour ajouter une méta-boîte dans notre type de publication personnalisé, nous utilisons la fonction add_meta_box fournie par WordPress. Voici la structure de la fonction avec les arguments que nous allons utiliser :

 add_meta_box( $id, $title, $callback, $screen, $context )

Pour l'identifiant unique, nous utiliserons is_vegan et pour le titre de la méta-boîte, la chaîne Is Vegan .

La fonction de rappel pour afficher le contenu de la boîte sera display_vegan_meta_box . L'attribut $screen fait référence à l'écran d'administration sur lequel la méta-boîte sera affichée. Dans notre cas, il s'agit de la zone d'édition de publication de la recette, il s'agira donc du nom unique du type de publication qui, comme mentionné précédemment, est recipes . Le paramètre $context varie selon l'écran d'administration.

Les contextes d'écran de post-édition que nous utiliserons ici incluent normal, latéral et avancé comme valeurs de contexte disponibles. Nous utiliserons la valeur latérale pour afficher la boîte de méta dans la barre latérale de la page d'édition de publication.

Donc, en résumé, en utilisant les paramètres définis ci-dessus, le code que nous devrions ajouter dans notre my-custom-post-type.php devrait ressembler à ceci :

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

Comme vous le verrez, nous avons utilisé le hook admin_init qui se déclenche avant tout autre hook lorsqu'un utilisateur accède à la zone d'administration.

Maintenant, si vous visitez la page d'édition d'un article de recette, vous devriez voir la case dans la barre latérale. Bien sûr, le contenu est actuellement vide.

L'étape suivante consiste à remplir la case avec le contenu souhaité.

Étape 2 - Afficher le contenu de base de la méta-boîte

Nous garderons le contenu de cette boîte simple. Tout ce dont nous avons besoin est une description et une case à cocher. Comme mentionné, le contenu est renvoyé dans la fonction display_vegan_meta_box .

Veuillez continuer et ajouter le morceau de code ci-dessous sous la fonction my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

Ce que nous avons fait dans cette fonction est de sortir une case à cocher HTML qui pour l'instant n'est pas cochée. Après avoir introduit la fonction de sauvegarde, nous reviendrons à cette section de code pour apporter d'autres modifications afin que, lors du chargement de la page de post-édition, la case à cocher récupère l'état de la case à cocher enregistrée.

Étape 3 - Enregistrer la valeur de la méta-boîte dans la base de données

Pour enregistrer la valeur des champs d'entrée de la métabox, nous utilisons le crochet d'action save_post par WordPress comme ceci :

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

Dans la fonction update_vegan_bo x avec l'argument $post_id , nous avons inclus certaines conditions. Nous voulons d'abord vérifier si l'utilisateur est autorisé à modifier la publication et nous assurer également que nous modifions un type de publication de recipes .

Ainsi, si la publication appartient au type de recipes , nous examinons la valeur de la case à cocher. N'oubliez pas que par défaut, lorsque la case est cochée, la valeur de la base de données qui est stockée est "oui" et sinon, la valeur est NULL. Nous avons légèrement modifié cela afin que la valeur "non" soit enregistrée lorsque nous enregistrons le message avec la case méta végétalienne décochée.

Ici, nous avons utilisé la fonction WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

Dans ses arguments, nous avons défini l'identifiant de publication, la clé méta, la valeur méta. La fonction peut cependant accepter un argument supplémentaire, le $prev_value
au cas où nous voudrions vérifier la valeur précédente avant la mise à jour et seulement si elle est égale, continuez et mettez à jour.

Étape 4 - Affiner le code de contenu de la méta-boîte

Revenons maintenant à la fonction précédente qui génère le contenu de la méta-boîte et ajoutons quelques lignes de code supplémentaires qui récupèrent les données associées de la base de données.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Donc, d'abord, nous is_vegan la méta-valeur is_vegan puis, le cas échéant, la valeur checked sera passée à la variable $checked et sera répercutée dans la sortie HTML.

Et c'est tout. Nous avons maintenant une méta-boîte de travail qui peut être utilisée pour définir si la recette de notre message personnalisé est végétalienne ou non.

Conclusion

Les méta-boîtes offrent un niveau accru de contrôle et de flexibilité dans les publications et peuvent être exploitées de différentes manières. Ce qui est particulièrement agréable à leur sujet, c'est qu'ils sont séparés du reste du contenu de la publication tout en résidant sur le même écran d'administration, ce qui rend leur gestion beaucoup plus facile que s'ils se trouvaient ailleurs dans l'administration WordPress.

Comme avec la plupart des codages WordPress, cela peut prendre un certain temps pour se familiariser avec l'utilisation des méta-boîtes. Espérons que les informations ci-dessus suffisent pour vous aider à démarrer. Bon codage !