Gravatars (Globally Recognized Avatars) spelen een belangrijke rol in het verbeteren van gebruikersbetrokkenheid op je WordPress-website. Ze maken reacties visueler aantrekkelijk, helpen gebruikers elkaar te herkennen en voegen een persoonlijke touch toe. Maar hoe implementeer je ze op jouw website? Dit artikel geeft een eenvoudige handleiding voor het weergeven van Gravatars via twee methoden: thema-aanpassing en shortcodes.
Laten we eerst kort bespreken wat Gravatars zijn en waarom ze belangrijk zijn.
Wat is een Gravatar en waarom is het belangrijk?
Een Gravatar is een online avatar gekoppeld aan een gebruiker via hun e-mailadres. Deze verschijnt automatisch naast hun naam wanneer ze reacties achterlaten op blogs of deelnemen aan discussies, mits Gravatar in de website is geïntegreerd.
De voordelen van Gravatars:
- Persoonlijke touch: Een herkenbare avatar maakt interacties persoonlijker.
- Betere betrokkenheid: Gebruikers voelen zich meer verbonden wanneer ze herkenbaar zijn.
- Professionele uitstraling: Vooral in de blogwereld voegen Gravatars een laag van geloofwaardigheid toe.
Ben je klaar om deze waarde toe te voegen aan jouw website? Hieronder lees je stap voor stap hoe je dit kunt doen!
Methode 1: Gravatars weergeven via thema-aanpassing
Als je een beetje vertrouwd bent met de functies van WordPress, is dit een efficiënte methode. Je past je thema aan om Gravatars weer te geven.
Stap 1 – Controleer of Gravatars al zijn ingeschakeld
- Log in op je WordPress-dashboard.
- Ga naar Instellingen > Discussie.
- Scrol omlaag naar het gedeelte Avatar-weergave. Vink het vakje Toon Avatars aan. Hier kun je ook de standaard Gravatar instellen voor gebruikers die geen eigen avatar hebben.
Stap 2 – Pas de ‘comments.php’ aan in je thema
- Ga naar Weergave > Thema-editor in je dashboard.
- Open het bestand comments.php (gebruik je geen reacties op je website? Sla dit gedeelte dan over).
- Zoek in dit bestand naar de PHP-tag:
“`php
<?php wp_list_comments(); ?>
“`
- Voeg hierna de code toe om een Gravatar weer te geven:
“`php
<?php echo get_avatar( $comment, 48 ); ?>
“`
Het getal ‘48’ bepaalt de grootte van de avatar in pixels. Dit kun je aanpassen naar jouw voorkeur.
Stap 3 – Controleer je wijzigingen
Sla de wijzigingen op en bekijk een blogpost met reacties. Et voilà, je hebt nu Gravatars toegevoegd!
Methode 2: Gravatars implementeren via shortcodes
Niet comfortabel met het aanpassen van thema’s? Gebruik dan shortcodes! Dit is een gebruiksvriendelijke en flexibele manier.
Stap 1 – Maak een shortcode in je functies.php
- Ga naar Weergave > Thema-editor.
- Open het bestand functies.php en voeg daar de volgende code toe:
“`php
function gravatar_shortcode( $atts ) {
$atts = shortcode_atts(
array(
‘email’ => ‘default@example.com’,
‘size’ => ’96’,
),
$atts,
‘gravatar’
);
return ‘<img src=”‘ . get_avatar_url( $atts[‘email’], array( ‘size’ => $atts[‘size’] ) ) . ‘” />’;
}
add_shortcode( ‘gravatar’, ‘gravatar_shortcode’ );
“`
Deze code creëert een custom shortcode voor het weergeven van Gravatars. Je kunt de e-mail en grootte later aanpassen via de shortcode zelf.
Stap 2 – Gebruik de shortcode
Je kunt de shortcode nu overal op je website plaatsen. Bijvoorbeeld:
“`[gravatar email=”gebruiker@voorbeeld.com” size=”150″]“`
De parameter ‘size’ bepaalt wederom de grootte van de avatar.
Stap 3 – Test de shortcode
Plaats de shortcode in een bericht of widget en controleer of de Gravatar correct wordt weergegeven.
Bonus Tip: Optimaliseer prestaties met lazy loading
Gravatars voegen visueel waarde toe, maar kunnen ook de laadtijd van je website beïnvloeden. Daarom is het slim om lazy loading te implementeren. Daarmee worden Gravatars alleen geladen wanneer ze in beeld komen.
Volg deze stappen:
- Gebruik een plugin zoals WP Rocket of Lazy Load by WP Rocket. Deze plugins zijn gebruiksvriendelijk en ondersteunen lazy loading voor Gravatars.
- Voeg een aangepaste code toe aan je functies.php (optioneel):
“`php
function add_lazyload_to_avatars( $avatar ) {
$avatar = str_replace( “class=’avatar”, “class=’lazy avatar”, $avatar );
return $avatar;
}
add_filter( ‘get_avatar’, ‘add_lazyload_to_avatars’ );
“`
Deze code markeert avatars als lazy-load, zodat ze alleen worden geladen wanneer ze zichtbaar zijn.
Bepaal je eigen Gravatar-stijl
Met Gravatars kun je eenvoudig de interactie en uitstraling van je website verbeteren. Of je nu kiest voor thema-aanpassingen of shortcodes, beide methoden bieden flexibiliteit en gemak. Vergeet niet om aanvullende optimalisaties zoals lazy loading toe te passen om je gebruikerservaring verder te verbeteren.
Heb je vragen of wil je meer tips voor jouw WordPress-website? Neem contact met ons op of bekijk onze handleidingen voor WordPress-optimalisatie!