Wordpress (shortcode, plugin, template)

shortcode: Vignette de capture d’écran pour site Web

Rédigé le mercredi 15 mars 2017

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