Capture image site Web grâce à un shortcode
Voici un petit tutoriel concernant la création de vignettes grâce à une capture d’écran de sites Internet à l’aide d’un shortcode.
exemple:
[nom_shortcode url=qwant.com largeur=100]
En premier lieu nous déclarons via la fonction “add_shortcode” le nom de notre Shortcode ainsi que la fonction a appelé. La fonction “add_shortcode” permet bien entendu d’ajouter le Shortcode.
Dans notre exemple, le Shortcode s’appelle “imgweb” et la fonction “capweb“.
add_shortcode('imgweb','capweb');
Il ne nous reste plus qu’à déclarer la fonction “capweb“. Cette fonction permet de déclarer les paramètres du Shortcode.
La fonction complète:
function capweb($attributs){ $attributs=shortcode_atts(array( 'url'=>'', 'largeur'=>'250' ),$attributs); extract($attributs); $nomsite = explode('.',$url); return ' <div style="width:250px; float:left; margin:5px;"> <a href="https://'.$url.'" target=_blank> <img style="border-radius:20px; box-shadow: 2px 2px 7px #191919;" src="https://api.screenshotlayer.com/api/capture? access_key=zs7y784ef3784btf9t7fe97eg45897r8& url=https://'.$url.'& viewport=1440x900& width ='.$largeur.'" alt=" '.$nomsite[0].'-'.get_the_title().' " title=" '.$nomsite[0].'-'.get_the_title().' "/> </a> </div> '; }
Dans notre exemple notre Shortcode possèdera:
- 2 paramètres dans un tableau (array).
- Une url écrites sous la forme d’un nom de domaine.
- Une largeur exprimé en chiffre sous la forme d’une chaîne de caractères (string).
- La variable renfermant ces attributs (paramètres).
function capweb($attributs){
$attributs=shortcode_atts(
array( 'url'=>'',
'largeur'=>'250'
),$attributs);
Ensuite on procède à l’extraction des clés de notre tableau (premier paramètre de notre fonction “capweb“), permettant de récupérer les paramètres du Shortcode sous forme de variable.
extract($attributs);
$url = notre nom de domaine
$largeur = la largeur rentré par l’utilisateur. ATTENTION, si aucune largeur est définie, ‘250’ sera la valeur par défaut.
notre exemple: qwant.com
notre saisi dans le Shortcode = qwant.com
Mise en place d’une fonction explode pour récupérer le nom de notre site et non le nom de domaine.
$nomsite = explode('.',$url);
// $nomsite[0] = qwant
Le retour de la fonction renvoie une chaîne de caractères sous forme de balises HTML.
Les balises HTML contiennent une div renfermant une balise <img> ainsi qu’une balise <a>
La fonction de retour complète
return '<div style="width:250px; float:left; margin:5px;"> <a href="https://'.$url.'" target=_blank> <img style="border-radius:20px; box-shadow: 2px 2px 7px #191919;" src="https://api.screenshotlayer.com/api/capture? access_key=zs7y784ef3784btf9t7fe97eg45897r8& url=https://'.$url.'& viewport=1440x900& width ='.$largeur.'" alt=" '.$nomsite[0].'-'.get_the_title().' " title=" '.$nomsite[0].'-'.get_the_title().' "/> </a></div>'; }
La balise <div> contient un style.
<div style="width:250px; float:left; margin:5px;"></div>
La balise <a> a pour paramètre de lien (href), le nom de domaine saisis par l’utilisateur préfixé de “https://”
<a href=”https://’.$url.‘” target=_blank></a>
La balise <img> contient un style et un paramètre source (src) égal à l’adresse fournie par le site screenshotlayer.com
<img style="border-radius:20px; box-shadow: 2px 2px 7px #191919;" src="https://api.screenshotlayer.com/api/capture? access_key=be3e164ef3566bfa9b8fe93bf08893e1& url=https://'.$url.'& viewport=1440x900& width ='.$largeur.'"
Complété par les paramètres “alt” et “title” pour renforcer le SEO
alt=” ‘.$nomsite[0].‘-‘.get_the_title().‘ ”
title=” ‘.$nomsite[0].‘-‘.get_the_title().‘ “/>
screenshotlayer.com est un site proposant des captures d’écran gratuite par le biais d’une API. Le site demande à l’utilisateur de s’enregistrer afin de créer un compte et recevoir une clé d’accès (access_key) ainsi que l’URL nécessaire au capture d’écran.
La vidéo d’explication