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:


<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

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


<li class="<?php if (1 == $comment->user_id) $oddcomment = "authcomment"; echo $oddcomment;?>" id="comment-<?php comment_ID() ?>">

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:
<?php foreach ($comments as $comment) : ?>

Onmiddellijk daarachter voeg je nog volgende code toe:

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

Ga verder in het bestand op zoek naar volgende code:
<?php endforeach; /* end for each comment */ ?>

Net daarboven: voeg je volgende code toe:
<?php } /* End of is_comment statement */ ?>
Dit is nodig om de IF statement te sluiten die we net hebben toegevoegd.

Net daaronder zou je volgende code moeten terugvinden:
<?php else : // this is displayed if there are no comments so far ?>

Daarboven plaats je dan de volgende lijntjes code bij:


<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != 'comment') { ?>
<li><?php comment_author_link() ?></li>
<?php } ?>
<?php endforeach; ?>
</ol>

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:


<div class="commentmetadata">

Vervolgens voeg je net daarachter volgende code aan toe:
<?php echo get_avatar(get_comment_author_email(), 80, $default_avatar ); ?>

Je ziet dat er na de get_avatar drie bepalingen staan: eerst wordt de email van de admin opgehaald, vervolgens staat er ‘80’ wat de grootte van de afbeelding bepaald (zowel breedte als hoogte) en vervolgens staat er $default_avatar wat je kan veranderen in de url van de standard afbeelding indien een gebruiker geen lid is van gravatar.

Tip: Maak zelf een avatar dat binnen je design past en eventueel de naam van je website draagt.

Toegelaten tags weergeven

Binnenin de reacties kunnen bezoekers ook bepaalde tags gebruiken. Ze kunnen iets in het vet schrijven, of een code achterlaten; Daarom is het nuttig om mensen die niet volledig vertrouwd zijn met html-tags om aan te tonen welke ze kunnen gebruiken. Het is zeer simpel en kan door volgende code toe te voegen aan comments.php
<?php echo allowed_tags(); ?>

Nofollow links in de reacties verwijderen

WordPress duidt standaard de links in je reacties aan als ‘nofollow’ (hierover heb ik het reeds gehad in deze serie); Voor bepaalde redenen kan je dit weghalen. De meest frequente reden is om aandacht te trekken van andere bezoekers en hen te motiveren om actief deel te nemen op je website en daardoor als beloning ‘link love’ krijgen.

In eerste instantie kan je het jezelf gemakkelijk maken: Ga naar de WordPress site en zoek een plugin. Plugins die daar goed voor werken zijn de volgende:
1: Dofollow 4.0: kimmo.suominen.com;
2: Nofollow Free: michelem.org.
Vergeet niet even de plugin uit te zetten en terug te activeren nadat je je WordPress hebt geupdate.

Een tweede oplossing is het aanpassen in de zogenaamde ‘core’-bestanden van WordPress (de standaard pagina’s die je bij de download van WP hebt gebruikt). Meestal wordt dit niet aangeraden maar de oplossing is echter zo simpel dat we dit wel kunnen doen om te vermijden dat je alweer een plugin moet gebruiken:

Open het bestand met de naam comment-template.php dat je terugvind in het mapje ‘wp-includes’.
Daar zoek je volgende code:
$return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";

In die code wis je rel=’external nofollow’ zodat je code er dan als volgt uitziet:
$return = "<a href='$url' class='url'>$author</a>";

Een nadeel is wel dat je dit telkens moet aanpassen wanneer je je WordPress versie upgrade.

Nuttige plugins voor de reactie pagina.

Af en toe zijn er heel nuttige plugins te vinden. Ook voor de reactiepagina zijn er tal van mogelijkheden. Ik heb er alvast enkele geselecteerd:

Resources en download een complete comments.php

Tijdens mijn zoektocht naar inspiratie voor meer inhoud voor de WordPress serie kwam ik ook nog volgende link tegen:
christianmontoya.com. Hier kan je een volledige functionele Comment Template downloaden en gebruiken.
Nota 1: Ik heb het zelf niet uitgetest;
Nota 2: De post is al enkele jaren oud dus maak zeker een backup van je huidige comments.php alvorens deze te gebruiken.

Wederom een prachtig voorbeeld hoe de WordPress community alles graag deelt:
darrenhoyt.com. Op deze site kan je voorbeelden vinden en downloaden van stijlen voor je reactie pagina’s. Ideaal om er uit te leren!

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