Afficher des captures d’écran de n’importe quel site avec un shortcode

Si vous souhaitez afficher sur votre site ou dans vos articles des captures d’écran d’autres sites, cela peut-être fastidieux d’envoyer une image à chaque fois.

Pour aller plus vite, voici comment afficher ces images automatiquement grâce à une fonctionnalité de WordPress.

Ouvrez le fichier functions.php de votre thème enfant et copiez-collez le code suivant :

/* Afficher les captures d'écran de n'importe quel site web */

add_shortcode("screenshot", "wpm_screenshot");

// On définit les différents paramètres qui seront utilisés par notre shortcode
function wpm_screenshot($atts, $content = null) {
        extract(shortcode_atts(array(
                        "screenshot" => 'https://s.wordpress.com/mshots/v1/',
                        "url" => 'http://',
                        "alt" => "capture d'écran",
                        "width" => '400',
                        "height" => '300'
        ), $atts));
                return $screen = '<img src="' . $screenshot . '' . urlencode($url) . '?w=' . $width . '&h=' . $height . '" alt="' . $alt . '"/>';
}

Quelques explications :

• la fonction PHP extract() nous donne accès à des variables ayant comme noms les paramètres de notre shortcode. Ce sont ici screenshot, url, alt…
• la fonction shortcode_atts() qui permet de récupérer les attributs par défaut dans le array(), et ceux eventuellement remplis par l’utilisateur à travers $atts
• L’URL utilisée pour définir l’attribut screenshot : https://s.wordpress.com/mshots/v1/ utilise l’API mshots de WordPress permettant de générer des captures d’écran “à la volée”
• Tous les autres attributs sont des paramètres par défaut : la longueur et la largeur souhaitée, ou encore l’attribut alt de votre image.
• La définition de votre shortcode se fait dans la fonction add_shortcode(“nom du screenshot”, “fonction utilisée”). Ici notre shortcode sera [screenshot url=”monsite.fr”]

Voilà, il ne vous reste plus qu’à essayer ce nouveau shortcode dans vos articles ou pages en utilisant le code suivant :

[screenshot url="https://wpmarmite.com/chaudron" alt="Capture du Chaudron de WP Marmite" ]

N’hésitez pas à utiliser les attributs width et height si vous voulez redéfinir la taille de votre image.

Et le résultat donné par le shortcode :

Si jamais la capture d’écran du site ne s’affiche pas correctement, essayez de rafraîchir la page plusieurs fois si nécessaire.