18. WordPress: Elk artikel een andere opmaak/stijl geven.

Het komt misschien niet vaak voor, maar er bestaat een mogelijkheid om elk bericht binnen een bepaalde categorie een andere opmaak mee te geven. Als ik er even over nadenk is dit zeer geschikt indien je een site hebt met meerdere onderwerpen en elk onderwerp (elke categorie) een andere stijl wilt meegeven.

Maar hoe doen we dat nu?
Om dit te kunnen realiseren moeten we eerst een nieuwe functie toevoegen, namelijk de post_class. In principe hebben we in index.php en single.php elk artikel binnenin een DIV geplaatst met als ID ‘post’. Dit zoeken we dus: <div class="post" id="post-<?php the_ID(); ?>">
Vervang dit door volgende code: <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Doe dit zowel in index.php als in single.php! Optioneel (naar eigen wens) kan je dit ook doen in archive.php en category.php).

wp-serie-47_post-class_toevoegen

Door deze post_class mee te geven zal elk artikel (elke post) een andere class meekrijgen. Bekijk dat maar eens in de broncode van je website nadat je de post_class hebt toegevoegd, dan ziet het er ongeveer als volgt uit:



<div id="post-275" class="post-275 post hentry &lt;b&gt;category-geld-met-je-website&lt;/b&gt; tag-test"></div>

Zie je het al? We kunnen hier duidelijk de categorie uithalen, in mijn geval is dit: category-geld-met-je-website.

Nota: Er staan verschillende classes (category-geld-met-je-website, hentry, post, post-275,…). Al deze kunnen we afzonderlijk gaan bepalen in onze stylesheet. In mijn voorbeeld hou ik het bij het aanpassen van berichten in een bepaalde categorie.

wp-serie-48_post-class_resultaat

Open nu style.css en voeg er volgende code aan toe (let er bij jou wel op dat de benaming anders zal zijn en afhankelijk is van de gewenste categorie):
.category-geld-met-je-website{background-color: #c0c0c0;}

Sla het op, keer terug naar je browser en bekijk het resultaat. Wat zien we nu dat veranderd is?
De berichten in je gekozen categorie (bij mij de categorie ‘geld met je website’) heeft nu een andere achtergrondkleur gekregen. Klik op de link naar het artikel en je zal zien dat ook daar de achtergrondkleur is aangepast.

Als dat geen leuke manier is om de verschillende secties op je website te verduidelijken, dan weet ik het ook niet meer.

Maar er is nog: je kan dit nog verder uitbouwen op diverse wijzen. Heb je bijvoorbeeld een WordPress website met verschillende auteurs, dan kan je ook elk artikel van een auteur een andere stijl geven.

Elke auteur een andere stijl.

Open single.php, index.php, archive.php en category.php (aanpassingen in alle bestanden of enkel in de bestanden waar je dit wilt) en voeg de post_class ook daar aan toe zodat het er als volgt uitziet:
<div id="post-&lt;?php the_ID(); ?&gt;&lt;p&gt;">&gt;</div>
Nu moeten we in dezelfde bestanden waarin we deze post class toevoegen nog een kleine aanpassing doorvoeren. IN de loop moet er nog een stukje code komen. Zoek dus naar:
<!--?php if(have_posts()) : ?--><!--?php while(have_posts()) : the_post(); ?--> en daaronder typ je volgende code bij:
<!--?php $author = get_the_author_meta('display_name'); ?-->

wp-serie-49_post-class_auteur

Dit zorgt er voor dat de naam van de auteur wordt opgeroepen. In de post_class wordt deze dan weergegeven. Bij mij ziet het er in de broncode nu als volgt uit:


<div id="post-275" class="post-275 post hentry category-geld-met-je-website tag-test admin">

Zie je daar op het einde ‘admin’ staan? Dat is de gebruikersnaam dat ik heb gekozen bij de installatie van mn WordPress test-site. De volgende stappen zijn simpel. Navigeer naar style.css en voeg daar je bepalingen aan toe; bijvoorbeeld:
.admin {background-color: blue;}

Aan de hand van ‘conditional tags’ kan je jouw WordPress website ook dynamischer maken, maar daar hebben we het over in het volgend hoofdstuk.

Categorie template manipuleren.

Category.php ken je al, dit hebben we eerder al aangemaakt. Wist je nu ook dat je op een vrij eenvoudige manier elke categorie pagina een andere look kan geven? Het is vrij eenvoudig:
Ga eerst na welke ID de categorie heeft dat je wilt wijzigen.

Kopieer vervolgens category.php en plak het opnieuw in de categorie met de naam category-ID.php waarbij ‘ID’ dus staat voor de ID van de categorie. Heeft jouw categorie het nummer 5, dan wordt de naam van het bestand category-5.php

Vanaf dit punt ben je geheel vrij om het bestand te wijzigen zoals je zelf wilt.

Het volgende hoofdstuk wordt weer leuk met de conditional tags. Alweer een mogelijkheid om je WordPress site meer flair en variatie te geven.


 

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close