Stan Melching

Verwijder p-tags rond image tags in WordPress

21 mei, 2014
en geplaatst in Websites , WordPress

Tijdens het werken aan de website van JRM Glashandel, kwamen we op het punt dat er p (paragraaf) tags rond img (images) tags worden geplaatst. En omdat we voor het eerst met het krachtige Skeleton CSS Boilerplate werken, kwamen we er snel achter dat dit geen gewenste effecten had op de plaatsing van afbeeldingen.

U heeft bijvoorbeeld:

1
2
3
4
5
<p>Dit is een paragraaf, hierna een afbeelding</p>
 
<p><img src="pad-naar-afbeelding"></p>
 
<p>En dit is de laatste paragraaf</p>

Twee tips om de

tag rond afbeeldingen te verwijderen

In deze tutorial / quick tip laten we twee manieren zien om p-tags rond de afbeeldingen te verwijderen.

jQuery

Een slimme jQuery oplossing is het volgende:

1
$("p:has(img)").css("doe hier iets");

Hoewel het veel flexibiliteit geeft, is er nog altijd een kans dat de gebruiker geen javascript aan heeft staan. Daarnaast wordt de p-tag niet compleet verwijderd.

Meer informatie in de jQuery selector has: documentatie.

WordPress functions.php

Een betere manier is om een functie aan te maken – in functions.php – en middels preg_replace de p-tags te verwijderen. Deze “replace” hangen we aan een filter dat de content output reguleert.

1
2
3
4
5
6
7
function verwijder_p_tags_rond_afbeeldingen($content)
{
    $content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
    return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
}
 
add_filter('the_content', 'verwijder_p_tags_rond_afbeeldingen');

Merk op dat we dit ook doen rond iframes!

Deel je opmerking