Crearea unui cod scurt pentru un videoclip receptiv

Dacă ești ca mine, folosești YouTube pentru a găzdui orice videoclip pe care îl adaugi pe site-ul tău WordPress. Aceasta salvează îngrijorarea cu privire la compatibilitatea browser-ului sau a dispozitivului, economisește spațiu pe serverele dvs. și poate fi mult mai fiabilă.

În plus, înseamnă că videoclipurile dvs. pot fi accesate de telespectatorii YouTube, precum și de vizitatorii site-ului sau de pe blogul dvs..

Cu toate acestea, adăugarea de videoclipuri YouTube redate are două dezavantaje:

În mod implicit, acestea nu sunt receptive. Videoclipurile sunt conținute într-un </code> element și cu cea mai bună voință din lume, nu puteți face pe cineva care să răspundă.</li> <li>Dacă dezvoltați un site pentru clienți care nu sunt coderi, așteptându-i să deschidă fila "Text" a Editorului de posturi și să copieze într-un cod de încorporare de pe YouTube, poate fi prea dificil pentru ei sau - și mai rău - le poate oferi posibilitatea de a sparge site-ul.</li> </ol> <p>În acest tutorial vă vom arăta cum să creați un scurtcod care să vă permită pe dvs. sau pe clientul dvs. să adăugați un videoclip YouTube încorporat în vizualizarea de editare vizuală și va face ca acel videoclip să răspundă automat.</p> <em><strong>Notă:</strong> În loc să adăugați codul în fișierul de funcții al unei teme și / sau stilul de stil, vă recomand să creați un plugin pentru a adăuga acest lucru site-ului dvs., care este metoda pe care o urmăresc. Păstrează totul într-un singur loc și înseamnă că puteți să activați plugin-ul în site-uri mutuale pentru a utiliza codul scurt atât cât aveți nevoie.</em> <hr> <h2>Ce veți avea nevoie pentru a completa acest tutorial</h2> <p>Pentru a finaliza acest tutorial, veți avea nevoie de:</p> <ul> <li>Un site de dezvoltare sau test cu WordPress instalat</li> <li>Un editor de cod</li> <li>Un program FTP pentru încărcarea pluginului (care poate fi încorporat în editorul de cod)</li> </ul> <hr> <h2>Configurarea pluginului</h2> <p>Începeți prin a deschide un fișier nou în editorul dvs. de text și numiți-l - numele meu este numit <strong>wptutsplus-receptiv-video-shortcode.php</strong> dar puteți apela a ta cât vrei.</p> <p>În fișier, introduceți următorul cod:</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>Acest lucru stabilește plugin-ul și îi spune WordPress numele și versiunea.</p> <hr> <h2>Adăugarea funcției Shortcode</h2> <p>Sub acest text de deschidere, adăugați funcția care va crea codul de scurtcircuit și îl va cupla la <code>add_shortcode</code> cârlig de acțiune:</p> <pre> <?php // register the shortcode to wrap html around the content function wptuts_responsive_video_shortcode( $atts ) extract( shortcode_atts( array ( 'identifier' =>"), $ atts)); returnați"<div><iframe src="//www.youtube.com/embed/' . $identifier . '" frameborder="0">

 „;  add_shortcode ("răspuns-video", "wptuts_responsive_video_shortcode"); ?> Acest lucru creează codul scurt în sine. Să ne uităm la ceea ce va produce codul scurt:
  A conține div cu clasa wptuts-video-container, care va fi folosit pentru a adăuga CSS pentru a face video receptiv
 Un iframe element care conține div 
 Linkul către videoclipul YouTube din cadrul codului de încorporare, cu identificator $ în locul codului unic de identificare a videoclipului
 Un atribut al identificator $ pe care utilizatorul o va specifica atunci când adaugă codul scurt la o pagină sau o postare de pe site. Aceasta înseamnă că nu va trebui să tastați sau să copiați întregul cod de încorporare
 
 
 Adăugarea CSS pentru a face lucrurile receptive
 Următorul pas este să adăugați stilul care va face ca acesta să conțină div receptiv. Deschideți un fișier nou în editorul de cod și apelați-l style.css. În noua foaie de stil adăugați următoarele:
  / * foaie de stil pentru a fi utilizată cu un plug-in de răspuns rapid pentru coduri video. Oferă CSS care face ca videoclipul să fie receptiv. * / .wptuts-video-container poziție: relativă; pad-bottom: 56,25%; padding-top: 30px; înălțime: 0; overflow: ascuns;  .wptuts-video-container iframe poziție: absolută; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; 
 Ceea ce face acest lucru este următorul:
  Ea face cointaining div receptiv, folosind umplutură de fund pentru a defini raportul de aspect (în acest caz 16: 9). padding-top declarația oferă spațiul pentru marginea din partea superioară a videoclipului. Utilizarea umplutură de fund in loc de înălţime înseamnă că dacă div este redimensionat, își va menține raportul de aspect.
 Aceasta adaugă o răspândire absolută la iframe element, asigurându-se că acesta umple spațiul ocupat de conținutul div. Acest lucru face ca videoclipul să fie receptiv.
 
 Acum salvați foaia de stil.
 
 Înregistrarea foii de stil în Plugin
 Ultimul pas este să înregistrați foaia de stil în plugin-ul, astfel încât acesta să utilizeze CSS-ul pe care tocmai l-ați adăugat.
 Deschideți din nou fișierul plugin. Deasupra codului pentru codul scurt, adăugați următoarele:
  
 Acest lucru înregistrează foaia de stil și enqueues ea folosind wp_enqueue_scripts, care este modul corect de a adăuga foi de stil și scripturi în WordPress.
 
 Utilizarea codului scurt
 Acum salvați ambele fișiere într-un dosar cu numele pluginului dvs. - sună dosarul meu wptutsplus-receptiv-video-SHORTCODE. Salvați acest lucru și încărcați-l în dosarul pluginurilor de pe site-ul dvs. de testare. Activați pluginul.
 Am de gând să folosesc un video Lego Superheroes (așa cum știu că va face pe fiii mei fericiți). Identificatorul său unic este O56p5nOYNHo, pe care îl puteți copia de la adresa URL atunci când vizionați videoclipul pe site-ul YouTube. Într-o postare sau o pagină nouă sau existentă, adăugați codul scurt după cum urmează:
 [identificator video receptiv = "O56p5nOYNHo"]
 Salvați postarea și vizualizați-o. Veți descoperi că videoclipul este transmis în flux, după cum se arată în captura de ecran:
  Încercați să redimensionați fereastra browserului dvs. sau să vizualizați postarea de pe un dispozitiv mobil. Videoclipul redimensionează automat:
  Deci, acum puteți redirecționa orice material YouTube pe site-ul dvs. pe site-ul dvs. fără a vă îndepărta de la Editorul vizual și fără a vă mai fi nevoie să vă faceți griji cu privire la utilizatorii de pe diferite dispozitive.



		
			
	   
	




Cod