Ajouter une fonctionnalité de légende au thème WordPress personnalisé

Publié par Jean-Michel le

Bonjour, je travaille à partir d’un thème personnalisé créé par mon prédécesseur et j’essaie d’ajouter une fonctionnalité de légende au thème, mais j’ai quelques problèmes avec. Actuellement, si j’insère une image dans un message et que je souhaite ajouter une légende, la légende apparaîtra juste à côté de l’image sans aucune balise ou classe la contenant, voici une photo.

capture d'écran

J’ai essayé de suivre un autre post et d’ajouter ce morceau de code au function.php et à mon single.php mais rien n’a changé.

function the_post_thumbnail_caption() {
   global $post;

   $thumbnail_id    = get_post_thumbnail_id($post->ID);
   $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

  if ($thumbnail_image && isset($thumbnail_image[0])) {
     echo '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
  }
}

<?php the_post_thumbnail(); ?>

Que dois-je inclure pour implémenter correctement les légendes sous mes images ?

Solution n°1 trouvée

Lorsque vous ajoutez une image avec légende à l’éditeur de texte WP, il doit ajouter un shortcode de légende. est-ce le cas ici?

À partir de là, la sortie html devrait avoir des classes par défaut comme wp-caption. Vous pouvez ensuite styliser votre légende en appliquant du CSS à ces classes :

/* The wrapper <div> for the caption and captioned element. */
.wp-caption { }

/* The caption text. */
.wp-caption-text { }

/* An image within the caption (you might want to style other elements too). */
.wp-caption img { }

Voir ici : http://justintadlock.com/archives/2011/07/01/captions-in-wordpress

Vous pouvez également personnaliser la sortie html à l’aide du hook de shortcode de légende.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

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