Comment prendre automatiquement des captures d'écran du navigateur et les afficher dans WordPress

Les images et les captures d'écran sont un élément clé de tout blog WordPress. En particulier, les captures d'écran vous permettent de mettre en évidence les aspects clés d'autres pages. Cependant, il peut être difficile de prendre les captures d'écran parfaites du navigateur et de les ajouter à vos publications. Bien que vous puissiez faire le travail en fonction de votre système d'exploitation (OS), prendre des captures d'écran de manière cohérente est un défi.

Entrez le plug-in de captures d'écran du navigateur. Cela vous permet de capturer n'importe quel site Web, sans même quitter l'éditeur WordPress. Si vos oreilles sont dressées à ce sujet, vous voudrez probablement continuer à lire.

Voyons comment cela fonctionne !

Abonnez-vous à notre chaîne Youtube

Une introduction au plugin de captures d'écran du navigateur

Browser Screenshots est sans doute un plugin de niche qui mérite une place sur votre site Web. Il vous permet de prendre des captures d'écran dynamiques du navigateur de n'importe quelle page sans quitter l'éditeur WordPress. Cela s'applique à la fois aux éditeurs classiques et aux éditeurs de blocs, selon l'option que vous préférez. Cela contraste avec les solutions natives du système d'exploitation, qui vous obligent à ouvrir de nouvelles fenêtres de navigateur et à optimiser davantage vos images, en dehors de la plate-forme.

Si vous utilisez l'éditeur classique, les captures d'écran du navigateur vous permettent d'utiliser un shortcode personnalisé pour générer les captures souhaitées. Vous pouvez ajouter plusieurs captures d'écran dans n'importe quelle page ou publication, et il en va de même pour l'éditeur de blocs.

Étant donné que le plugin génère des captures d'écran de manière dynamique, il est parfait pour les situations où vous ne souhaitez pas utiliser de prises de vue obsolètes pour votre contenu. Si vous avez une page ou une publication qui inclut un shortcode ou un bloc de captures d'écran du navigateur, les visiteurs verront une capture d'écran en temps réel. C'est une proposition alléchante pour certains types de contenu.

Quelle que soit l'approche que vous utilisez, le plugin vous permet également de personnaliser la résolution des captures d'écran du navigateur prises. Vous pouvez également ajouter du texte alternatif et du texte à vos images, ainsi que des classes CSS personnalisées.

Cependant, il est important de comprendre que ce plugin ne prend que des captures d'écran du navigateur "au-dessus de la ligne de flottaison". Cela signifie que les zones où vous devez faire défiler ne seront pas affichées. La taille de cette zone dépendra des paramètres que vous configurez pour chaque capture d'écran du navigateur, et vous apprendrez comment le faire plus tard.

Principales caractéristiques:

• Utilisez des codes courts ou des blocs pour prendre des photos personnalisées de n'importe quel site Web dans la fenêtre de votre navigateur.
• Ajoutez des captures d'écran du navigateur dans votre contenu sans avoir à les prendre ou à les télécharger manuellement.
• Personnalisez la résolution des captures d'écran de votre navigateur.
• Ajoutez des classes CSS personnalisées aux images générées par le plugin.
• Ajoutez des liens et du texte alternatif à vos images.

Prix ​​: Gratuit | Plus d'information

Comment utiliser le plugin de captures d'écran du navigateur (2 approches)

À présent, vous savez déjà comment fonctionne le plug-in de capture d'écran du navigateur, voyons donc comment l'utiliser. Les shortcodes sont une partie fondamentale du plugin, alors examinons-le en premier.

1. Utilisez des codes courts pour générer des captures d'écran dynamiques du navigateur

Le plugin Browser Screenshots vous permet d'utiliser le shortcode personnalisé suivant pour générer des captures de navigateur dynamiques :

[browser-shot url="elegantthemes.com" width="600" height="400"]

Le shortcode comprend deux paramètres de base : width et height . Les deux paramètres utilisent des valeurs de pixels et la résolution par défaut que le plugin utilise pour prendre des photos est de 600 x 400 . Bien sûr, vous voudrez également ajouter l'URL spécifique que vous souhaitez capturer au shortcode.

Que vous utilisiez l'éditeur de blocs ou l'éditeur classique, le shortcode affichera une capture d'écran semblable à la suivante :

Cependant, les captures d'écran du navigateur vous permettent également de définir plusieurs paramètres personnalisés. Outre la largeur et la hauteur, ceux-ci incluent les éléments suivants :

• Alt : ce paramètre vous permet de définir un texte alternatif pour votre capture d'écran.
• Lien : Vous pouvez choisir vers quel lien l'image pointe à l'aide de ce paramètre (qui peut différer de l'origine de la prise de vue).
• Cible : Ce paramètre vous permet de contrôler si les liens d'image s'ouvrent dans une nouvelle fenêtre ou non.

À titre d'exemple, voici à quoi ressemblerait un shortcode complet comprenant tous les paramètres :

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

Vous pouvez également utiliser des shortcodes pour ajouter des légendes manuellement :

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

Dans la plupart des cas, les deux paramètres les plus importants que vous utiliserez sont width et height . L'utilisation des mêmes valeurs pour toutes les captures d'écran du navigateur que vous prenez ne donnera souvent pas les meilleurs résultats, vous devrez donc adapter vos paramètres en fonction du contenu.

2. Utilisez des blocs pour ajouter des captures d'écran à votre site Web

Si vous utilisez l'éditeur de blocs, le plugin Browser Screenshots vous donnera accès à un nouveau bloc appelé Browser Shots :

La sélection du bloc demandera au plugin de vous demander quel site Web vous souhaitez utiliser pour générer une capture d'écran. Dans cet exemple, nous utilisons la page d'accueil Amazon US :

Une fois que vous avez cliqué sur Find Image , le plugin "prendra" une capture d'écran et l'affichera dans l'éditeur de blocs :

Une chose à garder à l'esprit est que le plugin ne peut pas accéder aux pages privées ou s'y connecter pour vous. Pour ces types de captures d'écran de navigateur, vous devrez faire le sale boulot vous-même.

En continuant, à droite de cette capture d'écran, vous pouvez voir l'onglet Détails du bloc . Cela vous permet de modifier tous les paramètres dont nous avons parlé plus tôt sans avoir besoin d'ajouter des shortcodes personnalisés.

Modifier la largeur et la hauteur des captures d'écran de votre navigateur est beaucoup plus simple à l'aide de l'éditeur de blocs. En effet, l'éditeur vous permet de consulter un aperçu en appuyant sur le bouton Actualiser l'image sous les paramètres de hauteur et de largeur :

Si vous comparez les deux exemples, vous pouvez voir comment le changement de résolution modifie la zone que le plugin capture pour vous. Au-delà de cela, vous pouvez également ajouter des liens personnalisés à vos captures d'écran, configurer s'ils s'ouvrent ou non dans un nouvel onglet et définir des classes CSS personnalisées ici.

Conclusion

Si vous incluez régulièrement des captures d'écran du navigateur dans le contenu de votre blog, le plugin Browser Screenshots peut vous faire gagner beaucoup de temps. C'est un plugin assez spécialisé, mais si vous faites partie de la foule que nous avons mentionnée, cela rendra l'édition des messages beaucoup plus facile.

À l'aide des captures d'écran du navigateur, vous pouvez ajouter des captures d'écran de votre navigateur à l'aide d'un simple shortcode ou de l'éditeur de blocs. Pour les codes courts, le plugin comprend plusieurs paramètres qui vous permettent de personnaliser les captures d'écran, tels que la largeur, la hauteur et même alt (pour le texte alt).

Avez-vous des questions sur l'utilisation du plug-in de captures d'écran du navigateur ? Parlons-en dans la section commentaires ci-dessous!

Image miniature de l'article par VectorMine / shutterstock.com