Cum să încorporați iFrame în WordPress

Partajarea de conținut online este o practică comună. S-ar putea să fii nedumerit, totuși, când încerci să-ți dai seama cum să încorporezi anumite tipuri de conținut. Partajarea fișierelor mari sau a elementelor specifice de pe alte site-uri web poate fi uneori o provocare.

Din fericire, există o practică de design web destul de simplă pe care o poți folosi pentru a afișa anumite tipuri de conținut pe site-ul tău WordPress. Folosirea HTML pentru a crea cadre inline (iFrames) poate simplifica partajarea online a imaginilor, videoclipurilor și altor conținut media.

În acest articol, vom explora diferitele utilizări ale iFrame-urilor pe un site web. De asemenea, vom parcurge pașii pentru crearea iFrame-urilor, atât manual, cât și cu un plugin. Să începem!

Utilizări iFrame

Când utilizați un iFrame, în esență creați un mic portal pe site-ul dvs. care permite vizualizarea conținutului din altă parte. Acest lucru poate fi util în mai multe scenarii.

Utilizarea unui iFrame înseamnă că nu trebuie să găzduiți efectiv fișierele pe care doriți să le afișați. Conținutul rămâne în locația sa inițială și poate fi vizualizat prin cadrul de pe site-ul dvs. Un mod în care această tehnică poate fi utilă este atunci când doriți să afișați fișiere mari. Un iFrame poate aduce acel conținut pe site-ul tău web fără a-i încetini viteza de încărcare.

Este demn de remarcat faptul că iFrame-urile sunt singurul tip de cadru permis în HTML5. Există o varietate de tipuri diferite de conținut pe care le puteți folosi pentru a le afișa, inclusiv:

• Imagini: puteți utiliza iFrames pentru a afișa imagini de înaltă calitate dintr-o galerie exterioară și pentru a evita compromiterea din cauza dimensiunii fișierului.
• Videoclipuri: Găzduirea videoclipurilor pe o platformă precum YouTube sau Vimeo și utilizarea unui iFrame pentru a le plasa pe site-ul dvs. web poate îmbunătăți experiența utilizatorului, eliberând în același timp spațiu de stocare pe site.
• Alt conținut web: evidențierea conținutului de pe alte site-uri web, cum ar fi pagini de portofoliu sau rețete, poate aduce cu ușurință conținut bogat publicului dvs.

Când utilizați iFrames, puteți evita și regulile complicate privind drepturile de autor. Mai multe instanțe au decis că utilizarea unui iFrame pentru a afișa materiale protejate prin drepturi de autor nu constituie o încălcare a drepturilor de autor în toate cazurile.

Un site web poate include, de asemenea, scripturi pentru a preveni includerea conținutului său într-un iFrame. Cu toate acestea, vă recomandăm să creditați întotdeauna creatorul inițial al oricărui conținut pe care îl utilizați sau să solicitați consiliere juridică dacă nu sunteți sigur cum să procedați.

Utilizarea iFrame cu un plugin

Una dintre cele mai ușoare moduri de a folosi iFrame pe un site web WordPress este utilizarea unui plugin iFrame. Din fericire, există mai multe opțiuni foarte apreciate din care să alegeți.

Pasul 1: Descărcați și configurați un plugin iFrame

Pentru exemplul nostru, vom folosi pluginul Advanced iFrame. Este flexibil, simplu de utilizat și foarte bine evaluat:

După instalarea și activarea pluginului, veți găsi un nou element de meniu Advanced iFrames în tabloul de bord WordPress. Advanced iFrame are un set destul de extins de opțiuni. Veți dori să începeți cu fila Opțiuni și să examinați videoclipul „Pornire rapidă”:

Apoi, puteți derula în jos și examina unele dintre opțiunile pluginului. Toate acestea sunt configurate cu o mulțime de explicații utile și opțiuni ușor de selectat:

Advanced iFrames oferă, de asemenea, un verificator iFrame gratuit, care va verifica orice adresă URL pe care o furnizați pentru a vedea dacă conține scripturi care împiedică includerea conținutului într-un iFrame. Este o idee bună să rulați orice adresă URL prin acest instrument înainte de a o utiliza într-un iFrame pe site-ul dvs. web.

Veți dori să examinați și fila Setări de bază . Acolo, puteți personaliza elemente ale iFrame-ului, cum ar fi înălțimea, lățimea și chenarele cadrului:

După ce ați configurat setările pluginului pentru a vă satisface nevoile, puteți începe să utilizați iFrames pe site-ul dvs. web.

Pasul 2: Utilizați Blocul iFrame avansat

În Editorul de blocuri WordPress, veți avea acum un bloc iFrames avansat disponibil pentru utilizare:

Dacă întâmpinați probleme în a găsi acest bloc prima dată când doriți să-l utilizați, acesta va fi în categoria Widgeturi .

După ce faceți clic pe blocul Advanced iFrame , acesta se va încărca automat cu conținut de pe site-ul web al creatorului pluginului. Puteți configura blocarea utilizând opțiunile Blocare din partea dreaptă a paginii:

Acolo, puteți adăuga adresa URL a conținutului pe care doriți să apară în iFrame. De asemenea, veți putea suprascrie unele dintre setările pluginului dacă este necesar.

Pasul 3: previzualizați site-ul dvs

Dacă v-ați testat adresa URL cu verificatorul iFrame, ar trebui să fiți gata. Totuși, cel mai bine este întotdeauna să previzualizați modificările înainte de a vă publica conținutul. Ar trebui să vedeți o previzualizare live a iFrame-ului pe măsură ce îl editați și faceți modificări.

De asemenea, puteți utiliza opțiunea Previzualizare din colțul din dreapta sus al ferestrei de editare, pentru a vizualiza postarea în contextul meniurilor și barelor laterale ale site-ului dvs.

Utilizarea iFrame-urilor fără un plugin

Dacă nu doriți să lucrați cu un plugin, dar tot doriți să utilizați iFrames, aveți noroc! Puteți aplica manual codul postărilor și paginilor dvs. pentru a include conținut iFramed.

Pasul 1: Introduceți un cod de încorporare

Dacă doriți să încorporați conținut, cum ar fi un videoclip de pe YouTube, pe site-ul dvs. web, va trebui să găsiți codul de încorporare oferit de YouTube. Puteți găsi acest lucru sub un videoclip făcând clic pe Partajare .

Aceasta va afișa un meniu de opțiuni de partajare. Veți dori să selectați Încorporați pentru a obține codul de care aveți nevoie pentru iFrame.

Se va deschide o fereastră separată cu o previzualizare a modului în care va arăta conținutul încorporat. Veți putea apoi să copiați un fragment de cod iFrame.

De asemenea, puteți bifa caseta Începe la dacă doriți ca spectatorii să înceapă automat să vizualizeze conținutul la un anumit cod de timp.

Apoi, veți reveni la postarea dvs. WordPress și veți adăuga blocul HTML personalizat . Puteți găsi acest lucru în categoria Formatare .

După ce adăugați acest bloc în postarea dvs., puteți pur și simplu să inserați codul de încorporare pe care l-ați copiat de pe pagina YouTube.

Apoi, veți dori să vă asigurați că încorporarea funcționează corect și arată așa cum doriți. Puteți face clic pe Previzualizare în blocul HTML personalizat pentru a vedea dacă iFrame funcționează.

Cu asta, ați plasat cu succes un iFrame pe site-ul dvs. web. Același proces va funcționa pentru orice platformă care vă oferă coduri de încorporare.

Pasul 2: Personalizați-vă cadrele iFrame

Dacă încă nu sunteți mulțumit de modul în care iFrame este afișat în postarea sau pagina dvs., puteți ajusta manual unele dintre valorile din cod. Este recomandat să utilizați Cascading Style Sheets (CSS) pentru a personaliza complet modul în care apar iFrame-urile pe site-ul dvs. web.

Eticheta iFrame permite o serie de proprietăți personalizate. Cu toate acestea, este important să rețineți că multe dintre acestea nu mai sunt acceptate de HTML5. Probabil că va trebui să investigați CSS-ul temei, așa cum am menționat anterior, deoarece este posibil să nu puteți suprascrie anumite formatări direct în blocul HTML personalizat .

Pasul 3: Verificați-vă în mod regulat conținutul iFrame

Când utilizați iFrames, veți dori să verificați în mod regulat conținutul încadrat. Deoarece deschideți o fereastră către conținut pe care este posibil să nu aveți niciun control editorial sau al calității, ar putea cauza oricând o problemă pe site-ul dvs. web.

De exemplu, dacă videoclipul pe care l-am folosit în exemplul nostru este scos de pe canalul său YouTube, postarea noastră ar avea un player defect. Acest lucru este puțin mai evident decât un link rupt, deoarece va lăsa un impact vizual asupra site-ului dvs. Verificarea periodică a conținutului iFrame vă permite să schimbați sau să eliminați orice conținut media care nu mai funcționează.

Optimizați-vă site-ul cu WP Engine

Utilizarea iFrame-urilor pe site-ul dvs. poate menține lucrurile să funcționeze fără probleme, încorporând în același timp conținut media îmbogățit și conținut dinamic. Aici, la WP Engine, cunoaștem importanța înțelegerii conceptelor importante de design web și a avea acces la cele mai bune resurse pentru dezvoltatori.

În plus, ne angajăm să vă ajutăm să oferiți cele mai bune experiențe digitale clienților dvs. Avem o selecție diversă de planuri de găzduire WordPress complet gestionate, astfel încât să vă puteți concentra pe proiectarea de site-uri web frumoase!