Tout savoir sur WordPress

Insérer une capture d’écran d’un site avec un shortcode

Cette astuce permet d’insérer rapidement des captures d’écrans de site Internet dans un article à l’aide d’un shortcode.

Vous en avez assez de devoir vous cassez la tête à chaque fois pour réaliser une capture d’écran d’un site, puis l’uploader et l’insérer ? Cette astuce est faite pour vous, car une fois le code écrit, un shortcode suffit à opérer une capture d’écran.

L’astuce réside dans le fait de configurer un shortcode. Nous allons utiliser un service de WordPress nommé mShots. En utilisant une partie de son URL, on crée les snapshots (captures d’écran).

Copier le code suivant dans le fichier functions.php présent à la racine de votre thème :

add_shortcode("snap", "snap_shortcode");
function snap_shortcode($atts) {
    
    extract(shortcode_atts(array(
	    "url" => "http://localhost/wordpress/geekpress", // URL du site a capturer
	    "alt" => "GeekPress", // attribut alt de la capture
	    "w" => "450", // largeur de la capture
	    "h" => "300" // hauteur de la capture
	), $atts));
	
    //On définit les attributs de l'image en réutilisant la configuration
    return '<img src="http://s.wordpress.com/mshots/v1/' . esc_url($url) . '?w=' . (int)$w . '&h=' . (int)$h . '" alt="' . esc_attr($alt) . '"/>';
}

Maintenant, si vous créez un nouvel article, vous pouvez taper dans votre éditeur le code suivant :

[snap url="http://www.wordpress-fr.org/" alt="WordPress FR" w="450" h="300"]

Vous allez obtenir une capture d’écran du site Internet de l’association WordPress FR d’une largeur de 450px et d’une hauteur de 300px.

Capture écran du site WordPress FR
Capture écran du site WordPress FR à l'aide du shortcode

Voilà, vous savez maintenant comment intégrer une capture d’écran d’un site Internet dans vos articles.

J’espère que cette astuce vous a plu et qu’elle vous sera utile. N’hésitez pas à faire part de vos remarques ou impressions dans les commentaires.

Cet article a été publié il y a 4356 jours - Il n'est peut être plus à jour !

Article écrit par Jean-David

13 Commentaires

  1. Je crois que ça va beaucoup m’aider pour mon portfolio (je ferai peu être un retour une fois utilisé), ça déchire du steak (tartare).
    Merci Jean-David pour l’astuce.

    Cordialement,
    Yannick

  2. Nickel, exactement ce que je cherchais. Merci à toi Jean-David pour avoir partagé ce shortcode.

  3. Petite question: pour rediriger la capture d’écran, je sélectionne le shortcode et je clique sur le bouton insérer un lien. Cependant cette méthode n’est pas pratique car il faut saisir une deuxième fois l’adresse de la page capturée. Connaissez vous le code et le shortcode à employer pour rediriger automatiquement une capture d’écran vers son url respective (avec un champs href=$url notamment ou un truc de ce genre). Merci

  4. Aie…. La fonctionnalité mshots n’est visiblement plus disponible chez wordpress.com, ce qui rend inutilisable le bout de code cité plus haut ainsi que le plugin.
    Dommage