Comment créer des captures d’écran automatisées du site dans WordPress

Si vous ajoutez fréquemment des captures d’écran de votre site à vos publications ou pages WordPress, l’automatisation du processus vous permettra d’enregistrer le temps passé à capturer des captures d’écran manuellement.

Chez WPBeginner, nous créons et incluons régulièrement des captures d’écran dans nos articles pour guider efficacement nos lecteurs. Avec plus de 16 ans d’expérience dans la construction, l’édition et l’automatisation de captures d’écran, nous avons développé une solide compréhension des meilleures pratiques pour créer des images claires.

Cette expérience nous a appris à quel point des captures d’écran bien conçues sont importantes pour améliorer la compréhension et l’engagement du lecteur à l’égard de notre contenu.

Dans cet article, nous allons vous afficher comment créer facilement des captures d’écran automatisées de sites sur WordPress.

Pourquoi créer des captures d’écran automatisées de sites sous WordPress ?

Si vous avez un site WordPress, vous pouvez créer et ajouter des captures d’écran automatisées de votre site à vos publications afin de donner à vos lecteurs potentiels un moyen rapide de voir de quoi traite votre contenu.

Cela peut augmenter l’engagement et même contribuer à améliorer le référencement du site web, car les moteurs de recherche utilisent généralement des images et des captures d’écran pour comprendre et indexer votre contenu.

De même, vous pouvez utiliser des captures d’écran automatisées pour créer une sauvegarde visuelle de votre site avant de mettre à jour un thème ou d’apporter d’autres modifications. Cela peut vous aider à comparer et à voir la différence entre le nouveau et l’ancien style de votre site web.

Les captures d’écran automatisées permettent également de comparer différents services ou sites web, de guider votre lecteur à travers un tutoriel étape par étape et de suivre l’évolution du site au fil du temps.

Ceci étant dit, voyons comment créer facilement des captures d’écran automatisées de sites web dans WordPress :

Méthode 1 : Créer automatiquement des captures d’écran du site dans WordPress à l’aide d’une extension

Cette méthode est plus simple et donc recommandée pour les débutants et les utilisateurs/utilisatrices qui ne veulent pas s’occuper du code.

Tout d’abord, vous devez installer et activer l’extension Browser Screenshots. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Dès l’activation, le plugin fonctionnera immédiatement et il n’y a pas de paramètres à configurer.

Maintenant, il vous suffit de visiter une page ou un article où vous souhaitez ajouter une capture d’écran automatisée du site web à partir de la barre latérale de l’administrateur de WordPress.

Cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche de l’écran pour ouvrir le menu des blocs. Ajoutez ensuite le bloc « Photos du navigateur » dans l’éditeur/éditrices.

Une fois cela fait, ajoutez l’URL du site pour lequel vous souhaitez effectuer une capture d’écran automatisée et cliquez sur le bouton « Charger l’image ».

L’extension ajoutera automatiquement une capture d’écran pour le site que vous avez choisi. Vous pouvez maintenant ajouter un texte alt pour l’image et modifier sa largeur et sa hauteur à partir du panneau de blocs sur la droite.

En activant le bouton « Utiliser un lien » dans le tableau de bord, vous pouvez ajouter un lien à la capture d’écran qui vous dirige vers le site web.

Vous pouvez également permuter l’option « Link to the current post » si vous souhaitez ajouter le lien de la publication à la capture d’écran.

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour stocker vos Réglages.

Vous pouvez maintenant visiter votre site WordPress pour voir la capture d’écran automatisée.

Note : L’extension Browser Shots utilise l’API mshots de WordPress.com pour générer des captures d’écran à la volée. Ces images ne sont pas stockées dans votre médiathèque WordPress. Elles sont servies directement par les serveurs de WordPress.com. Voir notre guide sur la différence entre WordPress.com et WordPress.org.

Méthode 2 : Créer des captures d’écran automatisées en ajoutant du code à WordPress

Cette méthode nécessite d’ajouter du code à vos fichiers WordPress. Pour créer des captures d’écran automatisées, vous devez ajouter un code personnalisé au fichier functions.php de votre thème.

Cependant, n’oubliez pas que la moindre erreur dans le code peut casser votre site et le rendre inaccessible.

C’est pourquoi nous vous recommandons d’utiliser WPCode. C’est le meilleur module d’extraits de code WordPress sur le marché qui rend l’ajout de code personnalisé super sûr et facile.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour des instructions détaillées, veuillez consulter notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, visitez la page Code Snippets  » + Add Snippet  » depuis le tableau de bord WordPress.

Une fois que vous y êtes, cliquez sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Vous accédez à la page « Créer un extrait personnalisé », où vous pouvez commencer par saisir un nom pour votre extrait. Le nom peut être n’importe quoi qui vous aidera à identifier le code.

Ensuite, sélectionnez « Extrait PHP » comme type de code dans le menu déroulant de droite.

Ensuite, il suffit de copier et de coller le code suivant dans la case « Aperçu du code » :

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
  
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
 
return $img;
}
add_shortcode("screen", "wpb_screenshots");

Tout comme l’extension mentionnée précédemment, ce code utilise également l’API Mshots de WordPress.com pour générer des captures d’écran à la volée.

Vous pouvez maintenant ajouter l’URL du site dont vous voulez faire des captures d’écran automatisées à côté de la ligne "URL" =$gt ; dans le code.

Vous pouvez également ajouter la largeur et la hauteur de votre choix pour les captures d’écran à côté des lignes "w" =&gt ; et "h"=&gt ; dans le code.

Ensuite, défilez jusqu’à la section « Insertion » et choisissez le mode « Insertion automatique ».

Le code sera maintenant exécuté automatiquement dès qu’il sera activé.

Enfin, défilez vers le haut de la page et permutez le commutateur « Inactif » sur « Actif ».

Cliquez ensuite sur le bouton « Enregistrer l’extrait » pour stocker vos réglages et activer l’extrait.

Maintenant, pour afficher une capture d’écran de votre site web dans vos articles et pages WordPress, vous devez entrer le shortcode comme suit :

[screen url="http://wpbeginner.com" alt="WPBeginner"]

Vous pouvez remplacer les champs URL et Alt par vos propres valeurs.

Tout d’abord, ouvrez la page/l’article dans l’éditeur de blocs du tableau de bord WordPress et cliquez sur le bouton « Ajouter un bloc » (+).

À partir de là, ajoutez le bloc « Shortcode » à la page/à la publication. Ensuite, ajoutez le shortcode ci-dessus et remplacez-le par vos propres valeurs.

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour stocker vos Réglages.

Maintenant, visitez votre site WordPress pour voir la capture d’écran automatisée en action.

Bonus : Faites des captures d’écran manuellement pour votre site web

Si vous ne souhaitez pas utiliser des captures d’écran automatisées, vous pouvez les réaliser manuellement à l’aide de différents outils tels que Droplr.

Cela vous donne plus de liberté pour choisir une zone spécifique pour une image par rapport aux captures d’écran automatisées. De plus, vous pouvez modifier ces images dans Adobe Photoshop et y ajouter d’autres éléments tels que des flèches ou des boîtes rouges.

Cette fonction n’est pas disponible pour les captures d’écran automatisées, pour lesquelles des plugins ou du code récupèrent automatiquement l’image pour vous.

Pour réaliser une capture d’écran avec Droplr, vous devez d’abord installer l’appli sur votre ordinateur. Une fois que c’est fait, cliquez sur l’icône Droplr dans la barre des tâches de Windows ou de Mac et sélectionnez l’option  » Capture d’écran « .

Ensuite, vous pouvez sélectionner la zone où vous souhaitez effectuer la capture d’écran.

Droplr ouvrira alors cette image dans un navigateur où vous pourrez la télécharger ou partager le lien avec d’autres personnes. Pour plus d’informations, consultez notre tutoriel sur la manière de faire une capture d’écran avec WordPress.

Nous espérons que cet article vous a aidé à apprendre comment créer des captures d’écran de site automatisées sur WordPress. Vous voudrez peut-être aussi voir notre guide du débutant sur le SEO des images et nos choix d’experts pour les meilleurs outils pour créer de meilleures images pour vos publications de blog.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.