, skabe en shortcode for responderende video,,,,, 4,,,,,,,,, 9,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, hvis du er ligesom mig, kan du bruge til at være vært for en video på youtube tilføje til din wordpress sted.det sparer over - eller anordning forenelighed, det sparer plads på deres servere, og det kan være meget mere pålidelige, foruden, betyder det at din video kan læses af youtube seere samt besøgende på deres område eller blog., men lægger vist youtube videoer har to ulemper:,, misligholdelse, er de ikke - responderende.videoer er indeholdt i en < iframe > element, og selv med den bedste vilje i verden, du kan ikke få en af de der. hvis du udvikler en lokalitet til kunder, der ikke er coders, venter dem til at åbne den tekst "tab af post - redaktør og kopi i en omfatter kode fra youtube, kan være for stor for dem, eller - endnu værre - det kan give dem mulighed for at bryde den hjemmeside.,, i denne lektion, jeg vil vise dig, hvordan at skabe en shortcode for dig eller din klient om at tilføje indbyggede youtube - video i den visuelle" redigering synspunkt og automatisk vil gøre det video - responderende.,, note: i stedet for at kode til et tema er funktioner fil og /eller stylesheeet, anbefaler jeg, at skabe et stik af at føje dette til din hjemmeside, som er den metode, som jeg er efterg. det holder alt på ét sted og betyder, at man kan gøre det muligt at anvende stik af i multipel lokaliteter shortcode så meget, du vil.,, hvad du bliver nødt til at afslutte denne forelæsning, at afslutte denne forelæsning, du får brug for:,, udvikling eller målepladsen med wordpress installeret en kode redaktør, en ftp program til at uploade dine stik af (som kan indarbejdes i din kode udgiver), oprettelse af stik af, begynde med at åbne en ny fil i deres tekst redaktør, og at det - min hedder  , wptutsplus-responsive-video-shortcode.php, men du kan kalde det, hvad du vil. i filen, indsætte følgende kode: <?php /* stik af navn: wptuts + - responderende video shortcode stik af uri: http://rachelmccollin.com beskrivelse: dette stik af giver en shortcode vikler rundt om id i en video på youtube.stik af, så de giver den nødvendige forhøjelse og css lave den video - responderende.for at bruge det, type [responderende video]'source [/responderende video], hvor kilden er iframe omfatter en kode for din video.version 1.0. forfatter: rachel mccollin forfatter uri: http://rachelmccollin.com kørekort: gplv2 * /?> det indeholder din stik af og siger, wordpress navn og version.,,, at shortcode funktion under denne indledende tekst, og den funktion, som vil skabe shortcode det til, add_shortcode, klo, <?php //registrering af shortcode pakke html omkring indholdet funktion wptuts_responsive_video_shortcode ($atts) (ekstrakt (shortcode_atts (array ('identifier = > "), $atts) afkast < div klasse =" wptuts video beholder "> < iframe src =" //www.youtube. kom /omfatter /«.$id. "højde = "240" bredde = 320 "allowfullscreen =" "frameborder =" 0 "> < /iframe > < /div > <!-. wptuts video container - > «) add_shortcode ('responsive-video "," wptuts_responsive_video_shortcode)?> det skaber shortcode selv.lad os se på, hvad det vil shortcode output:,,, der indeholder, div. med klasse, wptuts video beholder, som anvendes til at tilføje css til lave videoen lydhøre, en, iframe element inden for det, der indeholder, div. forbindelsen til youtube - video, som omfatter kode med, $identifikator, i stedet for den entydige identifikationskode for den video, en attribut, $identifikator, som brugeren angives ved tilsætning af shortcode på en side eller post på stedet.det betyder, at han eller hun får ikke brug for den type eller kopi hele omfatter kode,, at css, til at gøre det der, det næste skridt er at tilføje - som vil gøre, at indeholder, div., lydhør.åbne et nyt dossier i din kode redaktør og kalder det, stil. css,.i den nye stylesheet tilføje følgende: /* stylesheet til brug med fleksible video shortcode stik af.giver css, der gør den video - responderende.* /. wptuts video container (holdning: relativ; polstring nederst: 56%; polstring top: 30px. højde: 0; overløb: skjult.}. wptuts video beholder iframe {holdning: absolutte, top: 0; tilbage: 0; bredde: 100%, højde: 100%}, hvad det betyder er følgende:,, det gør cointaining, div., der bruger polstring bunden, at definere højde /breddeforhold (i dette tilfælde 16: 9).det, vores top, erklæring giver plads til grænsen på toppen af den video.ved hjælp af fyld bunden, i stedet for, højde, betyder, at hvis de, div., er ændret, vil det bevare sin højde /breddeforhold. det er absolut postiioning til, iframe element, som sikrer, at det fylder rummet er blevet taget op af den, der indeholder, div.det gør den video - responderende.,, spar din stylesheet., at stylesheet i stik af, de endelige skridt til registrering af den stylesheet i stik af, så det gør brug af css du lige har tilføjet. luk stik af fil igen.over kodeksen for shortcode selv tilføje følgende:, <?php //register stylesheet klo 'wp_enqueue_scripts ", som kan anvendes til forenden css og javascript funktion wptuts_responsive_video_add_stylesheet() {wp_register_style (' wptuts_responsive_video_style, plugins_url (" stil. css, __file__)); wp_enqueue_style ('wptuts_responsive_video_style)} add_action (' wp_enqueue_scripts "," wptuts_responsive_video_add_stylesheet)?> denne vurdering stylesheet og enqueues det med, wp_enqueue_scripts,, der er den rigtige måde at tilføje stylesheets og manuskripter i wordpress., ved hjælp af shortcode nu redde begge dine filer på en mappe med navnet på din stik af. - jeg ringer til min mappe  , wptutsplus responderende video shortcode,.gem det, og få det til plugins mappe i din test site.- stik af. jeg skal bruge en lego - video (som jeg ved, at det vil gøre mine sønner glad).den entydige identifikator, o56p5noynho,, som du kan kopiere fra url, når den video på youtube sted.   i nye eller eksisterende post eller side tilføje shortcode som følger:,, [der video - id = "o56p5noynho"], bortset fra post - og ser det.du vil opdage, at videoen er vist som vist i skærmbillede:,,, prøv nu nedskæring din browser vindue, eller den post på et mobilt udstyr.den video, automatisk resizes:,,, så du er nu i stand til at stråle en youtube - video, du vil ind i dit sted, uden at forlade den visuelle redaktør, og uden at skulle bekymre sig om brugere på forskellige anordninger.