Een shortcode maken voor responsieve video

Als je op mij lijkt, gebruik je YouTube om video's te hosten die je toevoegt aan je WordPress-site. Het bespaart u zorgen over de compatibiliteit van browsers of apparaten, het bespaart ruimte op uw servers en het kan een stuk betrouwbaarder zijn.

Bovendien betekent dit dat je video's zowel door YouTube-kijkers als bezoekers van je site of blog kunnen worden bekeken.

Het toevoegen van gestreamde YouTube-video's heeft echter twee nadelen:

Standaard reageren ze niet. Video's zijn opgenomen in a </code> element en met de beste wil ter wereld, je kunt een van die mensen niet responsief maken.</li> <li>Als u een site aan het ontwikkelen bent voor clients die geen codeerprogramma's zijn, is het verwachten van hen om het tabblad 'Tekst' van de berichteditor te openen en in een insluitcode van YouTube te kopiëren misschien te ontmoedigend, of - nog erger - het geeft hen de mogelijkheid om de site te verbreken.</li> </ol> <p>In deze tutorial laat ik je zien hoe je een shortcode kunt maken waarmee jij of je klant ingesloten YouTube-video kan toevoegen in de 'Visuele' bewerkingsweergave en automatisch die video reageert.</p> <em><strong>Notitie:</strong> In plaats van code toe te voegen aan het bestand van een themafunctie en / of stylesheeet, raad ik aan een plug-in te maken om dit toe te voegen aan uw site, de methode die ik volg. Het houdt alles op één plek en betekent dat je de plug-in op mutliple-sites kunt inschakelen om de shortcode te gebruiken zoals je nodig hebt.</em> <hr> <h2>Wat u nodig hebt om deze zelfstudie te voltooien</h2> <p>Om deze tutorial te voltooien, heb je nodig:</p> <ul> <li>Een ontwikkel- of testsite met WordPress geïnstalleerd</li> <li>Een code-editor</li> <li>Een FTP-programma om uw plug-in te uploaden (die mogelijk is opgenomen in uw code-editor)</li> </ul> <hr> <h2>De plug-in instellen</h2> <p>Begin met het openen van een nieuw bestand in je teksteditor en noem het - de mijne wordt genoemd <strong>wptutsplus-responsieve-video-shortcode.php</strong> maar je kunt de jouwe noemen wat je maar wilt.</p> <p>Voeg in het bestand de volgende code in:</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>Hiermee wordt uw plug-in ingesteld en wordt WordPress de naam en versie ervan gegeven.</p> <hr> <h2>De Shortcode-functie toevoegen</h2> <p>Onder deze openingstekst voegt u de functie toe waarmee de shortcode wordt gemaakt en aan de <code>add_shortcode</code> actie haak:</p> <pre> <?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) extract( shortcode_atts( array ( 'identifier' =>"), $ atts)); terug '<div><iframe src="//www.youtube.com/embed/' . $identifier . '" frameborder="0">

 ';  add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode'); ?> Hiermee wordt de shortcode zelf gemaakt. Laten we kijken naar wat die shortcode zal opleveren:
  Een bevattende div met de klas wptuts-video-container, die zal worden gebruikt om CSS toe te voegen om de video responsief te maken
 Een iframe element binnen dat bevat div 
 De link naar de YouTube-video in de insluitcode, met $ identifier in plaats van de unieke identificatiecode voor de video
 Een attribuut van $ identifier die de gebruiker zal specificeren bij het toevoegen van de shortcode aan een pagina of post op de site. Dit betekent dat hij of zij de hele insluitcode niet hoeft te typen of kopiëren
 
 
 CSS toevoegen om dingen responsive te maken
 De volgende stap is om de styling toe te voegen die die inhoud zal maken div responsief. Open een nieuw bestand in je code-editor en noem het style.css. Voeg in de nieuwe stylesheet het volgende toe:
  / * stylesheet voor gebruik met responsieve video shortcode plug-in. Biedt de CSS waarmee de video reageert. * / .wptuts-video-container positie: relatief; opvulbodem: 56,25%; padding-top: 30px; hoogte: 0; overloop verborgen;  .wptuts-video-container iframe position: absolute; top: 0; links: 0; breedte: 100%; hoogte: 100%; 
 Wat dit doet is het volgende:
  Het maakt het munten div responsief, gebruik padding-bottom om de beeldverhouding te definiëren (in dit geval 16: 9). De padding-top declaratie biedt de ruimte voor de rand boven aan de video. Gebruik makend van padding-bottom in plaats van hoogte betekent dat als het div is van grootte veranderd, het behoudt zijn beeldverhouding.
 Het voegt absolute postiioning toe aan de iframe element, ervoor te zorgen dat het de ruimte gevuld door de bevattende vult div. Dit maakt de video responsief.
 
 Sla nu je stylesheet op.
 
 Het stylesheet registreren in de plug-in
 De laatste stap is het registreren van de stylesheet binnen de plug-in, zodat deze gebruikmaakt van de CSS die u zojuist hebt toegevoegd.
 Open het plug-in bestand opnieuw. Boven de code voor de shortcode zelf, voegt u het volgende toe:
  
 Hiermee registreert u het stylesheet en plaatst u het in de wachtrij wp_enqueue_scripts, wat de juiste manier is om stijlbladen en scripts toe te voegen in WordPress.
 
 De shortcode gebruiken
 Bewaar nu beide bestanden in een map met de naam van uw plug-in - ik bel mijn map wptutsplus-responsieve-video-shortcode. Sla dit op en upload het naar de map met plug-ins op uw testsite. Activeer de plugin.
 Ik ga een video van Lego Superheroes gebruiken (aangezien ik weet dat mijn zonen blij zullen worden). Zijn unieke identificatie is O56p5nOYNHo, die je kunt kopiëren van de URL bij het bekijken van de video op de YouTube-site. Voeg in een nieuwe of bestaande post of pagina de shortcode toe als volgt:
 [responsive-video identifier = "O56p5nOYNHo"]
 Sla het bericht op en bekijk het. Je zult zien dat de video wordt gestreamd, zoals te zien in de screenshot:
  Probeer nu het formaat van je browservenster aan te passen of bekijk het bericht op een mobiel apparaat. De video wordt automatisch van grootte veranderd:
  U kunt nu elke gewenste YouTube-video naar uw site streamen zonder de Visual Editor te verlaten en zonder u zorgen te maken over gebruikers op verschillende apparaten.



		
			
	   
	




Code