Testimonial Star Rating toevoegen via Elementor

Een probleem met een oplossing

Op dit moment ben ik bezig met de ontwikkeling van een nieuwe cursus over Elementor. En in die cursus wilde ik laten zien hoe je gegevens die via een bestaande plugin zijn ingevoerd kan gebruiken met dynamische tags. Als voorbeeld heb ik de plugin Strong Testimonials genomen.

Toen ik echter het custom field voor de testimonial star rating wilde koppelen, liep ik tegen een probleem aan. Het veld waarin die waarde moet worden toegevoegd, accepteert alleen numerieke velden. Niets anders.

Dan zit er natuurlijk niets anders op, dan er voor te zorgen, dat dit veld ook de verwachte waarde op een andere manier kan krijgen. En de meest voor de hand liggende manier is dus via een shortcode, dat is immers makkelijk te implementeren en één van de mogelijkheden, waar we wel de beschikking toe hebben.

Maar voor het maken van deze shortcode hebben we toch eerst even wel wat extra informatie nodig.

Waarom dit artikel?

De situatie die ik hierboven beschrijf is op zich een vrij unieke situatie. De reden van dit artikel is echter om je te laten zien, hoe je informatie ‘naar boven haalt’ om de juiste informatie aan Elementor door te kunnen spelen.

Het gebeurt namelijk wel vaker, dat ik een waarde ‘door wil geven’ aan een dynamische tag van Elementor, een waarde die niet direct uit de database te halen is. En in zo’n geval brengt een shortcode bijna altijd de uitkomt.

Dus ik laat je graag stap voor stap zien, hoe ik aan de informatie kom, om zo’n shortcode op te bouwen.

Kijken in de database

In dit geval heb ik om mijn shortcode te kunnen ophalen een tweetal gegevens nodig, die ik niet zomaar in WordPress terug kan vinden. De naam van het custom post type en de naam van de ‘post meta variabele’.

Wat een Custom Post Type is, heb ik een tijdje terug uitgebreid uitgelegd. Wat een ‘post meta variabele’ is nog niet.

Wat ik wel heb uitgelegd is wat ‘Custom Fields’ zijn. Meer informatie vind je hierover in hetzelfde blogartikel waarin je meer over Custom Post Types kan lezen. En eigenlijk komt het erop neer, dat al die extra velden in een specifieke structuur worden vastgelegd, waardoor je weet welk veld bij welk post type hoort.

Wat ik hier dus kan lezen is dat -behalve de standaard velden, post 5 een variable heeft met als ‘key’ _element_edit_more en als waarde ‘builder’. Wat dat betekent, weet ik niet, maar aangezien er een afspraak is, dat zaken die met een underscore beginnen ‘systeem keys’ zijn, ga ik ervan uit, dat de Elementor plugin er wel raad mee weet.

Omdat zo’n ‘meta waarde’ als het aantal sterren duidelijk ook gekoppeld is aan een post, verwacht ik meer informatie over de sterren te vinden in deze tabel.

Maar grote schrik! In een beetje WordPress omgeving kan zo’n tabel tien- tot honderdduizenden regels hebben. Hoe vind ik mijn weg daarin?

Eigenlijk heel eenvoudig.

De meeste hosting partijen hebben phpMyAdmin voor je reinstalled. Daarmee kan je kijken wat er in de database staat. Wanneer ik kijk naar de betreffende tabel (wp_postmeta), dan zie ik het volgende. Overigens, de ‘prefix’ voor de database kan anders zijn dan wp_, je ziet dat in het voorbeeld hieronder de tabel d2_postmeta heet. Dat is om aanvallen van buitenaf via zogenaamde ‘sql injection’ wat moeilijker te maken.

Hier klik ik op de tab ‘Structure’

En hier klik ik op ‘more’ in de regel die begint met ‘meta_key’, dan krijg ik een lijstje met extra mogelijkheden te zien, en hier kies ik voor ‘Distinct values’.

Ik krijg dan een lijstje als het onderstaande te zien.

Het zal weinig inlevingsvermogen vergen om te begrijken, dat ‘star_rating’ het veld is waar we naar moeten zoeken. Die houden we vast. De volgende stap is het zoeken naar de juiste post type naam.

Dat doen we op een vergelijkbare manier in de tabel wp_posts. Wanneer ik hiervan de structuur opvraag krijg ik het volgende te zien:

Je hoeft geen Einstein te zijn om te begrijpen, dat de naam van het post type ‘wpm-testimonials’ is.

Op basis van deze informatie kunnen we de benodigde shortcode samenstellen.

<?php 

add_shortcode('star_rating', 'wxp_get_star_rating');

function wxp_get_star_rating($args) {
     
      global $post;
      $atts = shortcode_atts(
              array(
                  'default' => 1,
                  'posttype' => false
              ), $args);
      if ($atts['posttype']) {
         if ($post->post_type <> $atts['posttype']) return $atts['default'];
      }
      if (!isset($post) || !$post) return $atts['default'];
      $result = get_post_meta( $post->ID, 'star_rating', true);
      if ($result === false) return $atts['default'];
      return $result;
}

De code werkt eigenlijk super simpel. Wanneer je de shotcode in een pagina gebruikt, en het achterliggende post type is ‘wpm-testimonial’, dan krijg je -indien het veld bestaat- de waarde van het veld ‘star_rating’ terug, anders een waarde die je als default hebt ingesteld.

Wil je beter begrijpen hoe de code zelf werkt, dan kan je de bespreking hiervan in de code snippets nalezen.

Zo kan je zelf instellen, wat de eventuele missende waarde moet zijn. Geef je geen waarde mee als default, dan wordt de waarde ‘1’ ingesteld.

Standaard zal de shortcode niet kijken naar het post type, alleen of er een meta veld ‘star_rating’ voorkomt. Wil je 100% zeker zijn, dat deze star rating alleen bij een bepaald post type voorkomt, dan kan je als extra parameter ‘posttype=”<posttype naam>'”‘ meegeven, dus ‘posttype=”wpm-testimonial”‘ in ons geval.

Het gebruik van de shortcode is super simpel.

Dit geeft de star rating terug, en de waarde 1, als er geen star rating is [star_rating] 
Dit geeft de star rating terug en de waarde 5 als er geen star rating is [star_rating default="5"]

Wil je weten wat de beste manier is om PHP code aan jouw WordPress installatie toe te voegen, dan raad ik je vooral aan dit artikel eerst te lezen.

Wil je meer weten over shortcodes programmeren in zijn algemeenheid, geeft het artikel in de snippet base over shortcodes goede achtergrondinformatie.

Nu de volgende stap. De shortcode daadwerkelijk gebruiken in Elementor. Dat is gelukkig vrij eenvoudig. Omdat we geen ingewikkelde parameter willen onthouden, kunnen we volstaan met [star_rating] in te vullen als parameter.

Dus zo:

En op deze manier kan je dus toch gebruik maken van de ‘Aantal Sterren’ widget van Elementor.

WordXPression biedt je meer…

Wanneer je meer wilt met Elementor, dan biedt WordXPression je verschillende mogelijkheden om je kennis te vergroten. Kijk zo bijvoorbeeld eens bij het cursusaanbod van WordXPression.

Wil je jouw ‘gewone’ WordPress website omzetten naar een Elementor website, dan kan je ook prima bij WordXPression terecht.

En wil je altijd op de hoogte blijven, dan kan je je hieronder natuurlijk inschrijven voor de WordXPression nieuwsbrief.