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://image.thum.io/get/',
                        "url" => 'https://',
                        "alt" => "capture d'écran",
                        "width" => '400',
                        "height" => '300'
        ), $atts));
                return $screen = '<img src="' . $screenshot . 'width/' . $width . '/crop/' . $height . '/' . $url . '" alt="' . $alt . '"/>';
}

À noter : ce snippet s’appuie sur l’API thum.io. En version gratuite, un léger filigrane est ajouté sur les captures d’écran générées. Pour le retirer, un compte payant est nécessaire. Si vous souhaitez une alternative gratuite sans filigrane, jetez un œil à ScreenshotOne (100 captures par mois, création de compte requise) : le code correspondant est proposé en bas de cet article.

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://image.thum.io/get/ utilise l’API thum.io permettant de générer des captures d’écran “à la volée” (l’ancienne API mshots de WordPress.com a été fermée aux accès externes)
  • 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 :

capture ecran shortcode wpmarmite

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

Alternative sans filigrane : ScreenshotOne

Si le filigrane de thum.io vous gêne, l’API ScreenshotOne est une alternative intéressante. Son offre gratuite permet 100 captures par mois (dans la limite de 20 requêtes par minute), sans filigrane et avec de nombreuses options : blocage des pubs, des bandeaux cookies, réglage de la qualité, etc.

Créez un compte sur dash.screenshotone.com, récupérez votre clé d’API dans le tableau de bord, puis ajoutez ce code dans le fichier functions.php de votre thème enfant (le nom du shortcode est différent du précédent pour que vous puissiez utiliser les deux en parallèle si besoin) :

/* Afficher une capture d'écran avec ScreenshotOne */

add_shortcode("screenshotone", "wpm_screenshotone");

// Nécessite un compte gratuit sur screenshotone.com pour obtenir une clé d'API
function wpm_screenshotone($atts, $content = null) {
    extract(shortcode_atts(array(
            "url"    => 'https://',
            "alt"    => "capture d'écran",
            "width"  => '400',
            "height" => '300',
            "key"    => 'VOTRE_CLE_API'
    ), $atts));
        return $screen = '<img src="https://api.screenshotone.com/take?url=' . urlencode($url) . '&access_key=' . $key . '&viewport_width=' . $width . '&viewport_height=' . $height . '&image_quality=80&block_ads=true&block_cookie_banners=true" alt="' . $alt . '"/>';
}

Remplacez VOTRE_CLE_API par la clé fournie par ScreenshotOne. Vous pouvez alors utiliser le nouveau shortcode dans vos articles ou pages :

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

Les paramètres width et height déterminent la taille du viewport de rendu. L’attribut key est facultatif : il permet de surcharger la clé d’API depuis le shortcode si besoin (utile pour tester une seconde clé sans toucher au code).