WordPress: tag-links opmaken met CSS

Als je een kant-en-klaar wordpress thema gebruikt (en daar tevreden mee bent) kun je dit overslaan.

Als je zelf de lay-out wilt ontwerpen of aanpassen dan maakt wordpress het je erg makkelijk.

De meeste zaken zijn tenslotte al voor gedefinieerd.

Maar als je er voor kiest de tags te tonen dan lijkt het lastig om deze met CSS op te maken. De tags worden namelijk alleen als link getoond. Dus bijvoorbeeld als: <a href=”http://www.didacteur.be/tag/antioxidanten” rel=”tag”>antioxidanten</a>

Aan deze tag (a) kun je geen class of id toekennen, want deze wordt on-the-fly gegenereerd. De code hiervoor staat in het bestand category-template.php.

Category-template.php aanpassen of jquery gebruiken

Je zou dit bestand aan kunnen passen maar dat is niet de simpelste oplossing. Bovendien is dit een core-bestand, d.w.z. dat het deel uitmaakt van de WordPress installatie. Vaak is het verstandiger alleen onderdelen van je thema te bewerken. Als het dan fout gaat, blijft WordPress in elk geval werken.

Dan zou je nog voor de jquery-functie ‘wrap’ kunnen kiezen. Hiermee kun je specifieke tags in een andere tag (bijvoorbeeld <span></span>) zetten.

HTML en CSS

Toch kan het eenvoudiger, met een heel klein beetje HTML en zoveel CSS als je zelf wilt.

Om de tags die aan je post verbonden zijn heb je niet meer nodig dan de volgende code: <?php the_tags(); ?>

Door deze code in een alinea (<p></p>) of div (<div></div>) te zetten en deze een klasse of id te geven kun je met behulp van CSS de hyperlinks (<a></a>) opmaken.

Wij hebben dat op de volgende manier gedaan:

<p class="tags"><?php the_tags(); ?></p>

en met de volgende regels CSS hebben we de tag-links opgemaakt.

.tags a:nth-child(odd) {background: #FFC; margin:2px; padding:3px; border:1px solid #008080; border-radius:5px; }
.tags a:nth-child(even) {background: #CfF; margin:2px; padding:3px; border:1px solid #008080; border-radius:5px; }

Het resultaat kun je hieronder zien