Zo maak je een FAQ met openklappende antwoorden en dieplinks

faqDe FAQ is de best bezochte pagina op deze website. De pagina krijgt zelfs meer pageviews dan de homepage. Ook blijven bezoekers langer op deze pagina: gemiddeld 3:36 min. tegen 1:42 min. op de homepage.
Dit komt vooral doordat een FAQ veel informatie bevat en dus ook veel verschillende zoekwoorden. Het grootste deel van het verkeer naar FAQ’s komt via zoekmachines.

Alle reden dus om een FAQ op je website te creëren. Een mooie en handige uitvoering voor zo’n pagina is een FAQ met openklappende antwoorden: een lijst vragen met antwoorden die openklappen als je op een vraag klikt. In dit artikel leg ik uit hoe ik de FAQ-pagina hier op wpwebbouw.nl heb gemaakt.

Dieplinken naar een specifieke vraag

Als je op deze link klikt kom je in één keer uit bij vraag 26 met het antwoord al opengeklapt. Ook het geheim achter deze truc wordt hieronder onthuld.

jQuery

De techniek achter de openschuivende antwoorden is jQuery. jQuery is een Javascript-bibliotheek waarmee allerlei interface-functies en effecten worden gerealiseerd die je tegenwoordig op websites tegenkomt. Bijvoorbeeld het hoekje rechtsonder in een edit-veld waarmee je dat veld groter kunt trekken. Of accordion-menu’s. Maar ook drag and drop-toepassingen, sliders, popup kalenders en leuk vormgegeven tooltips.

Plugin of zelf doen?

Veel WordPress-gebruikers denken dat je dit soort dingen alleen maar kunt realiseren met een plugin. Ik vind plugins heel handig, maar als het om dit soort eenvoudige functies gaat bouw ik ze liever zelf, omdat ik dan zeker weet dat de functie precies doet wat ik wil en er geen overbodige code aan de website wordt toegevoegd.

Wat hebben we nodig?

jQuery wordt meegeleverd met WordPress en deze bibliotheek kun je ook benutten voor eigen gebruik in je thema. De volgende dingen moeten gebeuren:

  1. laad de jQuery bibliotheek
  2. laad je eigen jQuery script
  3. zorg voor de juiste html in de FAQ-pagina
  4. zorg dat de bijbehorende CSS is geladen

jQuery

De punten 1 en 2 doen we in één stukje code. Deze code wordt geplaatst in functions.php. Functions.php staat in de themedirectory van je theme.
De functie zorgt ervoor dat jouw custom jQuery code wordt geladen in de header van je website. Omdat jouw custom code alleen werkt als de jQuery bibliotheek is geladen, wordt de ‘dependency’ parameter array('jquery) aan de functie toegevoegd. Dit zorgt ervoor dat jQuery is geladen voordat de custom functie wordt aangeroepen.

function load_my_scripts() {
     wp_register_script('custom', get_template_directory_uri() .  '/js/custom.js', array('jquery'));
     wp_enqueue_script('custom');
}
add_action('wp_enqueue_scripts', 'load_my_scripts', 0);

Het open- en dichtklappen van de antwoorden wordt geregeld in deze code in het custom script:

// custom.js locatie: theme-directory/js/custom.js
jQuery(document).ready(function($){
$('.harmonica-head').click(function() {
	$(this).toggleClass('open').next('.harmonica-content').slideToggle();
});
});

Html

De html van de FAQ:

<h4 class="harmonica-head" id="1">1. Wat is WordPress?</h4>
<div class="harmonica-content">WordPress is het meest gebruikte content management systeem (cms) ter wereld. Bla bla bla bla etcetera</div>

<h4 class="harmonica-head" id="2">2. Was WordPress geen blogsoftware?</h4>
<div class="harmonica-content">WordPress was inderdaad ooit begonnen als blogsoftware maar tegenwoordig draait een op de vier websites ter wereld erop. Bla bla bla bla etcetera</div>

etc.

$(".harmonica-head").click(function() beschrijft wat er gebeurt als een bezoeker op een vraag klikt. De vragen zijn herkenbaar voor de jQuery doordat ze de css-class harmonica-head hebben.

Ten eerste wordt een extra css-class open aan de vraag toegevoegd. Omdat hiervoor de jQuery-functie toggleClass wordt gebruikt, wordt de extra css-class bij de volgende klik weer verwijderd. In onze css gebruiken we deze class om een actieve vraag (met een opengeklapt antwoord) een andere stijl te geven dan een dichtgeklapte vraag. Het naar beneden wijzende pijltje voor de vraag verandert in een naar boven wijzend pijltje. Bij de volgende klik op de vraag wordt dit weer een naar beneden wijzend pijltje. De styling van de vragen met of zonder de extra css-class ‘open’ gebeurt in het stylesheet (zie verderop).

Het tweede deel van deze regel $(this).toggleClass('open').next('.harmonica-content').slideToggle(); zorgt ervoor dat de div met het antwoord wordt opengeschoven. Ook hier werkt de toggle-functie voor afwisselend open en dichtschuiven bij elke volgende klik op de vraag.

Css

Ik plaats hier als voorbeeld de css-code zoals die in ons stylesheet is gebruikt voor de opmaak van de FAQ. Voel je vrij om je eigen opmaak te kiezen.

.entry-content .harmonica-head {
	cursor: pointer;
	color: #0072bc;
	background: url(images/pijltje-down.png) no-repeat 0 8px;
	text-indent: 16px;
}
.entry-content .harmonica-head.open {
	background: url(images/pijltje-up.png) no-repeat 0 8px;
}
.harmonica-content {
	display: none;
}

Dieplinken naar een specifieke vraag

Wanneer je via een link wilt verwijzen naar een specifieke vraag in de FAQ, dan is het natuurlijk het mooiste als de bezoeker ook direct die vraag met het bijbehorende antwoord opengeklapt ziet. Daarvoor zorgt de volgende code.
Om te beginnen voegen we een functie toe die de parameters uit een url kan halen. De url die wij gebruiken heeft de volgende vorm:
https://wpwebbouw.nl/veelgestelde-vragen-over-wordpress/?vraag=22

In het laatste stukje van de url, vanaf het vraagteken, is de parameter vraag toegevoegd. De onderstaande functie haalt de parameters uit een url:

function GetURLParameter(sParam) {
   var sPageURL = window.location.search.substring(1);
   var sURLVariables = sPageURL.split('&amp;');
   for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
         return sParameterName[1];
      }
   }
}

Deze functie gebruiken we vervolgens in ons jQuery script om de waarde van de parameter vraag aan de variabele vraag toe te wijzen:

var vraag = GetURLParameter('vraag');

Het volgende stukje code kijkt eerst of de url een waarde bevatte voor de parameter vraag. Is dat het geval, dan wordt de vraag met de bijbehorende unieke id opengeschoven. Het if-statement is toegevoegd om te voorkomen dat de code wordt uitgevoerd als de url geen parameterstring bevat.

if(typeof vraag != 'undefined') {
   if(typeof vraag != 'undefined') {
      var target = "#"+vraag;
 $(target).toggleClass('open').next('.harmonica-content').slideDown();
}

Nu hebben we nog code nodig om de pagina te scrollen naar de positie van de betreffende vraag. Hierbij maken we weer gebruik van de unieke id van de vraag.

    $('html, body').animate({
      scrollTop: $(target).offset().top - 40
      }, 1500);

De complete code voor de FAQ-pagina in custom.js:

$(document).ready(function(){
   // parameters uit url halen
   function GetURLParameter(sParam) {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&amp;');
      for (var i = 0; i < sURLVariables.length; i++) {
         var sParameterName = sURLVariables[i].split('=');
         if (sParameterName[0] == sParam) {
            return sParameterName[1];
         }
      }
   }
   var vraag = GetURLParameter('vraag');
   // open het antwoord van de vraag in de url
   if(typeof vraag != 'undefined') {
      var target = "#"+vraag;
 $(target).toggleClass('open').next('.harmonica-content').slideDown();
      $('html, body').animate({
      scrollTop: $(target).offset().top - 40
      }, 1500);
   }
   //switch de class voor open of dicht en schuif de content
$('.harmonica-head').click(function() {
	$(this).toggleClass('open').next('.harmonica-content').slideToggle();
});
});

Heb je nog vragen of opmerkingen over het bouwen van een FAQ met openklappende antwoorden en dieplinks? Schrijf dan hieronder een reactie. Je krijgt sowieso antwoord. En als de vraag vaak wordt gesteld nemen we hem op in onze FAQ.

5 reacties op “Zo maak je een FAQ met openklappende antwoorden en dieplinks

  1. Baukelien

    Hallo,
    Dit blijkt voor mij als beginnend WordPresser te gecompliceerd.
    Omdat ik in het verkeerde customscript werkte, ging de site helemaal op wit.
    Het thema dat ik gebruik is Dyad 2.
    Site: ecoboer-matthijs.nl

    Reageren
    1. Erik Bericht auteur

      Hallo Baukelien,

      Klopt. Het implementeren van dit script is niet direct geschikt voor beginnende WordPressers. Ik zie dat je je website gelukkig weer online hebt.

      Erik

      Reageren
    1. Erik Bericht auteur

      Hallo Kees,

      Het is ongetwijfeld mogelijk een faq te maken in de Google omgeving – denk aan een pagina met vragen en antwoorden – maar of het ook kan op de manier zoals hier is omschreven met openklappende antwoorden vraag ik me af omdat hiervoor Javascript of jQuery nodig is. Ik zou informeren bij Google wat hiervoor de mogelijkheden zijn. Dit valt buiten de scope van WordPress.

      Erik

      Reageren

Laat een reactie achter op Kees Vermeulen Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Let op!

Als je wilt dat je vraag serieus kan worden beantwoord, controleer dan of je hierboven minimaal het volgende hebt vermeld:

  • de url van de website
  • het gebruikte thema en of je dit hebt aangepast, al dan niet in een child-theme
  • indien van toepassing: de plugin die het probleem geeft
  • de pagina(s) waar het probleem zich voordoet
  • alle andere informatie die nodig kan zijn om het probleem te analyseren.