Comment faire des captures d’écran automatiques dans WordPress

Il existe une ressource singulièrement importante et non renouvelable que les gens ont souvent tendance à négliger : le temps. Vous ne pouvez pas en faire plus, n’est-ce pas ? Ce que vous pouvez faire, c’est le sauvegarder. Et l’une des façons de le faire est d’utiliser les outils à votre disposition pour faire pour vous ce que vous auriez autrement à faire manuellement.

Ce tutoriel est tout au sujet prendre des captures d’écran automatiques dans WordPress. Il y a deux façons de le faire, que nous allons vous montrer toutes les deux. Mais avant de plonger nos dents dans les écrous et les boulons du comment, pour mélanger une métaphore, prenons le temps de discuter des situations dans lesquelles vous pourriez vouloir utiliser cette fonction. Voici de quoi nous allons parler.

Pourquoi prendre des captures d’écran automatiquement

Comme c’est très souvent le cas, la création d’un article WordPress implique de nombreux travaux différents. De la recherche et de la collecte de données à la rédaction elle-même, de nombreux processus peuvent impliquer des tâches ennuyeuses ou répétitives. C’est inévitable. Certains d’entre eux peuvent cependant être automatisés, rationalisant votre processus et vous faisant gagner du temps et de la main-d’œuvre, et les captures d’écran du site Web font partie de ces tâches.

Une capture d’écran est en fait une fenêtre sur un autre site Web que vous pouvez intégrer à votre article ou à votre page. Cette fonctionnalité est utile dans les cas où vous voudriez donner des exemples de conception de sites Web ou de mises en page dans le cadre de vos articles ou pages, ou au cas où vous voudriez que vos visiteurs puissent voir une page qui est souvent mise à jour, telle qu’une liste de prix pouvant faire l’objet de remises. De plus, si un site Web est inaccessible depuis votre emplacement, une capture d’écran peut contourner toutes les restrictions, permettant à vos visiteurs d’accéder à du contenu qu’ils ne pourraient pas autrement. Enfin une capture d’écran peut être utilisé pour la navigation, en tant que lien vers un site Web cible qui taquine le contenu actuel du site Web cible.

Une chose à laquelle vous devez faire attention lorsque vous utilisez l’une ou l’autre des méthodes dont nous allons parler est que le les captures d’écran se mettront à jour automatiquement lorsque le site Web source est mis à jour. Utile lors de l’intégration d’un site Web d’actualités fréquemment mis à jour, moins pour un contenu ayant une valeur limitée à long terme.

Comment faire des captures d’écran automatiques à l’aide d’un plugin

Vous pouvez automatiser la capture d’écran dans WordPress à l’aide d’un plugin, que nous recommandons si vous ne vous sentez pas à l’aise pour modifier le code de votre site Web. Le plugin que nous utiliserons est Captures d’écran du navigateur – un plugin de capture d’écran convivial et gratuit. Vous pouvez l’utiliser pour insérer une capture d’écran de n’importe quel site Web dans vos pages ou publications. La capture d’écran sera automatiquement mise à jour à chaque fois que le site Web cible sera mis à jour.

Une fois que vous avez installé et activé ce plugin, vous avez plus ou moins fait ce que vous devez faire. Vous aurez gagné l’utilisation d’un shortcode – [browser-shot] – que vous pouvez utiliser pour prendre des captures d’écran de tous les sites Web de votre choix, à condition que vous fournissiez le shortcode avec les paramètres de shortcode adéquats.

Pour vous montrer comment cela fonctionne, nous l’utiliserons dans le cadre d’une publication, mais vous pouvez utiliser le shortcode dans n’importe quel espace prêt pour les widgets sur votre site Web.

Nous commencerons par un article que nous avons fourni avec un texte de substitution. Pour ajouter une capture d’écran automatique, nous aurons besoin d’un bloc de shortcode. Clique le plus l’icône de signe et sélectionnez un bloc de code court du menu.

Nous allons ajouter le shortcode requis, mais cela nécessite deux autres paramètres pour fonctionner : l’URL du site Web et la largeur de la capture d’écran. Disons que nous voulons utiliser le shortcode pour créer une capture d’écran de notre propre site Web de 700 pixels de large. Voici le shortcode exact que nous utiliserons : [browser-shot url=”https://qodeinteractive.com/magazine/” width=”700“].

Et notre capture d’écran fait maintenant partie du post.

Il existe également de nombreux autres paramètres que vous pouvez utiliser pour compléter votre capture d’écran. Voici quelques-uns des plus utiles, le reste se trouvant sur la page wordpress.org du plugin.

Bien sûr, si vous utilisez le Élémentor éditeur visuel, vous devez utiliser l’élément shortcode, tandis que, pour le Classique éditeur, vous pouvez simplement déposer votre shortcode où vous le souhaitez en mode d’édition HTML.

Comment faire des captures d’écran automatiques à l’aide du code

Le plugin décrit ci-dessus utilise une fonction développée par WordPress lui-même, et vous pouvez également le faire. Vous devrez cependant modifier les fonctions.php déposer. Nous vous recommandons fortement d’utiliser la méthode du plugin ci-dessus si vous ne vous sentez pas à l’aise de modifier le code de votre site Web.

Pour y accéder, naviguez jusqu’à Éditeur d’apparence/de thème en utilisant votre tableau de bord WordPress.

Trouvez le fonctions.php dans le menu de droite de votre Éditeur de thème l’écran et faites défiler jusqu’au bas du fichier.

C’est le code que vous devez coller dans votre fonctions.php déposer. Faites-le, mais faites très attention à ne perturber aucun autre code :

/**
* This shortcode will allow you to create a snapshot of a remote website and post it
* on your WordPress site.
*
* [snapshot url="http://www.wordpress.org" alt="WordPress.org" width="400" height="300"]
*/
add_shortcode( 'snapshot', function ( $atts ) {
$atts = shortcode_atts( array(
'alt' => '',
'url' => 'http://www.wordpress.org',
'width' => '400',
'height' => '300'
), $atts );
$params = array(
'w' => $atts['width'],
'h' => $atts['height'],
);
$url = urlencode( $atts['url'] );
$src="http://s.wordpress.com/mshots/v1/" . $url . '?' . http_build_query( $params, null, '&' );
$cache_key = 'snapshot_' . md5( $src );
$data_uri = get_transient( $cache_key );
if ( ! $data_uri ) {
$response = wp_remote_get( $src );
if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
$image_data = wp_remote_retrieve_body( $response );
if ( $image_data && is_string( $image_data ) ) {
$src = $data_uri = 'data:image/jpeg;base64,' . base64_encode( $image_data );
set_transient( $cache_key, $data_uri, DAY_IN_SECONDS );
}
}
}
return '<img src="' . esc_attr( $src ) . '" alt="' . esc_attr( $atts['alt'] ) . '"/>';
} );

Cliquez sur Fichier de mise à jour lorsque vous avez terminé.

Cela fonctionne de la même manière que la méthode du plugin décrite ci-dessus. Le shortcode s’appelle maintenant [snapshot] et utilise certains des mêmes paramètres : URL, largeur, hauteur, et alt. En travaillant avec le même poste que celui utilisé ci-dessus, nous allons entrer [snapshot width=’700′ height=’500′ url=’https://qodeinteractive.com/magazine/’] dans notre bloc de shortcode pour une capture d’écran de 700 par 500 pixels de notre site Web.

Comme vous pouvez le voir, la capture d’écran est là. Celui-ci n’est qu’une image et ne renvoie pas au site Web d’où provient la capture d’écran.

En conclusion

Voilà, c’est aussi simple que ça. Que vous vous appuyiez sur un plugin ou sur votre propre capacité à modifier le code, vous pouvez désormais économiser beaucoup de temps, d’argent et d’efforts en automatisant la prise de capture d’écran. Comme c’est si souvent le cas avec WordPress, vous pouvez ajouter une fonctionnalité, comme celle-ci, à votre site Web en quelques clics de souris ou une simple commande copier/coller, et cela ne vous coûtera pas un centime.