Hoe geef je een WordPress galerij een mooier uiterlijk met CSS

Leestijd: 5 minuten

Hoe geef je een WordPress galerij een mooier uiterlijk met CSSDe standaard styling van de galerij is niet lelijk, maar is ook niet spectaculair. Ben je helemaal tevreden met de standaard styling van de fotogalerij, dan hoef je uiteraard niets te veranderen.

Het is gelukkig heel goed mogelijk om ook de standaard galerij qua uiterlijk aan jouw smaak aan te passen. Hiervoor moet je dan wel dieper in de code duiken.

Wanneer een pagina met een galerij wordt geladen, voegt WordPress de volgende styling regels (CSS) aan de pagina toe (afhankelijk van de opties die je hebt geselecteerd voor de galerij):

Standaard WordPress gallery CSS styling zoals ingevoegd in de pagina

Deze CSS styling van de galerij staat “hard-coded” in de software, in bestand wp-includes/media.php.

Alle extra styling, zoals de styling van de bijschriften onder de afbeeldingen (captions), wordt gedaan in:

  • het style.css bestand van je thema. Zorg er hierbij wel voor dat je gebruik maakt van een child theme, zodat je aanpassingen niet worden overschreven bij een update van het thema.
  • een extra stylesheet dat je speciaal voor aanpassingen aan je thema maakt, en die je importeert in je style.css bestand met het @import commando.
  • een speciale CSS plugin als Simple Custom CSS.

Zelf maak ik liefst alle veranderingen in het style.css bestand van mijn child theme.

Als regel verander je nooit iets aan de “core” WordPress bestanden. Dit kan er namelijk voor zorgen dat je site niet meer of niet goed werkt. Daarnaast verdwijnen alle gemaakte aanpassingen wanneer er een nieuwe WordPress versie wordt geïnstalleerd.

Verander alleen bestanden binnen je (child) thema of gebruik een plugin.

Schakel de standaard galerijstijl uit

Om te voorkomen dat WordPress de standaard styling in de pagina zet moet je dit uitzetten. Dit doe je in het functions.php bestand van je child theme (of in een eigen plugin). Het functions.php bestand bevat extra functies die je (child) theme toevoegt aan de standaard WordPress installatie.

Je wilt dat je site blijft werken of snel weer werkend is te krijgen. Maak daarom vóór je aanpassingen maakt aan bestanden op je site eerst een complete backup van je site.

Zelf download ik met FTP altijd een originele versie van een bestand voor ik er wijzigingen in ga maken. Maak je een fout, dan kun je de kopie weer eenvoudig terugzetten.

Je kunt het functions.php bestand eenvoudig in de WordPress admin omgeving bewerken:

  1. Ga in het linker zijmenu naar Weergave | Editor om de pagina Thema’s bewerken de openen.

  2. Het grijze editorgedeelte in het midden laat automatisch de inhoud van het style.css bestand van je (child) thema zien. Hier komen we later terug.

  3. In de grijze balk aan de rechterkant staat het bestand Themafuncties (functions.php) onder het kopje Templates. Klik op de naam om het bestand in de editor te openen.

  4. Scroll in de editor naar de laatste regel in het bestand, klik met de muis aan het eind van die regel, en druk tweemaal op de toets. Dit voegt twee lege regels onder de regel toe. (netheid is alles in programmeren).

  5. Kopieer en plak de volgende PHP code aan het einde van het bestand:

  6. Klik op de blauwe Bestand bijwerken button onder de editor om de wijziging op te slaan.

Laadt je de pagina met de galerij opnieuw (druk op Ctrl-F5), dan zie je dat alle afbeeldingen onder elkaar staan, en dat er verder geen styling meer is:

WordPress galerij zonder standaard styling regels

Stel de kolombreedtes voor de galerij in

In de standaard styling regels, die WordPress toevoegt aan de pagina, staat de maximale breedte van de afbeeldingen in de galerij. In het voorbeeld ging het om drie foto’s, en de breedte van de kolom was daarom 33%, maar de breedte van een kolom in een galerij is afhankelijk van het geselecteerde aantal kolommen.

In het media.php bestand wordt de maximale breedte van de afbeeldingen als volgt berekend:

Nu de standaard styling is uitgeschakeld weet de webpagina niet hoe breed de afbeeldingen maximaal mogen zijn. Je zult – met behulp van CSS regels – de pagina moeten vertellen hoe breed een afbeelding maximaal mag zijn op basis van het geselecteerde aantal kolommen.

Berekeningen zoals hierboven zijn in CSS niet mogelijk; je moet voor elk verschillend aantal kolommen de maximale breedte van de afbeeldingen zelf opgeven.

Gelukkig heb ik dit al voor je berekend. Je hoeft de regels alleen maar toe te voegen aan het style.css bestand:

  1. Ga weer naar Weergave | Editor.

  2. Het grijze editorgedeelte in het midden laat automatisch de inhoud van het style.css bestand van je (child) thema zien. Staat het vorige bestand er nog, dan open je het style.css bestand door in de grijze balk aan de rechterkant het bestand Stylesheet (style.css) onder het kopje Styles te klikken.

  3. Met alle responsive sites tegenwoordig is de juiste plaats van de code niet altijd eenvoudig te bepalen. Mijn methode is:

     

    Druk Ctrl-F om de zoekbox in je browser te open.

    Zoek naar de eerste @media regel in het style.css bestand.

    Komt @media niet voor in het bestand, dan heb je geen responsive website (en dus een ander probleem), en kun je de code direct aan het einde van het bestand invoegen.

    Komt @media wel voor, voeg de code dan boven de eerste regel met @media toe aan het bestand.

    Zelf maak ik eerst een scheiding tussen de rest van de CSS regels en wat ik zelf toevoeg, zoals:

  4. Kopieer en plak de volgende CSS code in het bestand:

  5. Klik op de blauwe Bestand bijwerken button onder de editor om de wijziging op te slaan.

Voeg je eigen gallery CSS styling toe

De galerij begint er weer goed uit te zien. De afbeeldingen staan weer naast elkaar, er is alleen nog geen enkele styling aan de afbeeldingen toegevoegd. Dat gaan we nu doen.

Je eigen stylingregels kun je het best onder de kolomregels in het style.css bestand zetten, zodat je alles overzichtelijk bij elkaar hebt. Maak gebruik van commentaren in de code om aan te geven wat je precies hebt gedaan, zodat je dit later eenvoudig kunt terugvinden.

In de volgende CSS regels heb ik aan de basisstijl van de afbeeldingen in de galerij heel wat extra styling gegeven. In de commentaren achter de regels zie je wat elke regel doet:

Het effect van deze CSS styling regels op mijn galerij:

Het effect van de aangepaste CSS styling regels op mijn galerij

Uiteraard is het geheel aan jou om jouw galerij te stylen zoals je zelf wilt. Je kunt met kleuren werken, andere lettertypes gebruiken, je kunt je fantasie er op loslaten. Doe eens gek, bijvoorbeeld:

Gekke stijl voor je WordPress galerij

Zoals je hopelijk hebt kunnen zien, is het toevoegen en aanpassen van fotogalerijen is niet zo moeilijk als het lijkt. Gebruik mijn CSS regels als begin en tover jouw standaard WordPress galerij helemaal om naar jouw smaak.

Bekijk ook deze gerelateerde artikelen

Vragen of opmerkingen over deze handleiding? Laat dan je reactie hieronder achter.

Bij het maken van deze handleiding is gebruik gemaakt van WordPress versie 4.2.2. De handleiding wordt aangepast wanneer nieuwe WordPress versies veranderingen met zich meebrengen die in de handleiding moeten worden opgenomen.

Deze handleiding is voor het laatst bijgewerkt op 12 oktober 2017 om 15:46.

Reageer op dit artikel

Laat als eerste een reactie achter.

Abonneren op
avatar