Vous êtes ici : Accueil | Snippets WordPress | Shortcodes | Afficher des captures d’écran de n’importe quel site avec un shortcode

Afficher des captures d’écran de n’importe quel site avec un shortcode

shortcode snippet

Si vous souhaitez afficher sur votre site ou dans vos articles des captures d’écran d’autres sites, cela peut-être fastidieux d’envoyer une image à chaque fois.

Pour aller plus vite, voici comment afficher ces images automatiquement grâce à une fonctionnalité de WordPress.

Ouvrez le fichier functions.php de votre thème enfant et copiez-collez le code suivant:

/* Afficher les captures d'écran de n'importe quel site web */

add_shortcode("screenshot", "wpm_screenshot");

// On définit les différents paramètres qui seront utilisés par notre shortcode
function wpm_screenshot($atts, $content = null) {
        extract(shortcode_atts(array(
                        "screenshot" => 'https://s.wordpress.com/mshots/v1/',
                        "url" => 'http://',
                        "alt" => "capture d'écran",
                        "width" => '400',
                        "height" => '300'
        ), $atts));
                return $screen = '<img src="' . $screenshot . '' . urlencode($url) . '?w=' . $width . '&h=' . $height . '" alt="' . $alt . '"/>';
}

Quelques explications:

  • la fonction PHP extract() nous donne accès à des variables ayant comme nom les paramètres de notre shortcode. Ce sont ici screenshot, urlalt
  • la fonction shortcode_atts() qui permet de récupérer les attributs par défaut dans le array(), et ceux eventuellement remplis par l’utilisateurs à travers $atts
  • L’URL utilisé pour définir l’attribut screenshot : https://s.wordpress.com/mshots/v1/ utilise l’API mshots de WordPress permettant de générer des captures d’écran « à la volée »
  • Tous les autres attributs sont des paramètres par défaut: la longueur et la largeur souhaitée, ou encore l’attribut alt de votre image.
  • La définition de votre shortcode se fait dans la fonction add_shortcode(« nom du screenshot », « fonction utilisée »). Ici notre shortcode sera [screenshot url= »monsite.fr »]

Voila, il ne vous reste plus qu’à essayer ce nouveau shortcode dans vos articles ou pages en utilisant le code suivant :

[screenshot url="https://wpmarmite.com/chaudron" alt="Capture du Chaudron de WP Marmite" ]

N’hésitez pas à utiliser les attributs width et height si vous voulez redéfinir la taille de votre image.

Et le résultat donné par le shortcode :

capture ecran shortcode wpmarmite

Si jamais la capture d’écran du site ne s’affiche pas correctement, essayer de rafraîchir la page plusieurs fois si nécessaire.

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    ed0b86cf34565b0f96a312ee87ee9399|
    Partagez
    Tweetez
    Partagez