Wordpress Berichten Individueel Stylen

Het uiterlijk van je Wordpress website wordt bepaald door het thema. Dit betekent dus ook dat het uiterlijk of de styling van je berichten (posts) wordt bepaald door je thema.

Normaal gesproken zien al je berichten er hetzelfde uit, conform hetgeen wat jij aan styling doorgevoerd hebt in je thema voor je berichten.

Verschillende styling voor verschillende berichten

Deze week kreeg ik een interessante vraag van Nadine, één van de cursisten van mijn Wordpress Thema's cursus. Zij vroeg of het binnen één thema ook mogelijk was om verschillende styling toe te passen voor verschillende berichten.

Uiteraard is dit mogelijk, alleen was het wat lastig om dit in een mail uit te leggen. Ik heb toen Nadine beloofd hierover een video te maken. Deze video kun je hieronder bekijken. Mocht je te weinig tijd hebben voor de video, dan kun je ook de uitleg volgen die ik onder de video plaats.

Je ziet in de video een aantal code fragmenten voorbij komen, ik noem deze code fragmenten ook in de uitleg onder de video. Je kunt dus eventueel deze code kopiëren, aanpassen en gebruiken in je eigen thema.

Werken met conditional tags

In de bovenstaande video zie je twee manieren om Wordpress berichten individueel te stylen. De eerste manier werkt met zogenoemde conditional tags. Een conditional tag is een stukje code dat alleen uitgevoerd wordt als een bepaalde conditie waar is.

Stel je hebt in Wordpress 3 berichten, bericht A, bericht B en bericht C. Nu maak je een conditional tag aan die alleen geldt voor bericht B. De code wordt dan alleen uitgevoerd als bericht B wordt geopend. Dus, als de conditie "het is bericht B" waar is, dan wordt de code uitgevoerd.

Wordt bericht A of bericht C geopend, dan is de conditie "het is bericht B" dus niet waar en wordt de code niet uitgevoerd.

Je zou op zo'n manier met conditional tags voor specifieke berichten een aparte div kunnen maken en deze div van opmaak kunnen voorzien met behulp van CSS.

Waar plaats je de conditional tags

Conditional tags plaats je in je template bestanden. Dus, als je voor een bericht een conditional tag maakt, dan plaats je deze code in het template bestand single.php van je thema.

Je zou ook voor een Wordpress pagina een conditional tag kunnen maken. Deze plaats je dan in het template bestand page.php.

Een conditional tag voor een categorie zou je in het template bestand category.php bestand kunnen plaatsen.

De conditional tags in de video

In de video zie je dat ik conditional tags in het single.php bestand zet. Deze conditional tags voeren iets uit wanneer een bericht met een bepaald ID wordt geopend. De code voor deze conditional tag ziet er als volgt uit:

<?php if (is_single( '116' )) { ?>
<div class="blue">
<?php
}
?>

In deze code zie je dat de conditie is dat het bericht ID 116 moet zijn. Wordt inderdaad het bericht met het ID 116 geopend, dan wordt een div met de class blue aangemaakt.

Wordt er een bericht met een ander ID geopend, dan is de conditie (het is het bericht met ID 116) dus niet waar, en wordt de code niet uitgevoerd.

De div met de class blue zou je in het style.css bestand van je thema de juiste styling kunnen meegeven. De onderstaande code zorgt bijvoorbeeld voor een blauwe achtergrond met oranje alineatekst:

div.blue {
background-color:#1c3051;
}

.blue p {
color:#ff6600;
}

Zou je nu voor een tweede bericht, bijvoorbeeld het bericht met het ID 115, ook individuele styling willen doorvoeren, dan zou je een tweede conditional tag kunnen aanmaken. Zo zou je bijvoorbeeld voor het bericht met het ID 115 een div met de class red kunnen aanmaken, en dan deze class van styling kunnen voorzien (bijvoorbeeld een rode achtergrondkleur).

Je kunt op zich prima met conditional tags werken om voor specifieke berichten specifieke styling te regelen, maar wat als je nu 50 verschillende berichten hebt. Je krijgt dan een behoorlijk aantal conditional tags achter elkaar. Dus, het is misschien niet de meest efficiënte oplossing.

Gaat het maar om een paar berichten, dan zou je de individuele styling prima met conditional tags kunnen doen.

Werken met arrays

In het bovenstaande voorbeeld met conditional tags, maakten we voor bepaalde berichten een extra div aan. Alleen, deze div moet ook weer worden afgesloten. En daarbij, deze afsluitende div moet alleen geplaatst worden in de berichten waarvoor de conditional tags gelden. In de berichten waarvoor de conditional tags niet gelden, wordt immers geen extra div aangemaakt en deze hoeft dus ook niet te worden afgesloten.

Je zou nu weer voor elk bericht waarvoor een conditional tag geldt een tweede conditional tag kunnen maken om de aangemaakte div af te sluiten. Het kan ook een stuk efficiënter met een array.

We willen voor alle betreffende berichten dezelfde actie doen (het afsluiten van de div), dus we kunnen in één conditional tag alle bericht ID's noemen waarvoor deze actie plaats moet vinden.

Meerdere waardes waarvoor een bepaald stukje code moet gelden, noem je een array. Hieronder zie je de code met een array waarin we voor de berichten met de ID's 115 en 116 een afsluitende div plaatsen:

<?php if (is_single( array( '115', '116' ))) { ?>
</div><!-- einde div-->
<?php
}
?>

Automatisch een unieke div aanmaken voor elk bericht

Er is ook nog een eenvoudiger manier om berichten individueel te stylen. Je kunt namelijk met een klein stukje code in het single.php bestand van je template automatisch een unieke div aanmaken voor elk bericht.

Elk bericht in Wordpress heeft een uniek ID. In het voorbeeld van de conditional tags maakten we gebruik van deze bericht ID's. Je kunt met onderstaande code ook een div aanmaken met het ID van het bericht dat geopend wordt.

<div id="post-<?php the_ID(); ?>">

Deze code maakt een div aan met het ID post- en dan het bericht ID er achter. Dus een bericht met het ID 115 zal met bovenstaande code een div krijgen met het ID post-115.

Deze div zou je weer van styling kunnen voorzien. Voor een blauwe achtergrondkleur met oranje alinea tekst zou je deze CSS code kunnen gebruiken:

div#post-115 {
background-color:#1c3051;
}

#post-115 p {
color:#ff6600;
}

En zo zou je dus voor elke unieke div aparte styling kunnen doorvoeren.

Zo, dit was een behoorlijk lang verhaal en een behoorlijk lange video. Ik hoop dat je er iets mee kunt en dat je met deze informatie in staat zult zijn om extra leuke dingen te doen met de vormgeving van je Wordpress berichten.

Ik zou het leuk vinden als je een reactie achterlaat of dit artikel deelt via de social media buttons bovenaan dit artikel.

Plaats reactie

Beveiligingscode
Vernieuwen