Capture d’écran 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ée 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ée par l’utilisateur. ATTENTION, si aucune largeur est définie, ‘250’ sera la valeur par défaut.
Notre exemple: qwant.com
Notre saisie 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 à la capture d’écran.
La vidéo d’explication
[scyoutube id=nxuXyGn2uF4]