Automatisch afbeeldingen centreren in WordPress met jQuery

Posted at July 12, 2011

Onlangs ben ik van thema geswitched in WordPress. Mijn vorige thema ging anders om met afbeeldingen dan mijn huidige thema, hierdoor heb ik een groot aantal posts met afbeeldingen erin die niet gecentreerd zijn terwijl dit in mijn nieuwe thema wel zo wenselijk is.

Als je normaal een afbeelding invoegt en hem niet centreert genereert WordPress deze code:

Als je hem wel centreert via de wordpress backend krijg je dit:

Als je alles wilt centreren ongeacht hoe het is ingesteld moet je dus alle

’s die een plaatje bevatten centreren. CSS is nog niet in staat om dit te doen dus wendde ik me tot jQuery:

$(document).ready(function() {
    $("p:has(.alignnone)")
    .add("p:has(.alignnone)")
    .add("p:has(.alignright)")
        .addClass("center");
});

(Houdt er wel rekening mee dat je jQuery wel ingeladen moet hebben)

Ik voeg dynamisch de klasse center toe, in mijn CSS heb ik een regel waar ik de de klasse center centreer:

.center {
    text-align:center;
}