Meta box : reliez des contenus entre eux

Pour illustrer la metabox du jour, le mieux est de se mettre en situation…

Imaginons que nous réalisons un site WordPress pour un établissement qui organise des colloques et des conférences. Sur ce site, mon client souhaiterai y présenter les évènements, en détail, ainsi que les intervenants.

On a plein de données à renseigner pour l’un comme pour l’autre. Nous allons donc créer deux types de contenus.

Mais bien sûr il va falloir les lier, pour dire quel conférencier participe à quel colloque. Il nous faut une metabox !

Problème : Il y a plusieurs conférenciers pour chaque évènement, je ne peut donc pas utiliser un champ select pour faire la liaison. Je ne peux pas non plus utiliser des cases à cocher car j’ai environ 150 intervenants dans ma base, ça va faire un paquet de checkbox…

L’idéal serait une metabox avec un champ de recherche pour trouver les conférenciers. Lorsque l’on trouverait celui qui nous intéresse nous pourrions l’ajouter à une liste qui sera sauvegardée dans une metadonnée du colloque.

C’est ce que nous allons faire…

Une metabox pour faire des liaisonsentre contenus

On va avoir besoin de ça

Avant de se jeter dans le code, commençons par faire l’inventaire de ce dont nous allons avoir besoin.

1. Comme toujours, il faudra commencer par les fonctions habituelles d’initilisation/construction/sauvegarde de la meta box
2. Pour le champ de recherche, un système d’autocomplétion serait parfait. On commencerait à saisir le nom d’un conférencier qu’il apparaitrait dans le champ. Un clic dessus nous permettrai de l’ajouter à une liste ainsi qu’a un champ caché. Pour le système d’autocomplétion, je propose jquery-ui-autocomplete.
3. Il nous faut donc aussi un tableau javascript de tous les intervenants potentiels…
4. … et un champ caché …
5. … et une liste non-ordonnée, en HTML, pour faire un retour visuel à l’utilisateur
6. Qui dit HTML dit aussi un peu de css pour la mise en forme
7. Pour finir bah il reste le gros javascript de bœuf. On va s’inspirer de celui-ci pour le faire évoluer selon nos besoins.

Le code PHP

Notre metabox va reposer à 100% sur jquery autocomplete, il faut donc l’ajouter à l’admin WordPress, sans oublier les styles qui vont bien.

Le code suivant est à ajouter au fichier functions.php (vous trouverez le style ici). Pensez à mettre à jour les chemins…

add_action( 'admin_enqueue_scripts', 'my_admin_scripts_method' );
function my_admin_scripts_method() {
  if( is_admin() ){
    wp_enqueue_script( 'jquery-ui-autocomplete' );
    wp_register_style( 'jquery.ui.theme', get_bloginfo( 'template_url' ) . '/css/jquery-ui-1.8.19.custom.css');
    wp_enqueue_style( 'jquery.ui.theme' );
  }
}

Maintenant qu’on a mis en place la librairie, nous pouvons attaquer la metabox.

J’initialise…

// Initialisation de la metabox, pour le CPT "conference"
add_action('add_meta_boxes','mes_metaboxes');
function mes_metaboxes(){
  add_meta_box('conferenciers_presents', 'Conférenciers présents', 'conferenciers_concernes', 'conference', 'side', 'default');
}

… je construis…

//Construction
function conferenciers_concernes($post){
//je récupère la meta potentiellement sauvegardée
$conferenciers_presents = get_post_meta($post->ID,'_conferenciers_presents',false);

//je créer un nonce
wp_nonce_field('update-conferenciers_'.$post->ID, '_wpnonce_update_conferenciers);

//mon widget
echo '<div class="ui-widget">';
// le champ qui servira de support à autocomplete
echo '<label for="nom">Nom : </label><input id="nom" type="text" />';
// la liste des conférenciers concernés (assurant un retour visuel pour l'utilisateur)
echo '<ul>';
// j'y affiche toutes les entrées déjà sauvegardées dans la meta</ul>
if( ! empty( $conferenciers_presents) )
  foreach( $conferenciers_presents as $c )
    echo '<li data-id="' . $c . '"><span class="erase">x</span> ' . get_the_title($c) . '</li>
echo '<ul>';

// mon champ caché, que je mettrai à jour et sauvegarderai
// il contient déjà les valeurs de la meta
echo'<input id="conf_presents" type="hidden" name="conf_presents" value="'.implode(',',$conferenciers_presents).'" />';

//fin du widget
echo '</div>';

… et je sauvegarde.

//sauvegarde
add_action('save_post','sauvegarde_metabox');
function sauvegarde_metabox($post_id){
    //s'il s'agit bien d'une sauvegarde volontaire
    if( ( !defined( 'DOING_AJAX' ) || !DOING_AJAX ) && isset($_POST['conf_presents'])){
        //test du nonce
        check_admin_referer( 'update-conferenciers_'.$post_id,'_wpnonce_update_conferenciers' );

        // je suprrime tout
        delete_post_meta($post_id,"_conferenciers_presents");
        //j'éclate mon input
        $conf = explode(',',$_POST['conf_presents']);
        foreach($conf as $c){
            //pour chaque entrée j'ajoute une meta
            add_post_meta($post_id, "_conferenciers_presents", intval($c));
        }
    }
}

Pour l’instant notre meta box ne fait rien du tout. Pour cause on vient juste d’en poser les fondations ; rien en sera actif sans le javascript.

3 tonnes de javascript

On arrive à la grosse partie. Avant toute chose, autocomplete va avoir besoin d’une liste des éléments qui peuvent être appelés. Ce qu’on veut c’est lister tous les intervenants dans la base.

Il faut donc créer un tableau en js, et le remplir via une boucle WordPress renvoyant la totalité des conférencier.

Créer une balise <script> dans la metabox, et ajouter ici ce code :

//no-conflict
jQuery(function($) {

  // un tableau avec tous les conférenciers que l'on peut sélectionner
  var availableTags = <?php $confe = get_posts('post_type=conferencier&posts_per_page=-1');
  foreach($confe as $cf){
    echo '{value:"'.$cf->ID.'",label:"'.esc_js($cf->post_title).'"},'."\n";
  }?>
});

On a maintenant tout ce qu’il nous faut pour coder l’ajout d’un intervenant, à savoir : un tableau qui donne pour chaque conférencier son nom et son ID

L’ajout d’un intervenant

Toujours dans la même balise <script>, on conçoit la fonction d’autocomplétion.

//autocomplete sur le champ #nom
$( "#nom" ).autocomplete({
  // je mets le tableau précédemment crée en source
  source: availableTags,
  // lorsqe l'on sélectionne un élément
  select: function(event,ui){
    //je crée un nouveau
    <ul>
      <li>var li = '</li>
      <li data-id="' + ui.item.value + '"><span class="erase">x</span> ' + ui.item.label + '</li>
      <li>';
    //je fais un tableaux des conférencier déjà ajouté
    var all_conf_presents = new Array();
    all_conf_presents =($('#conf_presents').val()!='') ? $('#conf_presents').val().split(',') : [];
    // si il est déjà dans la liste, j'en tiens pas compte
    if($.inArray(ui.item.value,all_conf_presents)!="-1"){
      $(this).val('');
    }else{
      //sinon je l'ajoute à la liste
      all_conf_presents.push(ui.item.value);
      //je pousse cette liste dans le champ caché
      $('#conf_presents').val(all_conf_presents);
      //et j'ajoute la nouvelle entrée dans le <ul>
      var $cp= $( "#conferenciers_presents" );
      $cp.append(li);
      $(this).val('');</ul>
    }
    //juste pour que la sélection d'un élément ne remplisse pas le input (comportement normal)
    return false;
  }
});

Voilà, dès maintenant la meta box nous permet d’ajouter des entrées. Pas de problème avec la sauvegarde non plus. Par contre il n’est toujours pas possible de supprimer un élément.

Suppression d’un conférencier

Encore et toujours dans la même balise <script>, à la suite du reste, on ajoute le code ci-dessous qui va nous permettre de retirer/dissocier un intervenant de l’événement.

L’écouteur d’événement est contenu dans fonction, de façon à pouvoir le re-associer facilement aux éléments qui seront ajoutés par la suite (j’aime pas la fonction “live” de jQuery et j’assume…).

//function qui me sert à supprimer l'ID d'un conférencier dans #conf_presents
function removeByElement(arrayName,arrayElement){
  for(var i=0; i if(arrayName[i]==arrayElement)
    arrayName.splice(i,1);
  }
}

//évènement de suppression de conférencier
function listenerremove(){
  $( "#conferenciers_presents" ).find('li .erase').on('click',function(){
    // suppression élément
    var $elem = $(this).parent('li'); //je cible l'élément à supprimer
    //je construit un talbeau avec les conférencier actuellement liés
    var all_conf_presents = new Array();
    all_conf_presents =$('#conf_presents').val().split(',');
    //je récupère l'ID à retirer
    var dataval = $elem.attr('data-id');
    // je supprime l'ID du tableau
    removeByElement(all_conf_presents,dataval);
    //je supprime le conférencier dans la liste
    $elem.remove();
    //je supprime son ID dans le champ caché
    $('#conf_presents').val(all_conf_presents);
  });
}

//je lance la fonction
listenerremove();

Il ne faut pas oublier d’ajouter “listenerremove();” dans la fonction d’ajout, juste avant la fermeture du else :

var $cp= $( "#conferenciers_presents" );
$cp.append(li);
//ici
listenerremove();
}

Il ne nous reste plus qu’à ajouter un peu de CSS pour style le bouton de suppression. Dans la fonction de construction de la meta box, ajouter une balise <style>, et collez-y ces styles :

.erase{
    background:#2e2e2e;
    color:#FFF;
    padding:0 4px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
.erase:hover{
    background:#F20;
    cursor:pointer;
}

Le code dans son intégralité

Vous devriez maintenant obtenir ce résultat, dans votre fichier “functions.php” :

// chargement des scripts
add_action('admin_enqueue_scripts', 'my_admin_scripts_method');
function my_admin_scripts_method(){
  if(is_admin()){
    wp_enqueue_script('jquery-ui-autocomplete');
    wp_register_style('jquery.ui.theme', get_bloginfo('template_url') . '/css/jquery-ui-1.8.19.custom.css');
    wp_enqueue_style('jquery.ui.theme');
  }
}

// Initialisation de la metabox, pour le CPT "conference"
add_action('add_meta_boxes','mes_metaboxes');
function mes_metaboxes(){
  add_meta_box('conferenciers_presents', 'Conférenciers présents', 'conferenciers_concernes', 'conference', 'side', 'default');
}

//Construction
function conferenciers_concernes($post){
  $conferenciers_presents = get_post_meta($post->ID,'_conferenciers_presents',false);
  
  wp_nonce_field('update-conferenciers_'.$post->ID, '_wpnonce_update_conferenciers');

echo '<div class="ui-widget">';
echo '<label for="nom">Nom : </label><input id="nom" type="text" />';
echo '</div><ul>';
if(!empty( $conferenciers_presents)){
  foreach($conferenciers_presents as $c){
    echo '<li data-id="' . $c . '"><span class="erase">x</span> ' . get_the_title($c) . '</li>';
  }
}
echo '</ul>';

echo'<input id="conf_presents" type="hidden" name="conf_presents" value="'.implode(',',$conferenciers_presents).'" />';
echo '</div>';

?>
<script type="text/javascript">// <![CDATA[
jQuery(function($) {

    // un tableau avec tous les conférenciers que l'on peut sélectionner
    var availableTags = [<?php
    $confe = get_posts('post_type=conferencier&posts_per_page=-1');
    foreach($confe  as $cf){
      echo '{value:"'.$cf->ID.'",label:"'.esc_js($cf->post_title).'"},'."\n";
    }
    ?>];

    //autocomplete sur le champ #nom
  $("#nom").autocomplete({
    source: availableTags,
    select: function(event,ui){
      var li = '<li data-id="' + ui.item.value + '"><span class="erase">x</span> ' + ui.item.label + '</li>';
      var all_conf_presents = new Array();
      all_conf_presents =($('#conf_presents').val()!='') ? $('#conf_presents').val().split(',') : [];
      if($.inArray(ui.item.value,all_conf_presents)!="-1"){
        $(this).val('');
      }else{
        all_conf_presents.push(ui.item.value);
        $('#conf_presents').val(all_conf_presents);
        var $cp= $( "#conferenciers_presents" );
        $cp.append(li);
        $(this).val('');
        listenerremove();
      }         

      return false;
    }
  });

  //function qui me sert à supprimer l'ID d'un conférencier dans #conf_presents
  function removeByElement(arrayName,arrayElement){
    for(var i=0; i<arrayName.length;i++ ){ 
    if(arrayName[i]==arrayElement)
      arrayName.splice(i,1); 
    } 
  }

  //évènement de suppression de conférencier
  function listenerremove(){
    $("#conferenciers_presents").find('li .erase').on('click',function(){
      var $elem = $(this).parent('li');
      var all_conf_presents = new Array(); 
      all_conf_presents =$('#conf_presents').val().split(',');
      var dataval = $elem.attr('data-id');
      removeByElement(all_conf_presents,dataval);
      $elem.remove();
      $('#conf_presents').val(all_conf_presents);
    });
  }

  listenerremove();
 });

// ]]></script>

<?php }

//sauvegarde
add_action('save_post','sauvegarde_metabox');
function sauvegarde_metabox($post_id){
  if( ( !defined( 'DOING_AJAX' ) || !DOING_AJAX ) && isset($_POST['conf_presents'])){

    check_admin_referer( 'update-conferenciers_'.$post_id,'_wpnonce_update_conferenciers' );

    delete_post_meta($post_id,"_conferenciers_presents");
    $conf = explode(',',$_POST['conf_presents']);
    foreach($conf as $c){
      add_post_meta($post_id, "_conferenciers_presents", intval($c));
    }
  }
}

Utilisation de cette meta box

Notre meta box de liaison inter-contenus est opérationnelle à 100%. Grâce à elle on pourra faire ressortir les conférenciers associé à chaque colloque, lorsque l’on sera sur la page de la conférence, grâce à la fonction get_post_meta().

Nous pourrons aussi, sur la page du conférencier, lister ces interventions, via une requête personnalisée du style :

$q = new WP_Query(
  array(
    'post_type'      => 'conference',
    'posts_per_page' => '-1',
    'meta_query'     => array(
      'operator'       => 'AND',
      array(
        'key'     => '_conferenciers_presents',
        'value'   => $post->ID,
        'compare' => '='
      )
    )
  )
);

Si vous avez des suggestions pour améliorer cette metabox, n’hésitez pas à me les faire connaître.

Bon usage