Comment générer des captures d'écran de sites Web pour votre site WordPress

Dans ce didacticiel, vous apprendrez un secret secret: comment générer des captures d'écran de sites Web à utiliser dans vos publications WordPress, à l'aide d'un service fourni par WordPress.com. Nous allons même transformer cela en un shortcode facile à utiliser pour afficher les captures d'écran… commençons!

Contexte

C'est un secret de polichinelle, et ce depuis quelques années déjà, que WordPress expose un générateur de captures d'écran dans son sous-domaine s.wordpress.com. Et le problème, c'est que tant que vous n'en abusez pas, vous pouvez l'utiliser gratuitement. WordPress.com l'utilise pour générer des captures d'écran de ses différentes activités.

Par exemple, voici l'URL qui montre une capture d'écran de wp.tutsplus d'une largeur de 400 pixels:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400

Vous devrez peut-être cliquer à nouveau sur le lien car le générateur met un peu de temps pour mettre en cache l'image..

Ce que nous allons faire:

écrire une fonction de shortcode pour afficher une capture d'écran
utilisez le shortcode pour afficher une capture d'écran dans le cadre de la boucle de publication à l'aide d'un champ personnalisé pour l'URL

Étape 1 La fonction de code court

Notre shortcode sera utilisé comme:

 [ss_screenshot site = "http://wp.tutsplus.com"]

Vous pouvez ajouter le code au fichier functions.php de votre répertoire de thème. Le code complet est disponible dans le lien source ci-dessus.

 add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); fonction ss_screenshot_shortcode ($ atts) $ width = intval ($ atts ['width']); $ width = (100 <= $width && $width <= 300) ? $width : 200; $site = trim($atts['site']); if ($site !=") $query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width; $image_tag = ''; écho '' . $ image_tag. '';  else echo 'Bad URL de capture d'écran!';

Ce que fait ce code:

déclarer un shortcode appelé ss_screenshot avec la fonction add_shortcode
la fonction shortcode accepte le tableau $ atts contenant les deux attributs shortcode: width et site
l'attribut width est converti en un entier et vérifié pour s'assurer qu'il se trouve dans une plage appropriée, dans ce cas entre 100 et 300 pixels. Remarque: nous utilisons l'opérateur ternaire PHP pour attribuer une largeur par défaut de 200 si la largeur fournie est en dehors de notre plage. Cela prend également en compte un attribut de largeur manquant.
l'attribut de site est coupé pour supprimer les espaces gauche et droit accidentels
nous créons une URL de requête en ajoutant un attribut de site urlencoded et l'attribut width
Enfin, nous encapsulons query_url dans une balise d'image et une balise de lien afin que les utilisateurs puissent cliquer sur la capture d'écran et accéder au site.

Étape 2 Testez le code court

Dans un post ou une page, insérez ce shortcode:

 [ss_screenshot site = "http://amazon.com"]

Lorsque vous affichez l'article ou la page, vous devriez voir une capture d'écran d'Amazon d'une largeur de 300 pixels. N'oubliez pas que vous devrez peut-être actualiser la page après quelques secondes pour voir la capture d'écran mise en cache. Jouez avec la largeur et observez ce qui se passe lorsque vous sortez de la plage. En passant, vous pouvez définir n’importe quelle largeur. Testez également une mauvaise URL: vous devriez voir le message d'avertissement au lieu d'une capture d'écran..

Maintenant que nous avons un shortcode fonctionnel, voyons comment nous pouvons l'intégrer dans notre boucle WordPress.

Étape 3: Configuration du champ personnalisé

Imaginons un scénario dans lequel nous souhaitons afficher une capture d'écran d'un site à côté de chacun de nos messages. Pour des raisons de formatage et de convivialité, il est préférable d’automatiser ce processus en ajoutant un champ personnalisé à notre écran de post-édition. Dans ce champ, vous pouvez saisir une URL de site qui peut ensuite être utilisée dans la boucle de publication pour afficher une capture d'écran à l'aide de notre nouveau shortcode..

Si le champ personnalisé ne s'affiche pas sur votre écran de post-modification, regardez en haut à droite de l'écran et vous devriez voir l'onglet Options d'écran. Cliquez dessus et cochez la case Champs personnalisés. Maintenant, vous devriez voir quelque chose comme ceci au bas de l'écran:

Cliquez sur le lien Entrer nouveau et créez un nouveau champ personnalisé appelé screenshot_url. Voici ce que vous devriez voir:

Maintenant, lorsque vous créez / modifiez une publication (le champ personnalisé apparaît pour toutes les publications), vous pouvez entrer une URL pour générer une capture d'écran associée à la publication..

Étape 4: Ajouter un affichage de capture d'écran à la boucle

Voici une version sérieusement réduite de la boucle de publication WordPress standard (telle que trouvée dans un fichier de modèle de thème), y compris notre code d'affichage de capture d'écran:

 if (have_posts ()) while (have_posts ()): the_post (); le titre(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); le contenu(); fin si; en attendant;

Ce que fait ce code:

vérifier si nous avons des publications, commencer à boucler et afficher le titre de la publication
obtenir le contenu du champ personnalisé screenshot_url en transmettant l'ID de publication en cours et le nom du champ personnalisé à la fonction get_post_meta
Comme nous sommes dans un fichier modèle, nous utilisons la fonction do_shortcode pour analyser notre shortcode, qui inclut l'URL de la capture d'écran pour ce message.
puis nous affichons le contenu du message et finissons la boucle

Étape 5: testez la boucle

Si vous avez créé un article portant le titre Honda Accord et lui avez attribué une URL de capture d'écran de http://www.honda.com, à l'aide de votre nouvelle configuration de boucle, vous devriez voir quelque chose comme ceci:

Conclusion

Au lieu d’afficher un message d’avertissement sévère si un message ne contient pas d’URL de capture d’écran, vous pouvez afficher une image par défaut..

Si vous ne souhaitez pas utiliser le générateur de captures d'écran de WordPress, ou si vos besoins sont plus importants, vous pouvez utiliser l'option gratuite sur un service de capture d'écran tel que http://www.shrinktheweb.com. Vous pouvez appliquer les techniques utilisées dans ce didacticiel à n’importe quel service de capture d’écran..

Choses à retenir:

les captures d’écran prennent quelques secondes (généralement) à générer, alors actualisez la page
urlencode l'URL envoyée au service de capture d'écran
commencez vos urls par http: //
si vous avez des besoins plus exigeants en matière de captures d'écran, utilisez un service commercial

Code