Retirer les balises <p> autour des images

Petite astuce rapide pour un problème assez simple : pour simplifier la vie des rédacteurs, WordPress ajoute les balises <p> nécessaires pour créer des paragraphes autour de tous les blocs de texte que vous créez. Le problème, c’est qu’il en ajoute un peu trop, et il en place notamment autour des images, où elles ne sont pas nécessaires.

Une image n’est pas un paragraphe de texte et il n’y a pas besoin d’en mettre. Ce n’est pas non plus forcément gênant, puisque tous les navigateurs savent afficher normalement les images, même avec les balises de paragraphe superflues. Cela dit, si on souhaite afficher des images sur toute la largeur, comme c’est le cas sur mon blog, ces balises gênent la mise en page. Je veux que l’image soit bord à bord, sans la moindre bordure, mais en revanche le texte ne doit pas coller les bords de la fenêtre pour rester lisible. Ainsi, je veux définir les images à 100 %, mais je veux ajouter un peu de marge sur le texte.

images-balise-p

Pour régler ce problème, le plus simple est de retirer les balises <p>, mais uniquement autour des images — on veut les conserver autour du texte. Il se trouve que c’est possible, et c’est même assez simple : il suffit d’ajouter cette fonction au fichier functions.php de votre thème :

function filter_ptags_on_images($content){
   return preg_replace('/<p>s*(<a .*>)?s*(<img .* />)s*(</a>)?s*</p>/iU', '123', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

Et voilà, les images ne seront plus transformées en paragraphes ! Je n’ai pas inventé le code, il vient de cet article.

Publicités

4 commentaires sur “Retirer les balises <p> autour des images

    1. J’utilise toujours ce code chez moi, sans aucun problème.

      Je dirais que c’est soit un défaut avec l’hébergement (fonction PHP manquante ?), soit un conflit avec le thème utilisé ou un plugin installé. Bref, en l’état, difficile de savoir ce qui cloche…

      J'aime

      1. J’ai réussit à trouver une alternative en utilisant des ul / li dans une boucle PHP et en mettant les images directement dans un article. Voici le code pour illustrer :

        have_posts()) : $the_query->the_post(); ?>

        J'aime

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s