Cum să adăugați videoclipuri HTML5 la WordPress folosind câmpuri personalizate

În general, dacă întrebi 10 dezvoltatori WordPress cum să facă ceva, vei primi zece răspunsuri diferite. Dar asta vorbește atât despre versatilitatea CMS-ului, cât și despre faptul că există mai multe soluții pentru orice sarcină dată.

Recent, m-am confruntat cu provocarea de a configura un videoclip HTML5 în interiorul unei pagini WordPress. Este într-o locație statică și ar trebui înlocuită din când în când. Deși este bine să folosești Video Shortcode, în acest caz am vrut să simplific lucrurile mai mult pentru cei care ar actualiza pagina. Nu am vrut ca ei să învețe ce este un Shortcode sau cum să-l folosească.

Deci, cea mai simplă soluție (în mintea mea, oricum) a fost să creez niște câmpuri personalizate în care să poată fi încărcate fișierele video aferente. De acolo, șablonul temei va crea automat codul necesar pentru afișarea videoclipului. Iată cum am făcut-o:

Cerințe ale proiectului

Desigur, veți avea nevoie de un site WordPress și de acces pentru a vă edita tema (vă rugăm să utilizați o temă copil dacă nu faceți deja acest lucru). O oarecare familiaritate cu PHP și HTML va fi, de asemenea, de mare ajutor. Dincolo de asta, ar trebui să ai:

• O modalitate de a crea câmpuri personalizate. Versiunea gratuită a Advanced Custom Fields (ACF) va face treaba destul de bine. Instalează-l și activează-l pe site-ul tău WordPress.
• Un videoclip – ideal în mai multe formate. Deși fișierele MP4 sunt acum acceptate în toate browserele majore, ar putea să nu fie o idee rea să furnizați o versiune WEBM pentru o acoperire suplimentară. Și, în timp ce sunteți la asta, o rezervă FLV pentru cei care folosesc browsere cu adevărat vechi nu ar putea strica. Veți dori să vă asigurați că fiecare versiune a videoclipului dvs. este setată la aceeași rezoluție.
• O imagine „afiș”. Fie o captură de ecran, fie o grafică personalizată realizată la cea mai înaltă rezoluție la care va fi redat videoclipul dvs.

Pasul 1: Creați câmpurile personalizate

După ce ați instalat și activat versiunea gratuită a ACF, accesați meniul Câmpuri personalizate din WordPress și apoi faceți clic pe Adăugare nou.

În noul set de câmpuri (ale noastre se numesc „Câmpuri video”), va trebui să creați un câmp Fișier ACF pentru fiecare format video pe care intenționați să îl încărcați, plus altul pentru imaginea afișului. În configurația noastră, avem câmpuri pentru MP4, WEBM, FLV și un Poster. Pentru fiecare câmp de fișier, asigurați-vă că selectați butonul radio din Return Value care spune „File URL”. De asemenea, asigurați-vă că notați numele câmpurilor – vom avea nevoie de acestea mai târziu.

Apoi, în setarea „Locație” ACF, atribuiți noile câmpuri oricărei pagini sau postări doriți și salvați-vă munca. Când mergeți să editați pagina alocată, ar trebui să vedeți câmpurile (poate fi necesar să derulați puțin în jos pentru a le găsi).

Pasul 2: Încărcați fișiere video

Navigați pentru a edita pagina sau postarea în care ați atribuit noile câmpuri personalizate. De acolo, este o chestiune de încărcare a fișierelor corecte. După ce ați încărcat fișierele necesare, salvați pagina/postarea.

Pasul 3: Editați șablonul

Acum vine partea distractivă – adăugarea unei magie PHP la șablonul temei tale. Dacă nu sunteți familiarizat cu ierarhia șabloanelor WordPress, acum poate fi un moment bun pentru a studia.

Găsiți fișierul șablon corect și locația în care doriți să plasați videoclipul. Apoi, copiați și inserați următorul fragment de cod și personalizați-l pentru a se potrivi nevoilor dvs.:

 <?php
// Obțineți câmpurile video
$video_mp4 = get_field('mp4_video'); // Nume câmp MP4
$video_webm = get_field('webm_video'); // Nume câmp WEBM
$video_flv = get_field('flv_video'); // Nume câmp FLV
$video_poster = get_field('imagine_poster'); // Nume câmp imagine poster
                

// Construiți codul scurt
$attr = matrice(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'preload' => 'automat'
);

// Afișează codul scurt
echo wp_video_shortcode($attr);
?>

Prima secțiune a codului face referire la numele câmpurilor personalizate pe care le-am creat la Pasul 1. Creăm o variabilă PHP pentru fiecare câmp (acestea vor scoate URL-ul fișierului respectiv), pe care va trebui să o folosim în mijloc. secțiunea de cod.

În acea secțiune din mijloc, avem o serie de atribute pentru funcția wp_video_shortcode . Observați că există un atribut pentru fiecare tip de fișier. De asemenea, alegem să preîncărcăm videoclipul, dar acest lucru este complet opțional. Aici puteți seta, de asemenea, lățimea, înălțimea, bucla și chiar (gasp) redarea automată a videoclipului, dacă doriți.

Secțiunea de jos a codului prezintă rezultatul muncii noastre în șablonul nostru.

După ce ați configurat totul în mod satisfăcător, veți dori să salvați șablonul și să-l încărcați pe site-ul dvs. web (sau pur și simplu salvați dacă utilizați editorul de teme WordPress încorporat). Apoi, verificați-vă pagina pe partea frontală pentru a vă asigura că videoclipul este afișat corect.

WordPress are un player video HTML5 integrat chiar în CMS, iar playerul implicit arată și funcționează destul de bine. Dar puteți stila diferite opțiuni dacă doriți să îi oferiți o notă mai personală. Inspectați codul de ieșire cu instrumentele de dezvoltare ale browserului dvs. și notați diferitele clase CSS. De exemplu, elementul container are o clasă .wp-video . De asemenea, poate doriți să aruncați o privire la un tutorial pentru o privire mai aprofundată asupra posibilităților.

Câmpurile personalizate simplifică procesul

Utilizarea câmpurilor personalizate poate aduce o mulțime de noi funcționalități și posibilități de design pentru WordPress. Dar un element de bază al minunatului lor este că pot face gestionarea conținutului mai ușoară. Indiferent de cine va adăuga și edita conținut, câmpurile personalizate pot simplifica întregul proces. Acest lucru ne avantajează pe toți, dar este deosebit de plăcut pentru utilizatorii care nu sunt dezvoltatori experți.

Adăugarea unor funcționalități simple, cum ar fi câmpurile video HTML5 de mai sus, poate reduce foarte mult curba de învățare cu care se confruntă un nou utilizator. În loc să fie nevoiți să se gândească la ceea ce ar trebui să facă, acum a devenit o chestiune de încărcare a câteva fișiere.

În cele din urmă, acel pic de muncă suplimentară din față poate economisi tuturor timp și dureri de cap pentru viața site-ului.