Comment créer des captures d'écran de site Web automatisées dans WordPress

La mise à jour manuelle des captures d'écran de sites Web prend beaucoup de temps. Que vous construisiez un portfolio, créiez un répertoire ou examiniez des logiciels, la capture, le recadrage et le téléchargement constants peuvent considérablement ralentir la création de votre contenu.

J'ai constaté que si les captures d'écran de tutoriels détaillés nécessitent toujours une touche personnelle, l'automatisation permet d'économiser énormément de temps pour les aperçus rapides de sites Web. C'est la clé pour garder votre site à jour sans les efforts manuels incessants.

Dans ce guide, je vais vous montrer trois méthodes fiables pour prendre facilement des captures d'écran automatiques de sites Web dans WordPress.

Que vous souhaitiez afficher une capture d'écran de n'importe quel site Web ou générer automatiquement des miniatures pour votre portfolio, ces méthodes vous aideront à maintenir un site professionnel et à jour.

Pourquoi créer des captures d'écran de site Web automatisées dans WordPress ?

Si vous avez un site Web WordPress, l'ajout de captures d'écran à vos articles offre aux lecteurs un moyen visuel rapide de comprendre le contenu. Cependant, prendre et recadrer manuellement ces images pour des dizaines de liens peut prendre beaucoup de temps.

Les captures d'écran automatisées sont la solution parfaite pour :

• Construire un portfolio de conception Web
• Créer un répertoire de thèmes
• Rédiger des critiques de logiciels
• Effectuer des tests visuels sur vos propres sites

L'automatisation permet d'économiser du temps et garantit que la taille de vos images reste parfaitement cohérente. De plus, bon nombre de ces outils vous permettent de capturer facilement une capture d'écran de page entière automatiquement, plutôt que de rassembler des captures manuelles.

Cette cohérence professionnelle stimule l'engagement des utilisateurs et contribue au SEO de votre site Web. Des images pertinentes et de haute qualité maintiennent les visiteurs plus longtemps sur votre page, ce qui envoie des signaux positifs aux moteurs de recherche.

De même, vous pouvez utiliser des captures d'écran automatiques de sites Web pour créer une sauvegarde visuelle de votre site avant de mettre à jour un thème ou d'apporter des modifications majeures à la conception. Cela permet de comparer facilement les nouveaux et anciens styles de votre site Web côte à côte.

Quand s'en tenir aux captures d'écran manuelles

Il est maintenant important de savoir quand il ne faut pas utiliser l'automatisation. Si vous créez un tutoriel détaillé, étape par étape, vous devriez vous en tenir à la prise de captures d'écran manuellement.

Les outils automatisés ne peuvent pas se connecter à votre tableau de bord d'administration WordPress, ouvrir des menus déroulants masqués ou ajouter des boîtes rouges et des flèches précises pour montrer à un utilisateur exactement où cliquer.

Par exemple, sur WPBeginner, nous prenons manuellement toutes nos captures d'écran de tutoriels backend. Nous utilisons ensuite des applications graphiques dédiées comme Adobe Photoshop ou Affinity Studio pour nettoyer les images, masquer les données sensibles et ajouter nos annotations caractéristiques.

Mais pour les aperçus de sites Web publics, l'automatisation est absolument la meilleure voie.

Maintenant, regardons comment créer facilement des captures d'écran de sites Web automatisées dans WordPress :

Méthode 1 : Utiliser le plugin Capture pour les captures d'écran et le PDF

Si vous souhaitez afficher des aperçus de sites Web mis à jour dynamiquement sans avoir à gérer de code personnalisé, alors c'est la méthode la plus simple.

En utilisant un plugin dédié comme Capture, vos captures d'écran sont générées automatiquement en arrière-plan. Si le site Web cible change de conception, votre capture d'écran se mettra à jour d'elle-même pour correspondre au nouveau look.

De plus, comme le plugin gère les fichiers image, ils n'occuperont aucun espace de stockage sur votre propre serveur WordPress.

Bien qu'il existe de nombreux anciens plugins de capture d'écran, la plupart ont été abandonnés. Pour cette raison, je recommande vivement d'utiliser le plugin Capture activement maintenu pour générer de manière fiable ces aperçus professionnels avec un simple shortcode.

Étape 1. Installer et configurer le plugin Capture

Tout d'abord, vous devez installer et activer le plugin Capture. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après avoir activé le plugin, vous devez accéder à Paramètres » Capture. Ici, vous devrez cliquer sur le lien « Console de capture » pour créer un compte gratuit et obtenir une clé API.

Bien que cela nécessite une étape d'inscription supplémentaire, cela garantit que le service reste stable et fiable par rapport aux anciens plugins abandonnés.

Ci-dessous, vous trouverez la section Paramètres par défaut. La largeur et la hauteur par défaut de la fenêtre d'affichage (1200 × 800) fonctionnent parfaitement pour les captures d'écran de bureau standard.

Cependant, je suggère de changer le Délai par défaut (secondes) à 2 ou 3 secondes. De nombreux sites Web modernes ont des écrans de chargement, des polices personnalisées ou des animations. L'ajout d'un léger délai donne au site Web cible suffisamment de temps pour se charger complètement avant que le plugin ne prenne la photo.

Lorsque vous êtes satisfait de votre configuration, assurez-vous de cliquer sur le bouton « Enregistrer les modifications ».

Après cela, je recommande vivement de cliquer sur le bouton « Tester les connexions ». Cela vérifie rapidement que votre clé fonctionne correctement, afin que vous ne rencontriez pas d'erreurs plus tard.

Étape 2. Créer une capture d'écran à l'aide d'un shortcode

Vous pouvez maintenant facilement ajouter une capture d'écran à n'importe quel article ou page à l'aide d'un simple shortcode. Recherchez simplement le bloc Shortcode dans l'éditeur de blocs et collez un code comme celui-ci :

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

Comment apparaît la capture d'écran ?

Contrairement à une image standard que vous téléchargez dans votre médiathèque, ces captures d'écran automatisées sont générées instantanément lorsqu'un visiteur charge votre page.

Parce qu'elles agissent comme une « fenêtre en direct » sur le site Web cible, cette approche est incroyablement utile si vous gérez un répertoire de thèmes, un portfolio de conception Web ou un blog d'avis sur des logiciels.

Vous pouvez garantir que vos lecteurs voient toujours la version la plus à jour du site Web cible, sans que vous ayez à remplacer les anciennes images.

Personnalisation de vos captures d'écran

Le plugin Capture est incroyablement flexible. Vous pouvez ajouter des paramètres supplémentaires au shortcode pour modifier l'apparence de la capture d'écran :

• Page entière : Utilisez full=true pour capturer la longueur entière de la page.
• Mode sombre : Utilisez darkMode=true pour capturer la version sombre d'un site Web.
• Bloquer les publicités : Utilisez blockAds=true pour masquer les publicités gênantes de la capture d'écran.
• Format d'image : Utilisez type="webp" pour vous assurer que vos images sont dans un format léger et moderne pour un chargement plus rapide.

Par exemple, si vous souhaitiez une capture d'écran en mode sombre, pleine page, au format WebP, votre shortcode ressemblerait à ceci :

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

Cette méthode vous donne beaucoup plus de contrôle que les outils gratuits de base. C'est parfait pour les sites d'avis professionnels et les portfolios.

Méthode 2 : Utiliser WPCode + mShots (Option gratuite)

Si vous souhaitez les mêmes avantages dynamiques et d'économie d'espace que la méthode 1, mais préférez une solution entièrement gratuite sans créer de comptes supplémentaires, c'est la méthode qu'il vous faut.

En ajoutant un shortcode personnalisé à votre site, vous pouvez accéder à l'API mShots de WordPress.com. Tout comme le plugin Capture, mShots génère des images en direct instantanément lorsque la page se charge et les héberge en externe, économisant ainsi l'espace de stockage de votre serveur.

Étape 1 : Ajouter un extrait de code à l'aide de WPCode

Pour ajouter ce code en toute sécurité, je recommande vivement d'utiliser WPCode. C'est le meilleur plugin d'extraits de code WordPress du marché. Il vous permet d'ajouter du code personnalisé sans jamais modifier directement le fichier functions.php de votre thème.

Tout d'abord, installez et activez le plugin gratuit WPCode. Ensuite, accédez à Extraits de code » + Ajouter un extrait dans votre tableau de bord WordPress.

Sélectionnez ‘Ajouter votre code personnalisé (Nouveau extrait)’. Donnez un nom à votre extrait, comme ‘Captures d’écran automatisées’, et assurez-vous que le menu déroulant Type de code est défini sur ‘Extrait PHP’.

Ensuite, copiez et collez le code sécurisé suivant dans la boîte de prévisualisation du code :

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

Faites défiler vers le bas jusqu’à la section Insertion et assurez-vous qu’elle est définie sur ‘Insertion automatique’.

Ensuite, basculez l’interrupteur en haut de l’écran de ‘Inactif’ à ‘Actif’ et cliquez sur le bouton ‘Enregistrer l’extrait’.

Étape 2. Créer une capture d'écran à l'aide d'un shortcode

Maintenant, pour afficher la capture d’écran automatisée dans vos articles ou pages WordPress, ajoutez simplement un bloc Shortcode à l’éditeur de contenu et collez le shortcode suivant :

[automated_shot url="https://example.com" alt="Exemple de site web" w="800" h="600"]

Assurez-vous de remplacer https://example.com par l’URL réelle du site web que vous souhaitez capturer. Vous pouvez également modifier facilement le texte alternatif, la largeur et la hauteur directement dans le shortcode.

Si votre site web cible met à jour son design mais que votre capture d’écran affiche toujours l’ancienne version, l’API mShots peut mettre l’image en cache. Vous pouvez facilement la forcer à prendre une nouvelle capture d’écran en ajoutant un nombre aléatoire à la fin de votre URL, comme ceci : url="https://example.com/?v=1".

Méthode 3 : Utiliser Browse AI + Zapier pour une automatisation sans intervention

Contrairement aux deux premières méthodes qui affichent des aperçus hébergés en externe et en direct, cette méthode offre une véritable automatisation sans intervention en enregistrant physiquement les fichiers directement sur votre site WordPress.

Nous utiliserons Browse AI pour capturer automatiquement les captures d’écran et Zapier pour les envoyer directement dans votre médiathèque. Cela vous donne un contrôle total sur vos images.

Étant donné que vos captures d’écran sont enregistrées sur votre propre serveur, elles se chargeront instantanément et resteront sur votre site de manière permanente, même si le site web cible devient inaccessible ou change complètement de design.

Étape 1 : Créer un robot de capture d’écran dans Browse AI

Tout d’abord, allez sur Browse AI et créez un compte gratuit.

Une fois connecté, cliquez sur le bouton ‘Construire un nouveau robot’ et sélectionnez l’option ‘Surveiller les changements de site’.

Il vous sera demandé d’entrer l’URL du site web que vous souhaitez capturer.

Une fois que vous avez entré le lien, vous devrez cliquer sur le bouton ‘Démarrer la formation du robot’.

Browse AI ouvrira alors une nouvelle fenêtre montrant ce site web en direct.

Cliquez simplement sur l’icône du robot sur votre écran pour ouvrir le menu et sélectionnez ‘Capturer la capture d’écran’.

Un petit menu apparaîtra vous demandant quelle partie de la page vous souhaitez capturer. Vous pouvez sélectionner « Page entière » si vous souhaitez une capture d'écran complète, de haut en bas, ou « Partie visible » si vous ne souhaitez que la section supérieure du site Web.

Ensuite, Browse AI vous demandera de donner un nom à la capture d'écran. Vous pouvez taper quelque chose de facile à retenir, comme « Capture d'écran de la page d'accueil » ou « Tarifs concurrents », puis appuyer sur Entrée.

Une fois que vous avez terminé, cliquez sur le bouton violet « Terminer » en bas du panneau de gauche pour arrêter l'enregistrement.

Browse AI vous demandera ensuite de donner un nom à votre nouveau robot.

Tapez quelque chose de facile à reconnaître et cliquez sur le bouton « Enregistrer ».

Après avoir enregistré, vous pouvez configurer une planification.

Par exemple, vous pouvez dire au robot de visiter automatiquement le site et de prendre une nouvelle capture d'écran chaque semaine ou chaque mois.

Une fois terminé, assurez-vous de cliquer sur le bouton « Enregistrer ».

Étape 2 : Préparez votre site WordPress

Avant de construire l'automatisation, nous devons donner à Zapier un moyen sécurisé de communiquer avec la médiathèque de votre site Web.

Dans un nouvel onglet, accédez à votre tableau de bord WordPress et installez et activez le plugin gratuit Zapier for WordPress. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Une fois le plugin actif sur votre site, vous êtes prêt à connecter Zapier à votre site WordPress.

Étape 3 : Créez un Zap dans Zapier

Ensuite, vous devez connecter votre robot à WordPress en utilisant Zapier.

Tout d'abord, vous devez vous connecter à votre compte Zapier. Depuis votre tableau de bord principal, cliquez sur le bouton « + Créer » dans le menu supérieur gauche et sélectionnez « Zaps » dans le menu déroulant.

Lorsque vous ouvrez le constructeur, Zapier affichera une zone de texte vous demandant de décrire votre flux de travail et de le construire à l'aide de l'IA. Puisque nous voulons configurer cela précisément, vous pouvez ignorer cette invite.

Au lieu de cela, regardez juste en dessous du séparateur « ou » et cliquez directement sur la boîte « Déclencheur » pour construire votre automatisation manuellement.

Un menu apparaîtra.

Recherchez et sélectionnez Browse AI comme application.

Recherchez la section « Compte » dans la barre latérale et cliquez sur le bouton « Se connecter » pour connecter en toute sécurité votre compte Browse AI.

Une fois votre compte lié, cliquez sur la boîte « Événement déclencheur ». Vous n'avez rien à taper dans le champ de recherche ici ! Regardez simplement juste en dessous de la barre de recherche et cliquez sur l'option « Nouvelle tâche – Instantané ».

Cela remplira automatiquement l'événement déclencheur pour vous. Ensuite, vous devez cliquer sur le bouton « Continuer » pour passer à l'écran de configuration suivant, où Zapier vous demandera quelques détails.

Tout d'abord, sélectionnez votre compte dans la liste déroulante « Équipe ». Une fois que vous avez fait cela, un nouveau champ apparaîtra où vous pourrez sélectionner le « Robot » spécifique que vous avez créé précédemment.

Enfin, définissez le « Type d'événement » sur « Tâche terminée avec succès » afin que Zapier ne s'exécute que lorsqu'une bonne capture d'écran est prise.

Assurez-vous de cliquer sur « Continuer », puis sur le bouton « Tester le déclencheur ». C'est une étape nécessaire car elle importe votre capture d'écran de test récente dans Zapier afin que WordPress puisse l'utiliser plus tard.

Une fois votre test réussi, cliquez sur la deuxième boîte de votre flux de travail (l'étape Action) et recherchez « WordPress » comme application.

Étant donné que vous avez déjà installé le plugin à l'étape 2, la connexion de votre site à Zapier est simple.

Cliquez simplement sur le bouton « Se connecter » dans la section Compte et entrez vos identifiants de connexion WordPress lorsque la fenêtre contextuelle apparaît.

Une fois votre site Web lié, cliquez sur le menu déroulant « Événement d'action ».

Recherchez et sélectionnez l'option « Télécharger un média », puis cliquez sur le bouton « Continuer » en bas de la page.

Maintenant, vous devez indiquer à WordPress quel fichier télécharger. Cliquez sur le bouton « + » (Insérer des données) sur le côté droit de la boîte « Fichier ». Cela ouvrira une fenêtre contextuelle montrant une très longue liste de données de test que Zapier vient de récupérer de Browse AI.

Comme la liste est très longue, le moyen le plus simple de trouver le bon fichier est d'utiliser la barre de recherche en haut de la fenêtre contextuelle. Tapez « src » pour filtrer les options.

Recherchez l'option qui se termine par « Screenshot Src » et sélectionnez-la. Vous devrez peut-être cliquer sur le lien « plus » pour voir le nom complet de l'option.

Vous pouvez également remplir les champs Titre et Texte alternatif si vous le souhaitez, mais vous pouvez laisser tous les autres champs facultatifs (comme Légende ou Auteur) vides en toute sécurité.

Une fois que vous avez terminé, cliquez sur « Continuer », puis sur le bouton « Tester l'étape ».

Zapier récupérera magiquement la capture d'écran de Browse AI et la téléversera directement dans votre médiathèque WordPress.

Si le test est réussi, n'oubliez pas de cliquer sur le bouton Publier pour que votre nouveau Zap s'exécute automatiquement en arrière-plan.

Le processus est maintenant complètement automatisé. Chaque fois que Browse AI capture une nouvelle image, elle apparaîtra automatiquement dans votre Médiathèque dans WordPress, prête à être utilisée dans n'importe quel article ou page.

Bonus : Comment garder la taille de vos captures d'écran cohérente

Quelle que soit la méthode que vous choisissez ci-dessus, vous devrez définir une largeur et une hauteur pour vos images automatisées. Pour que votre blog reste propre et professionnel, je recommande vivement d'utiliser un rapport d'aspect standard 16:9 en format paysage.

La plupart des thèmes WordPress ont une largeur maximale fixe pour les articles de blog (par exemple, 800 pixels). Si vous réglez toutes vos captures d'écran pour qu'elles correspondent à cette largeur en utilisant le ratio 16:9, elles auront toutes automatiquement la même hauteur.

Cela crée un aspect magnifiquement uniforme lorsque les utilisateurs parcourent votre article.

Pour déterminer les chiffres à saisir dans votre outil de capture d'écran, vous pouvez utiliser ces calculs simples :

• Si vous connaissez votre largeur cible : Multipliez simplement votre largeur par 9, puis divisez-la par 16 pour trouver votre hauteur parfaite.
• Si vous connaissez votre hauteur cible : Multipliez simplement votre hauteur par 16, puis divisez-la par 9 pour trouver votre largeur correspondante.

Par exemple, si la zone de contenu de votre blog mesure 800 pixels de large, vous multiplieriez 800 par 9, puis diviseriez par 16. Cela vous donne une hauteur parfaitement mise à l'échelle de 450.

Vous saisiriez donc simplement vos nouveaux chiffres dans les paramètres de votre shortcode, comme w="800" h="450".

Foire aux questions

J'ai répondu à pas mal de questions sur l'automatisation des images de sites Web. Voici quelques-unes des questions les plus fréquentes que les gens posent sur la création de captures d'écran automatisées de sites Web.

1. Comment puis-je prendre automatiquement une capture d'écran d'une page entière d'un site Web dans WordPress ?

Pour prendre une capture d'écran automatique dans WordPress, vous pouvez utiliser un plugin de capture d'écran WordPress dédié comme Capture, intégrer une API d'image gratuite comme mShots de WordPress.com, ou construire un flux de travail d'automatisation à l'aide d'outils comme Browse AI et Zapier.

Ces outils récupèrent automatiquement l'URL publique d'un site Web cible. Selon la méthode que vous choisissez, ils afficheront soit un aperçu en direct instantanément, soit téléchargeront le fichier image réel directement dans votre médiathèque WordPress.

2. Dois-je payer pour créer des captures d'écran automatisées de sites Web dans WordPress ?

Non, vous n'avez pas à payer pour générer des captures d'écran automatisées. Vous pouvez utiliser des méthodes entièrement gratuites, comme l'ajout d'un extrait de code PHP personnalisé via le plugin gratuit WPCode pour vous connecter à l'API gratuite mShots de WordPress.com.

De plus, les plateformes d'automatisation tierces comme Browse AI et Zapier offrent des niveaux gratuits qui permettent aux propriétaires de sites Web de capturer un nombre limité de captures d'écran chaque mois sans frais.

3. Puis-je utiliser des outils de capture d'écran automatisés sur des sites WordPress locaux, de staging ou privés ?

Non, les API de capture d'écran automatisées comme mShots ou le plugin Capture nécessitent une URL de site Web en direct et accessible publiquement pour fonctionner. Ces outils de capture d'écran externes ne peuvent pas accéder aux sites Web hébergés localement sur un ordinateur personnel (localhost).

De plus, les outils de capture d'écran automatisés ne peuvent pas accéder aux environnements de staging WordPress qui sont cachés derrière un mot de passe, un plugin de mode maintenance ou un pare-feu.

4. Est-il sécurisé d'utiliser une API tierce pour automatiser les captures d'écran de sites Web ?

Oui, l'utilisation d'API de capture d'écran réputées comme mShots de WordPress.com ou le plugin Capture est généralement sécurisée pour le contenu public. Ces services tiers visitent simplement une URL de site Web public et prennent une photo de ce qui est visible publiquement sur Internet.

Cependant, les propriétaires de sites Web ne doivent jamais utiliser d'outils tiers d'automatisation de captures d'écran pour capturer des pages privées du tableau de bord WordPress connectées ou des pages Web contenant des données personnelles sensibles.

5. Pourquoi ma capture d'écran automatisée WordPress.com mShots affiche-t-elle une page blanche ?

L'API mShots de WordPress.com peut occasionnellement afficher un espace vide la toute première fois qu'une URL de site Web spécifique est demandée.

C'est parce que l'API mShots prend quelques secondes pour générer l'image initiale. Si la capture d'écran automatisée est vide, le simple fait de rafraîchir la page WordPress résout généralement le problème. 

Étant donné que mShots met également des images en cache, vous pouvez forcer l'API à prendre une nouvelle capture d'écran du site Web en ajoutant une chaîne de version aléatoire à la fin de votre URL cible dans votre shortcode WordPress.

Ressources supplémentaires pour améliorer votre contenu visuel

J'espère que cet article vous a aidé à apprendre comment créer facilement des captures d'écran automatisées de sites Web dans WordPress. Si vous souhaitez faire passer les performances d'images et de médias de votre site Web au niveau supérieur, vous voudrez peut-être également consulter ces ressources supplémentaires :

• Guide pour débutants sur le SEO d'images – Optimisez les images pour les moteurs de recherche – Apprenez à nommer et à étiqueter correctement vos captures d'écran pour générer plus de trafic organique vers votre site.
• Outils pour créer de meilleures images pour vos articles de blog – Découvrez nos sélections d'experts des meilleurs outils pour créer des graphiques, des annotations et du contenu visuel attrayants pour vos tutoriels.
• Comment optimiser les images pour les performances Web sans perdre en qualité – Découvrez comment compresser correctement vos captures d'écran et photos afin que votre site Web continue de se charger à la vitesse de l'éclair.
• Meilleurs plugins de portfolio WordPress pour designers et photographes – Si vous utilisez des captures d'écran automatisées pour présenter votre travail de conception Web, ces plugins vous aideront à les afficher magnifiquement à de potentiels clients.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.