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.
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.
13 Commentaires
Merci, je vais le tester!
il faudrait pouvoir sélectionner la zone de capture ;) lol
Merci :)
http://wordpress.org/extend/plugins/wordpress-snap/
http://www.geekeries.fr/snippet/creer-automatiquement-miniatures-sites-wordpress/
Bonsoir, impec j’ai parlé de ton tuto sur mon jeune site :-) http://pascal-gibert.com/geekpress-capture-ecran-shortcode-wordpress/263/ , merci bien à toi.
@Valentin : Merci pour le partage du plugin.
Bonsoir à tous,
Super pratique effectivement !
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
Belle idée ! Je cours tester !
Nickel, exactement ce que je cherchais. Merci à toi Jean-David pour avoir partagé ce shortcode.
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
Mince, mon commentaire ne ressemble à rien… Qui plus est, le tout est maintenant intégré dans un plugin disponible ici : http://wordpress.org/extend/plugins/wordpress-snap/
Il n’y a plus qu’a tester.
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
Merci beaucoup je vais essayer cela je cherchais depuis un bon bout de temps
Merci pour l’astuce ;) simple mais il fallait y penser.
Je vais tester !