Vorige week kwam versie 2.7 van de populaire blog-software WordPress uit. Zo op het eerste gezicht is er voor de bezoeker van WordPress-blogs weinig veranderd. De blogger zelf ziet grote veranderingen in het beheer van het weblog. De interface heeft een complete make-over gekregen en er zijn weer meer mogelijkheden bijgekomen. Eén van de nieuwe mogelijkheden van WordPress 2.7 is “Enhanced comments”, dat inhoudt dat je kunt reageren op reacties. Voorheen kon dit alleen met externe plug-ins en ook dat werkt meestal niet optimaal…

Het nadeel is echter dat de meeste (gratis) WordPress thema’s dit nog niet ondersteunen. Om deze reden zal ik hier stapsgewijs uitleggen hoe je je thema moet aanpassen om hier gebruik van te kunnen maken. Afhankelijk van het thema dat je gebruikt zou het kunnen dat je zelf ook nog wat aanpassingen in de CSS van je thema moet doen. Ik ben er wel vanuit gegaan dat je iets weet van WordPress thema’s.

Stap 1: Maak een backup van je thema / template!!

Stap 2: Stel bij Settings -> Discussion in dat je van Enhanced Comments gebruik wil maken. Het aantal niveaus kun je zelf bepalen. Ik heb deze instelling zelf op 3 niveaus staan.

Header.php

Stap 3: Voeg de volgende code toe aan header.php, voordat wp_head() aangeroepen wordt:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Deze code voegt Javascript aan de pagina toe die ervoor zorgt dat de bezoeker kan reageren op een reactie zonder de pagina te verlaten (lees: zonder een nieuwe pagina te hoeven openen)

Comments.php

Stap 4: Er is een nieuwe functie om reacties weer te geven. Open comments.php en zoek het stuk code dat lijkt op het volgende:

<ul class="commentlist">
<?php foreach( $comments as $comment ) :
// hier de code die per reactie wordt weergeven
endforeach; ?>
</ul>

In WordPress 2.7 kan dit korter. Gebruik de volgende code:

<ul class="commentlist">
<?php wp_list_comments(); ?>
</ul>

Informatie over de wp_list_comments()-functie kun je hier vinden. Let ook vooral op het ‘callback-argument’. Hier kun je alsnog de opmaak van je comments handig kwijt, daar kom ik op terug in stap 10.

Stap 5: Om ervoor te zorgen dat de Javascript – die wordt gegenereerd door de code die je hebt toegevoegd in stap 3 – werkt moet het reactieformulier in een div met als id “respond” worden geplaatst:

<div id="respond"><!-- hier het formulier --></div>

Stap 6: De titel boven het reactieformulier luidt meestal “Leave a reply” of “Plaats een reactie”. Je kan nu ook een titel instellen die verschijnt als de bezoeker reageert op een reactie.

Als het goed is staat er zoiets:

<h3>Leave a reply</h3>

En dat kun je vervangen door:

<?php comment_form_title( 'Plaats een reactie', 'Reageer op %s' ); ?>

Als de bezoeker dan reageert op een reactie komt er “Reageer op [naam van degene waar je op reageert]” te staan.

Stap 7: Plaats binnen het formulier de volgende code:

<?php comment_id_fields(); ?>

Deze code maakt een ‘hidden field’ aan waarmee het ID van de reactie waar de bezoeker op reageert wordt meegestuurd.

Stap 8: Zorg dat het tekstvak waar de bezoeker de reactie in kan typen het ID “comment” heeft.

Stap 9: Als de bezoeker op “Reageer op reactie” klikt wordt de titel van het formulier aangepast (“Reageer op [naam]” in plaats van “Plaats een reactie”) en wordt het ID van de reactie waar hij/zij op reageert in een ‘hidden field’ van het formulier geplaatst. De bezoeker de mogelijkheid te geven om dit te annuleren doe je met de volgende code:

<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>

Mocht je het handig vinden: mijn comments.php

Functions.php

Stap 10: In stap 4 heb je de wp_list_comments()-functie toegevoegd aan comments.php. Deze functie handelt het weergeven van de reacties af. Met het callback-argument kun je de opmaak per reactie instellen.
k roep wp_list_comments() op deze manier aan:

<?php wp_list_comments(array('type'=>'comment', 'avatar_size'=>60,
'reply_text'=>'Reageer op deze reactie', 'callback' =>'mytheme_comment',
'style' => 'ul')); ?>

Type, avatar_size, reply_text en style spreken volgens mij voor zich. Het callback-argument verwijst naar een functie waarin ongeveer de code staat die ik in de stap 3 heb vervangen door de nieuwe functie. Deze functie heb ik aangemaakt in functions.php:

Zie hier mijn mytheme_comment()-functie

Het stuk code wat ik heb toegevoegd aan de oude code is:

<div class="reply"><?php comment_reply_link(array_merge( $args,
array('add_below' => 'comment', 'depth' => $depth, 'max_depth'
=> $args['max_depth']))) ?></div>

Met deze code wordt de “Reageer op reactie”-link aangemaakt, zie de WordPress Codex voor meer informatie over deze functie. Let ook op de missende <li>-tag op het einde. WordPress handelt dat verder zelf af.

Style.css

Stap 11: Eventueel aanpassen van de CSS van je thema.  Je zal zelf moeten kijken of dit voor jouw thema geldt. De code die ik heb toegevoegd is:

.comment .commentclear{
  padding-bottom: 10px;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

.comment .children{
  margin-left: 50px;
}

Nogmaals, de links naar mijn stukjes code:

Functions.php
Comments.php

Meer informatie kun je ook vinden in het Engelstalige artikel van Otto.

Als het goed is heb je nu een werkende WordPress-weblog waarmee je bezoekers kunnen reageren op de reacties van andere bezoekers, gefeliciteerd!

Heb je vragen of opmerkingen? Ben ik iets vergeten wat je ook graag wil weten? Laat het dan even weten in de reacties hieronder. Je mag ook reageren op elkaar natuurlijk ;-)