Divi Alt Text : Récupération automatique des « alt text » en bibliothèque

29 Avr 2018

Bonjour à tout-e-s,

Suite à la sortie de Divi 3.1, une édition spéciale développeurs, j’ai dû mettre à jour mon plugin Divi Alt Text et la version utilisant un thème enfant. Je profite de la refonte du code Divi et de celle du plugin pour créer ce nouvel article qui regroupera les deux versions désormais identiques.

Contexte : la refonte du code des modules Divi

Cette nouvelle version de Divi a vu une grande partie de son code complètement remanié, pour le bien de tous ! On s’approche d’un code propre… Si-si !

Ainsi, hormis l’introduction des hooks WordPress, le code a été considérablement assaini, notamment dans la gestion des modules. Un vrai ménage de printemps !

Bien sûr il reste encore des améliorations possibles (optimisations, factorisations, décomposition ou hooks dans le rendu des modules), mais la modification de Divi devient de plus en plus abordable (je m’adresse quand même aux développeurs…) et surtout de façon SAINE.

Conséquence : refonte de Divi Alt Text

Voici donc le nouveau code permettant de récupérer les alt text des images pour les modules Image, Fullwidth Image, Blurb, Slider et Fullwidth Header.

Vous noterez que j’ai supprimé le module Gallery de ce patch car d’une part Divi utilise automatiquement le titre comme alt text, donc celui-ci n’est pas vide comme pour les autres modules, et d’autre part il est impossible d’implémenter la solution qui suit pour ce module. J’ai donc préféré conserver un code propre et simple et illustrant des bonnes pratiques plutôt que de surcharger un gros volume de code dans le module Gallery comme j’avais fait dans les versions précédentes.

La récupération des alt text en bibliothèque

J’utilise toujours ma fonction « outil » pour récupérer le alt text en bibliothèque à partir du chemin de l’image :

/* Récupération du alt text en bibliothèque à partir de l'URL de l'image */
function get_image_alt_text($image_url) {

  if ( ! $image_url )
    return '';
 
  if ( '/' === $image_url[0] )
    $post_id = attachment_url_to_postid(home_url() . $image_url);
  else
    $post_id = attachment_url_to_postid($image_url);
 
  $alt_text = get_post_meta($post_id, '_wp_attachment_image_alt', true);
  if ( '' === $alt_text )
    $alt_text = get_the_title($post_id);
 
  return $alt_text;

}

Par rapport à la dernière version, j’ai ajouté la gestion des URL relatives pour les images (qui commencent par ‘/’ et non pas ‘http…’), puisque les chemins relatifs devraient être la norme dans tout WordPress (message subliminal pour Elegant Themes et de nombreux éditeurs de thèmes et plugins !).

Mise à jour des modules

La refonte du code de Divi m’a donné l’occasion de me pencher un peu plus sur la gestion des modules afin d’optimiser mon code, et surtout de ne pas trop surcharger celui des modules, dans le souci évident de limiter les impacts des futures mises à jour de Divi. C’est là que j’ai découvert que Divi utilisait (même avant la v3.1) les filtres WordPress.

Comble de bonheur, on peut même appliquer un filtre sur les propriétés des modules avant leur rendu HTML ! Plus besoin de surcharger tout le code de rendu comme je le faisais avant, il suffit de mettre à jour la propriété alt text à la volée si elle n’est pas positionnée manuellement dans le module (priorité au alt text « manuel »).

Voici donc le fameux filtre, qui va mettre à jour les propriétés associées au alt text pour chaque type de module :

/* Mise à jour du alt text pour les modules concernés */
function update_module_alt_text( $attrs, $unprocessed_attrs, $slug ) {

  if ( ( $slug === 'et_pb_image' || $slug === 'et_pb_fullwidth_image' ) && '' === $attrs['alt'] )
    $attrs['alt'] = get_image_alt_text($attrs['src']);
  elseif ( $slug === 'et_pb_blurb' && 'off' === $attrs['use_icon'] && '' === $attrs['alt'] )
    $attrs['alt'] = get_image_alt_text($attrs['image']);
  elseif ( $slug === 'et_pb_slide' && '' !== $attrs['image'] && '' === $attrs['image_alt'] )
    $attrs['image_alt'] = get_image_alt_text($attrs['image']);
  elseif ( $slug === 'et_pb_fullwidth_header' ) {
    if ( '' !== $attrs['logo_image_url'] && '' === $attrs['logo_alt_text'] )
      $attrs['logo_alt_text'] = get_image_alt_text($attrs['logo_image_url']);
    if ( '' !== $attrs['header_image_url'] && '' === $attrs['image_alt_text'] )
      $attrs['image_alt_text'] = get_image_alt_text($attrs['header_image_url']);
  }
 
  return $attrs;
}
/* Injection du filtre */
add_filter( 'et_pb_module_shortcode_attributes', 'update_module_alt_text', 20, 3 );

Installation : Plugin et thème enfant

 

Télécharger Divi Alt Text 4.0 (à partir de Divi 3.1)

 

Si vous utilisez déjà un thème enfant sur votre site, ce n’est peut-être pas la peine d’installer le plugin… Vous pouvez simplement ajouter les deux bouts de code précédents dans votre fichier functions.php.

Sinon, installez le plugin via l’onglet Extensions de WordPress ;

Bouton d'ajout d'extension WordPress

Et pour ceux qui n’ont pas encore mis à jour leur site avec DIvi 3.1 ou ultérieur, voici le plugin en version 3.0 pour les versions de Divi jusqu’à 3.0 :

 

Télécharger Divi Alt Text 3.0 (jusqu’à Divi 3.0)