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:
Dit is een paragraaf, hierna een afbeelding
En dit is de laatste paragraaf
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:
$("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.
function verwijder_p_tags_rond_afbeeldingen($content)
{
$content = preg_replace('/\s*()?\s*()\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
return preg_replace('/\s*(
Merk op dat we dit ook doen rond iframes!