Opprette en kortkode for responsiv video

Hvis du er noe som meg, bruker du YouTube til å være vert for alle videoer du legger til på WordPress-siden din. Det sparer bekymring for nettleser eller enhetskompatibilitet, det sparer plass på serverne dine, og det kan være mye mer pålitelig.

I tillegg betyr det at videoene dine kan nås av YouTube-seere, samt besøkende til nettstedet ditt eller bloggen din.

Men å legge til streamede YouTube-videoer har to ulemper:

Som standard er de ikke lydhør. Videoer finnes i en </code> element og med den beste viljen i verden, kan du ikke gjøre en av dem lydhør.</li> <li>Hvis du utvikler et nettsted for klienter som ikke er kodere, kan de forvente at de åpner seg for «Tekst» -fanen i Postredigeringsprogrammet og kopierer i en innebygningskode fra YouTube, for å være vanskelig for dem, eller - enda verre kan gi dem en mulighet til å bryte nettstedet.</li> </ol> <p>I denne veiledningen vil jeg vise deg hvordan du lager en kodenavn som gjør det mulig for deg eller din klient å legge til innebygd YouTube-video i visningsvisningsvisningen, og vil automatisk gjøre det video responsivt.</p> <em><strong>Merk:</strong> I stedet for å legge til kode i et temas funksjonsfil og / eller stylesheeet, anbefaler jeg å lage et plugin for å legge til dette på nettstedet ditt, som er metoden jeg følger. Den holder alt på ett sted, og betyr at du kan aktivere pluginet i mutliple-steder for å bruke kortnummeret så mye du trenger.</em> <hr> <h2>Hva du trenger for å fullføre denne opplæringen</h2> <p>For å fullføre denne opplæringen må du:</p> <ul> <li>Et utviklings- eller teststed med WordPress installert</li> <li>En kodeditor</li> <li>Et FTP-program for å laste opp pluginet ditt (som kan bli innlemmet i kodeditoren din)</li> </ul> <hr> <h2>Sette opp pluggen</h2> <p>Start med å åpne en ny fil i tekstredigeringsprogrammet, og navngi det - min heter <strong>wptutsplus-responsive-video-shortcode.php</strong> men du kan ringe deg hva du vil.</p> <p>I filen legger du inn følgende kode:</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>Dette setter opp pluginet ditt og forteller WordPress sitt navn og versjon.</p> <hr> <h2>Legge til kortnummerfunksjonen</h2> <p>Under denne åpningsteksten legger du til funksjonen som vil opprette kortnummeret og koble den til <code>add_shortcode</code> Handlingskrok:</p> <pre> <?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) extract( shortcode_atts( array ( 'identifier' =>"), $ atts)), returnere"<div><iframe src="//www.youtube.com/embed/' . $identifier . '" frameborder="0">

 ';  add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode'); ?> Dette skaper kortkoden selv. La oss se på hva den korte koden vil sende ut:
  A inneholder div med klassen wptuts-video-container, som vil bli brukt til å legge til CSS for å gjøre videoen lydhør
 en iframe element i det som inneholder div 
 Koblingen til YouTube-videoen i innebygningskoden, med $ identifikator i stedet for den unike identifikasjonskoden for videoen
 En attributt av $ identifikator som brukeren vil spesifisere når du legger til koden til en side eller et innlegg på nettstedet. Dette betyr at han eller hun ikke trenger å skrive eller kopiere hele embedkoden
 
 
 Legge til CSS for å gjøre ting responsivt
 Det neste trinnet er å legge til styling som vil gjøre det som inneholder div mottakelig. Åpne en ny fil i kodeditoren din og ring den style.css. I det nye stilarket legger du til følgende:
  / * stilark for bruk med responsiv video shortcode plugin. Gir CSS som gjør videoen lydhør. * / .wptuts-video-container posisjon: relative; polstring bunn: 56,25%; polstring: 30px; høyde: 0; overløp: skjult;  .wptuts-video-container iframe posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; 
 Hva dette gjør er følgende:
  Det gjør cointaining div lydhør, bruk av padding-bottom å definere aspektforholdet (i dette tilfellet 16: 9). De padding-top Deklarasjon gir plass til grensen øverst i videoen. Ved hjelp av padding-bottom i stedet for høyde betyr at hvis div er forandret, vil den opprettholde aspektforholdet.
 Det legger til absolutt postiioning til iframe element, slik at det fyller plassen opptatt av det inneholdende div. Dette gjør videoen lydhør.
 
 Lagre stilarket ditt nå.
 
 Registrere stilarket i pluginprogrammet
 Det siste trinnet er å registrere stilarket i pluginet slik at det bruker CSS du nettopp har lagt til.
 Åpne pluginfilen igjen. Over koden for kortnummeret selv legger du til følgende:
  
 Dette registrerer stilarket og anvender det wp_enqueue_scripts, som er den riktige måten å legge til stilark og skript i WordPress.
 
 Bruke kortnummeret
 Lagre begge filene dine i en mappe med navnet på pluginet ditt - jeg ringer til min mappe wptutsplus-responsive-video-snarvei. Lagre dette og last det opp til plugin-mappen på teststedet ditt. Aktiver plugin.
 Jeg skal bruke en Lego Superheroes-video (som jeg vet at vil gjøre sønnen min lykkelige). Den unike identifikatoren er O56p5nOYNHo, som du kan kopiere fra nettadressen når du ser videoen på YouTube-siden. I en ny eller eksisterende post eller side legger du til kortnummeret som følger:
 [responsive-video identifier = "O56p5nOYNHo"]
 Lagre innlegget og se det. Du finner at videoen er streamet, som vist på skjermbildet:
  Prøv nå å endre størrelsen på nettleservinduet, eller se innlegget på en mobilenhet. Videoen endres automatisk:
  Så du er nå i stand til å streame hvilken som helst YouTube-video du vil ha på nettstedet ditt uten å gå bort fra Visual Editor og uten å måtte bekymre deg for brukere på forskjellige enheter.



		
			
	   
	




Kode