Méta boxes

Mise à jour le 21-10-2017 à 20:02

Il s’agit de boîtes de type widget placées dans certaines pages du tableau de bord. On les utilise plus particulièrement pour la rédaction d’articles et de pages.

On peut créer et ajouter ces boîtes et les supprimer. Nous nous intéresserons à la création et à l’ajout.
Pour cela nous définissons deux fonctions, l’une décrivant la boîte (création), l’autre indiquant où la placer (ajout). Une troisième sera utile afin d’enregistrer les informations éventuellement saisies dans la boîte.  Enfin, nous verrons comment utiliser ces informations dans le thème.

Création d’une méta-box

Il s’agit d’une fonction comportant un code HTML de type formulaire pour saisir les informations. Par exemple :

function code_ma_box($post) {
  $sel = get_post_meta($post->ID, '_ma_box_ordre', true);
  $nom = get_post_meta($post->ID, '_ma_box_nom', true);
 ?>
   <label>Nom :
     <input type="text" name="ma_box_nom" id="ma_box_nom" value="<?= $nom ?>" />
   </label>
   <br />
   <label> Choix du rang
     <select name="ma_box_ordre" id="ma_box_ordre" class="postbox">
       <option value="un"<?php selected($sel, 'un'); ?>>Premier</option>
       <option value="deux"<?php selected($sel, 'deux'); ?>>Second</option>
       <option value="trois" <?php selected($sel, 'trois'); ?>>Troisième</option>
     </select>
   </label>
 <?php
}

Le fait de préfixer ces clefs par un souligné empêchera leur affichage par la fonction « the_meta() ». On les sépare ainsi des champs personnalisés.

Les deux premières lignes permettent de récupérer les informations qui auraient été saisies auparavant par cette boîte dans la même page. Ici ce sont deux informations identifiés par « _ma_box_ordre » et « _ma_box_nom ». Il s’agit de clefs dans la table des « post_meta ».

Le reste est un contenu de formulaire traditionnel en HTML avec un champ texte et une liste déroulante. On remarque qu’il manque l’élément « form » englobat et le bouton de validation ; celle-ci se fera automatiquement à l’enregistrement de la page.

Mise en place de la méta-box

Elle se fait par une fonction accrochée au moment « add_meta_boxes ».

function ajoute_ma_box() {
  $screens = array ('post', 'page');
  foreach ($screens as $screen) {
    add_meta_box(
      'ma_box_perso', // Identifiant
      'La boîte',     // Titre affiché de la boîte
      'code_ma_box',  // Fonction décrivant la boîte
      $screen,        // Ecran
      'side'          // Position
    );
  }
}
add_action('add_meta_boxes', 'ajoute_ma_box');

Pour chaque écran dans lequel la boîte doit apparaitre, on appelle la fonction « add_meta_box ». Celle-ci prend au moins trois paramètres, les suivants sont facultatifs, dans l’ordre :

  1. l’ID de la boîte, il s’agit de l’attribut « id  »de la « div  »HTML qui contiendra la boîte, ce peut être utile pour une feuille de style ;
  2. le titre affiché de la boîte élément HTML « h2 » ;
  3. le nom de la fonction qui crée la boîte ;
  4. le nom de l’écran contenant la boîte ;
  5. la position de la boîte dans cet écran.

Voir : https://developer.wordpress.org/reference/functions/add_meta_box/

Enregistrement des informations saisies

On accroche la fonction d’enregistrement au moment de la sauvegarde de la page.

function enregistre_ma_box($post_id) {
 if (array_key_exists('ma_box_ordre', $_POST)) {
   update_post_meta(
     $post_id,
     '_ma_box_ordre',
     $_POST['ma_box_ordre']
   );
 }
 if (array_key_exists('ma_box_nom', $_POST)) {
   update_post_meta(
     $post_id,
     '_ma_box_nom',
     $_POST['ma_box_nom']
   );
 }
}
add_action('save_post', 'enregistre_ma_box');

On récupère les informations du formulaire (vu à la création) depuis le tableau « $_POST » que l’on enregistre par la fonction « update_post_meta », celle-ci prend comme paramètres l’identifiant de l’élement (page, article), le nom des clefs et leur valeur.

Utilisation par le thème

On récupère ces informations dans la boucle par :

$ordre = get_post_meta( get_the_ID(), '_ma_box_ordre', true );
$nom = get_post_meta( get_the_ID(), '_ma_box_nom', true );

En savoir plus :
https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/