Création d'un shortcode pour la vidéo réactive

Si vous êtes un peu comme moi, vous utilisez YouTube pour héberger toute vidéo que vous ajoutez à votre site WordPress. Cela évite de s'inquiéter de la compatibilité du navigateur ou du périphérique, il économise de l'espace sur vos serveurs et peut être beaucoup plus fiable.

De plus, cela signifie que les utilisateurs de YouTube ainsi que les visiteurs de votre site ou de votre blog peuvent accéder à vos vidéos..

Cependant, l'ajout de vidéos YouTube en streaming présente deux inconvénients:

Par défaut, ils ne sont pas réactifs. Les vidéos sont contenues dans un </code> élément et avec la meilleure volonté du monde, vous ne pouvez pas rendre l’un de ces réactifs.</li> <li>Si vous développez un site pour des clients qui ne sont pas des développeurs, attendez-leur à ce qu'ils ouvrent l'onglet "Texte" de l'éditeur de publication et que les copier dans un code intégré de YouTube soit trop intimidant pour eux, voire pire. peut leur donner l'occasion de casser le site.</li> </ol> <p>Dans ce tutoriel, je vais vous montrer comment créer un shortcode permettant à vous ou à votre client d'ajouter une vidéo YouTube incorporée dans la vue d'édition "Visual". Cette vidéo sera automatiquement réactive..</p> <em><strong>Remarque:</strong> Au lieu d’ajouter du code au fichier de fonctions et / ou aux stylesheeet d’un thème, je vous recommande de créer un plugin pour l’ajouter à votre site, selon la méthode que je suis. Il conserve tout au même endroit et signifie que vous pouvez activer le plugin sur plusieurs sites pour qu’il utilise le shortcode autant que vous le souhaitez..</em> <hr> <h2>Ce dont vous aurez besoin pour compléter ce didacticiel</h2> <p>Pour compléter ce tutoriel, vous aurez besoin de:</p> <ul> <li>Un site de développement ou de test avec WordPress installé</li> <li>Un éditeur de code</li> <li>Un programme FTP pour télécharger votre plugin (qui peut être incorporé dans votre éditeur de code)</li> </ul> <hr> <h2>Configurer le plugin</h2> <p>Commencez par ouvrir un nouveau fichier dans votre éditeur de texte et nommez-le - le mien s'appelle <strong>wptutsplus-responsive-video-shortcode.php</strong> mais tu peux appeler le tien comme tu veux.</p> <p>Dans le fichier, insérez le code suivant:</p> <pre> <?php /* Plugin Name: WpTuts+ Responsive Video Shortcode Plugin URI: http://rachelmccollin.com Description: This plugin provides a shortcode you wrap around the ID of a video in YouTube. The plugin then adds the necessary markup and CSS to make that video responsive. To use it, type [responsive-video]'source'[/responsive-video], where 'source' is the iframe embed code for your video. Version: 1.0 Author: Rachel McCollin Author URI: http://rachelmccollin.com License: GPLv2 */ ?></pre> <p>Ceci configure votre plugin et indique à WordPress son nom et sa version..</p> <hr> <h2>Ajout de la fonction Shortcode</h2> <p>Au-dessous de ce texte d’ouverture, ajoutez la fonction qui créera le shortcode et raccordez-le au <code>add_shortcode</code> crochet d'action:</p> <pre> <?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) extract( shortcode_atts( array ( 'identifier' =>"), $ atts)); return '<div><iframe src="//www.youtube.com/embed/' . $identifier . '" frameborder="0">

 ';  add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode'); ?> Cela crée le shortcode lui-même. Regardons ce que ce shortcode produira:
  Un contenant div avec la classe wptuts-video-container, qui sera utilisé pour ajouter du CSS pour rendre la vidéo sensible
 Un iframe élément dans celui contenant div 
 Le lien vers la vidéo YouTube dans le code d'intégration, avec $ identifiant à la place du code d'identification unique de la vidéo
 Un attribut de $ identifiant que l’utilisateur spécifiera lors de l’ajout du shortcode à une page ou à une publication sur le site. Cela signifie qu'il n'aura pas besoin de taper ou de copier le code d'intégration complet
 
 
 Ajout de CSS pour rendre les choses réactives
 La prochaine étape consiste à ajouter le style qui rendra cela contenant div sensible. Ouvrez un nouveau fichier dans votre éditeur de code et appelez-le. style.css. Dans la nouvelle feuille de style, ajoutez ce qui suit:
  / * stylesheet à utiliser avec le plug-in de shortcode vidéo réactif. Fournit le CSS qui rend la vidéo sensible. * / .wptuts-video-container position: relative; rembourrage en bas: 56,25%; rembourrage en haut: 30px; hauteur: 0; débordement caché;  .wptuts-video-container iframe position: absolute; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; 
 Ce que cela fait est la suivante:
  Il fait le cointaining div réactif, utilisant rembourrage en bas définir le format (dans ce cas 16: 9). le rembourrage déclaration fournit l'espace pour la bordure en haut de la vidéo. En utilisant rembourrage en bas au lieu de la taille signifie que si le div est redimensionné, il conservera ses proportions.
 Il ajoute une position absolue au iframe élément, en veillant à ce qu’il remplisse l’espace occupé par le conteneur div. Cela rend la vidéo sensible.
 
 Maintenant, enregistrez votre feuille de style.
 
 Enregistrer la feuille de style dans le plugin
 La dernière étape consiste à enregistrer la feuille de style dans le plug-in afin qu'il utilise le CSS que vous venez d'ajouter..
 Ouvrez le fichier plugin à nouveau. Au-dessus du code du shortcode lui-même, ajoutez ce qui suit:
  
 Ceci enregistre la feuille de style et la met en file d'attente en utilisant wp_enqueue_scripts, quelle est la bonne façon d'ajouter des feuilles de style et des scripts dans WordPress.
 
 Utiliser le Shortcode
 Maintenant, sauvegardez vos deux fichiers dans un dossier avec le nom de votre plugin - J'appelle mon dossier wptutsplus-responsive-video-shortcode. Enregistrez ceci et chargez-le dans le dossier plugins de votre site de test. Activer le plugin.
 Je vais utiliser une vidéo de Lego Superheroes (car je sais que cela rendra mes fils heureux). Son identifiant unique est O56p5nOYNHo, que vous pouvez copier à partir de l’URL lors de la visualisation de la vidéo sur le site YouTube. Dans une publication ou une page nouvelle ou existante, ajoutez le code court comme suit:
 [responsive-video identifier = "O56p5nOYNHo"]
 Enregistrez le message et affichez-le. Vous constaterez que la vidéo est diffusée en continu, comme indiqué sur la capture d'écran:
  Maintenant, essayez de redimensionner la fenêtre de votre navigateur ou d’afficher la publication sur un appareil mobile. La vidéo redimensionne automatiquement:
  Ainsi, vous pouvez désormais diffuser sur votre site toutes les vidéos YouTube que vous souhaitez, sans quitter Visual Editor et sans avoir à vous soucier des utilisateurs sur différents appareils..



		
			
	   
	




Code