12. WordPress: comments template maken en stylen.

WordPress is vooreerst een blogplatform, en een blog zou een blog niet zijn als je bezoekers geen reacties kunnen nalaten. WordPress is zo begonnen, maar ondertussen is dit veel verder geëvolueerd en is WordPress een volwaardig CMS systeem. Maar ook een gewone platte site kan er baat bij hebben om reacties toe te laten: het is een makkelijke manier om te communiceren met je bezoekers, iets wat anders veel moeilijker is.

Beginnen met comments.php

Er is geen directe manier om een goede comments.php te coderen. Meestal wordt een standaard bestand genomen en dan lichtjes aangepast om aan de noden te voldoen, maar dat is helemaal ok.

Maak een nieuw bestandje aan met kladblok en noem het comments.php
Kopieer vervolgens alles uit dit tekstbestand in het bestand.

Ik geef je nu ook wat basisopmaak mee voor de comments. Naast hetgeen je in het bestand vindt, zijn er nog heel veel zaken die je kan opmaken met css. Een groter overzicht vind je later terug.

Kopieer alles uit mijn bestandje comments-style.txt en plak het in je style.css bestandje.

Momenteel ga je op je site nog niets zien staan om reacties te kunnen plaatsen, daar gaan we verandering in brengen. Open single.php en onder de sluitingstag dat betrekking heeft op de entry-DIV typ je hetvolgende:

<div class="comments-template">
<?php comments_template(); ?>
</div>

wp-serie-33-comments-einde-entry

Wat we nu hebben gedaan is simpel: we hebben comments.php opgeroepen zodat deze zichtbaar wordt als we een artikel bekijken op de website.
Je kan dit ook op page.php plaatsen, maar echt nodig is dat niet. Er zal daar niet zulk nieuws op geschreven worden dat er moet op gereageerd worden op een vaste pagina.

Niets vergeten?

Heb je na de vorige keer nog de site gevalideerd? Doe dit nu nog eens, controle is heel belangrijk. Vergeten hoe dat in elkaar zat? Bekijk dan even hoofdstuk 7 opnieuw.
Maar: nu zijn er wel meerdere pagina’s om te valideren:

  • Indexpagina (eerste pagina die de bezoeker te zien krijgt)
  • Archief en categorie pagina’s
  • Pagina met zoekresultaten
  • Gewone pagina’s
  • Pagina met een artikel (komende uit de codes van single.php)
  • Pagina met een artikel zonder reacties
  • Pagina met een artikel met reacties (plaats zelf enkele reacties om te testen).

Meer over de comments.php template

Eigenlijk is het niet moeilijk te vatten hoe alles werkt. De template is eigenlijk één grote lijst met geordende lijsten (html code hiervan is <OL>); geordend betekend dus wel dat ze op orde worden gezet met nummers.

Als je comments.php bekijkt dan zal je dit zien. Je ziet een OL met als class ‘commentslist’ en twee lijntjes daarne een LI (een lijst item) met een vreemde class en ID. Elke reactie zal voorzien zijn van een eigen nummer, dit nummer wordt opgeroepen door de php-code die je als ID ziet staan. De bepaling van $oddcomment is nodig om de class te veranderen. Het is een leuke extra: ofwel is de style class ALT (door de $oddcomment bepaling) ofwel STD (standaard). Als we nu in style.css .alt{background-color: blue;} bij typen, dan zal je zien dat de ene reactie een witte achtergrond behoudt en de tweede reactie een blauwe achtergrond.
En zo gaat het verder: reactie nummer drie heeft een witte achtergrond en reactie 4 opnieuw een blauwe achtergrond.
Je kan ook alle reacties van de admin (jij als beheerder) van de site een aparte look geven, maar dat hoort niet thuis in een basishandleiding en gaan we even achterwege houden. Dit zal later zeker aan bod komen in één van de volgende hoofdstukken.

En dit is het einde van onze basishandleiding. We gaan echter hierna verder met het aanpassen van onze WordPress theme en wijden ook meer uit over plugins en de beveiliging van je website/blog.

Ik wil graag afsluiten met enkele afbeeldingen die betrekking hebben op de comments template van WordPress sites. Zoals je zal zien kan je dit ongelofelijk mooi maken en misschien kunnen de afbeeldingen je al wat inspiratie bezorgen:

wp-serie-34-comments-vb1

wp-serie-34-comments-vb2

wp-serie-34-comments-vb3

Daarnaast heb ik nog een meer volledig css bestand beloofd voor het opmaken van de comments uitzicht. Dit kan je hier vinden: comments.css
Hoe gebruik je dit nu? Door naar de broncode te kijken naar de opbouw van de code en de bepalingen kan je precies zien in het css bestandje waar je iets moet aanpassen. De meeste bepalingen zullen opgenomen zijn in het css bestandje dus is dat al een pak werk dat weg is gevallen.

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