25. WordPress: Het stylen van de comments.

Het stylen van de reactiepagina (comments.php) vind ik persoonlijk één van de moeilijkste zaken om vorm aan te geven. Je moet met zoveel dingen rekening houden en er zijn ongelofelijk veel zaken die je kan aanpassen. Hier gaan we nu trachten zoveel mogelijk duidelijkheid te verschaffen over de leuke mogelijkheden die je hebt binnenin de reactie-pagina.

Aan de slag maar onthoud:

Eerder in de serie gaven we reeds de inhoud van onze comments.php mee. Daarop gaan we verder werken. Maar het is belangrijk om te weten dat er sinds de release van WordPress versie 3.0 een aantal veranderingen werden doorgevoerd bij de comments. De code is daar eenvoudiger op het eerste gezicht, maar het is moeilijker om deze aan te passen. Mijn voorbeelden gaan dus gewoon verder op dit oude bestand, dat nog perfect werkt met de nieuwe bepalingen sinds WordPress 3.0

Reacties van Auteurs onderscheiden

Als je reacties toelaat op je website is het belangrijk om zelf ook te reageren indien je bezoekers een vraag stellen. Het is ook belangrijk dat jouw bericht als auteur / administrator opvalt tussen alle andere reacties.

Om dit te realiseren gaan we eerst een lijntje code toevoegen aan style.css:

.authcomment {
background-color: #B3FFCC !important;
}

Daar houden we het voorlopig bij. Nu gaan we comments.php wat aanpassen. Zoek naar het volgend lijntje:


  • We gaan dit aanpassen en uiteindelijk mag het vervangen worden door deze code:

  • " id="comment-">

    Een woordje uitleg: Als je een WordPress site aanmaakt, dan zal je als administrator een ID meekrijgen: 1. De code zal $oddcomment vervangen door authcomment waardoor er dus gelinked zal worden naar de stijl .authcomment dat wordt meegegeven in de style.css; Wat is nu de standaard $oddcomment dat daar in staat? Dat lees je enkele lijntjes verder.

    En wat is het gevolg? Alle berichten van de administrator krijgen nu een ander kleurtje in de achtergrond:

    wp-serie-70-comment-author-style

    Nu kan je de stijl aanpassen zoals je zelf wilt in style.css
    Wil je meerdere auteurs onderscheiden, dan raad ik je volgend artikel aan: wphacks.com – separating author comments.

    Oddcomment: Artikels onderscheiden.

    Hierboven sprak ik over de $oddcomment dat werd bepaald bij het weergeven van de class van de reacties. Wat is dit? Dit is een functie om verschillende artikelen een andere stijl te geven (bijvoorbeeld achtergrondkleur) op zulk een manier:
    – reactie 1: grijze achtergrond
    – reactie 2: rode achtergrond
    – reactie 3: grijze achtergrond
    – reactie 4: rode achtergrond
    – enzovoorts

    Elke twee berichten zal er dus in de class ‘alt’ worden toegevoegd. Je kan dus eenvoudig naar style.css gaan en er bijvoorbeeld volgende code aan toevoegen:

    .alt {
    background-color: #c0c0c0;
    }

    Elk twee bericht zal er nu een reactie zijn met een grijze achtergrond, tenzij de administrator zelf een reactie plaatst, dan zal de reactie nog een andere kleur hebben.

    Commentaren en trackbacks onderscheiden

    Trackback is een begrip dat ik tot nu toe nog niet heb gebruikt in de handleiding. Als je in de instellingen (Discussion Settings) ‘send trackbacks’ aanstaan hebt zal je bij het publiceren van een artikel, waarbij je verwijzingen maakt naar een ander artikel een signaal zenden. Als de andere blog dat signaal herkend zal het automatisch een link met een korte inleiding op de website plaatsen. Het is een leuke manier van linkbuilding.

    Open de comments.php en zoek naar volgende code:

    Onmiddellijk daarachter voeg je nog volgende code toe:

    Ga verder in het bestand op zoek naar volgende code:

    Net daarboven: voeg je volgende code toe:

    Dit is nodig om de IF statement te sluiten die we net hebben toegevoegd.

    Net daaronder zou je volgende code moeten terugvinden:

    Daarboven plaats je dan de volgende lijntjes code bij:

    Trackbacks




    En je bent klaar. Nu kan je de code zelf aanpassen zodat het er uitziet naar eigen wens.

    Gravatars weergeven in het reactie profiel van je bezoekers

    De basis is heel eenvoudig, maar misschien eerst uitleggen wat een gravatar is? Net zoals op diverse forums kan je daar een kleine afbeelding in je profiel toevoegen, de zogenaamde avatar. Gravatar is een dienst waar je zelf een afbeelding kunt aan toevoegen. Dit wordt gelinked aan je emailadres(sen). Als je op een blog een reactie nalaat en de blog is gelinked met avatar, dan zal jouw afbeelding tevoorschijn komen. Bekijk gravatar maar zelf eens: gravatar.com/

    Gravatar toevoegen aan reactie profiel
    Wordpress heeft zelf al de functies klaargezet om een gravatar te tonen, het enige wat je nog moet doen is deze tevoorschijn toveren op je reactiepagina.

    Open comments.php en ga op zoek naar volgende code:

  • 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