WordPress face ușor crearea de pagini captivante, multimedia, prin încorporarea automată de conținut de la terți, cum ar fi videoclipuri YouTube și tweet-uri.
Cu toate acestea, după ce am lucrat îndeaproape cu utilizatorii WordPress timp de peste 15 ani, o lecție pe care am învățat-o este că oEmbed-urile pot cauza și probleme. Imaginați-vă un videoclip YouTube care depășește containerul său și împinge tot textul pe o parte, sau forțează butonul dvs. de apel la acțiune mai jos pe ecran.
Aici intervine setarea unei lățimi maxime pentru oEmbeds. Vă permite să preluați controlul și să vă asigurați că conținutul încorporat se potrivește perfect cu designul site-ului dvs.
În acest articol, vă vom arăta cum să setați lățimea maximă oEmbed în WordPress, astfel încât să aveți control complet asupra aspectului site-ului dvs.
De ce să remediați lățimea maximă oEmbed în WordPress?
WordPress suportă oEmbed, care vă permite să încorporați automat conținut de pe site-uri web terțe. De exemplu, puteți încorpora cu ușurință videoclipuri YouTube, prezentări SlideShare, tweet-uri și multe alte tipuri de conținut.
Acest conținut nu este găzduit pe serverul dvs., deci nu va încetini site-ul dvs. În special, ar trebui să utilizați întotdeauna tehnologii precum oEmbed și nu încărcați niciodată un videoclip pe WordPress.
Notă: Deși Facebook și Instagram au suportat oEmbed în trecut, Meta a renunțat între timp la suportul pentru oEmbed. Pentru instrucțiuni pas cu pas despre cum să reparați această funcționalitate, vă rugăm să consultați ghidul nostru despre cum să remediați problema oEmbed Facebook și Instagram în WordPress.
WordPress va încerca întotdeauna să ajusteze lățimea conținutului încorporat, astfel încât să se potrivească perfect spațiului disponibil. Cu toate acestea, uneori, conținutul încorporat poate fi prea lat și poate suprapune alte zone de conținut ale site-ului dvs.
Din păcate, nu puteți seta o lățime maximă pentru încorporările terțe folosind instrumentele încorporate din WordPress.
Acestea fiind spuse, să vedem cum puteți adăuga această funcționalitate lipsă și cum puteți seta o lățime maximă oEmbed în WordPress. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:
- Metoda 1: Utilizarea Shortcode-ului de Încorporare (Cel mai bun pentru videoclipuri YouTube)
- Metoda 2: Utilizarea blocurilor de încorporare încorporate WordPress (Ușor)
- Metoda 3: Utilizarea PHP personalizat (Setarea unei lățimi maxime pentru toate încorporările)
- Metoda 4: Utilizarea CSS (Setarea lățimii maxime pentru tipuri specifice de încorporări)
- Sfat bonus: Cum să adăugați cu ușurință fluxurile dvs. de social media în WordPress
Metoda 1: Utilizarea Shortcode-ului de Încorporare (Cel mai bun pentru videoclipuri YouTube)
Puteți seta o lățime maximă folosind un shortcode. Această metodă este ușoară, în special dacă doriți să setați lățimea maximă doar pentru un număr mic de postări. Am constatat, de asemenea, că această metodă funcționează bine pentru încorporarea videoclipurilor în postările de blog WordPress.
Cu toate acestea, shortcode-ul embed și parametrii săi de lățime și înălțime nu funcționează pentru toți furnizorii oEmbed. De exemplu, nu îl puteți utiliza pentru a seta înălțimea și lățimea unui embed Giphy în WordPress. În acest caz, puteți încerca una dintre celelalte metode menționate mai jos.
În loc să copiați URL-ul în editorul de postări, va trebui să creați un bloc shortcode. Puteți apoi adăuga parametri de lățime și înălțime la codul de încorporare.
De exemplu, trebuie doar să încadrați următorul text în etichete embed:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Pur și simplu schimbați valorile lățimii și înălțimii pentru a se potrivi nevoilor dvs. și înlocuiți URL-ul cu conținutul pe care doriți să îl încorporați.
Când sunteți mulțumit de pagină, faceți clic pe „Actualizare” sau „Publicare”.
Conținutul încorporat ar trebui acum să se potrivească perfect în spațiul disponibil.
Metoda 2: Utilizarea blocurilor de încorporare încorporate WordPress (Ușor)
Editorul de blocuri WordPress vine cu mai multe blocuri de încorporare pentru diferite servicii oEmbed, cum ar fi blocuri pentru Twitter, livestream-uri YouTube și videoclipuri, și încorporări SoundCloud.
Unele dintre aceste blocuri vă permit să schimbați alinierea încorporării și să setați conținutul la „Lățime mare” sau „Lățime completă”.
Dacă alegeți lățime completă, atunci blocul de încorporare și conținutul încorporat vor ocupa întreaga lățime a ecranului. Dacă alegeți lățime mare, atunci blocul de încorporare va ocupa întreaga lățime, dar conținutul va rămâne la aceeași dimensiune.
Rezultatul final poate varia în funcție de tema dvs. WordPress. Cu toate acestea, aceasta este o metodă rapidă și ușoară, deci merită să vedeți dacă funcționează pentru site-ul dvs. WordPress.
Pur și simplu faceți clic pe butonul „Aliniere” din bara de instrumente mică de deasupra blocului. Apoi, selectați fie „Lățime mare”, fie „Lățime completă”.
Dacă acest lucru rezolvă problema lățimii maxime pentru încorporare, atunci puteți continua și publica pagina. Dacă nu sunteți mulțumit de cum arată, va trebui să încercați o altă metodă.
Metoda 3: Utilizarea PHP personalizat (Setarea unei lățimi maxime pentru toate încorporările)
Uneori, este posibil să doriți să setați o lățime maximă pentru tot conținutul încorporat. Cel mai simplu mod de a face acest lucru este prin adăugarea de cod personalizat pe site-ul dvs. WordPress.
Problema cu această metodă este că atributul de lățime maximă va funcționa doar dacă conținutul încorporat nu are deja o „lățime” definită. Dacă codul de încorporare include deja propriul atribut „lățime”, atunci această metodă s-ar putea să nu funcționeze.
Dacă nu ați editat niciodată codul site-ului dvs., atunci aruncați o privire la ghidul nostru despre cum să adăugați cu ușurință fragmente de cod personalizate în WordPress.
Unele ghiduri vă cer să editați manual fișierele temei, dar acest lucru poate cauza tot felul de erori și poate chiar să vă distrugă complet site-ul web.
Din acest motiv, recomandăm utilizarea WPCode. Acesta facilitează adăugarea de fragmente de cod în WordPress fără a fi nevoie să editați fișierele temei dvs. Astfel, puteți actualiza sau schimba tema fără a pierde toate funcțiile de cod personalizat.
WPCode vine, de asemenea, cu o bibliotecă de fragmente de cod preconfigurate, care include un fragment „Set oEmbed Max Width”. Acesta vă permite să specificați o lățime și o înălțime maximă pentru oEmbed-urile dvs.
Mai întâi, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru mai multe informații, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
După activare, navigați la Snippete de cod » Bibliotecă în panoul de administrare WordPress.
Aici, puteți căuta „Set oEmbed Max Width” și puteți plasa cursorul mouse-ului peste rezultatul cu același nume.
Apoi puteți face clic pe „Utilizați fragmentul”.
WPCode vă va duce apoi la pagina „Editare fragment”, unde pluginul a configurat deja totul pentru dvs.
Aici, veți observa următorul fragment de cod gata făcut:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Implicit, aceasta setează lățimea maximă la „400” și înălțimea maximă la „280”. Nu uitați să ajustați atributele de înălțime și lățime pentru a se potrivi nevoilor dvs.
În cele din urmă, faceți clic pe glisorul „Inactiv” pentru ca acesta să afișeze „Activ”. Apoi, pur și simplu faceți clic pe butonul „Salvare fragment” sau „Actualizare” pentru a face fragmentul de cod să fie activ.
Metoda 4: Utilizarea CSS (Setarea lățimii maxime pentru tipuri specifice de încorporări)
În mod implicit, WordPress adaugă automat clase CSS în diferite zone ale site-ului dvs.
De asemenea, adaugă mai multe clase CSS blocurilor de încorporare. Puteți utiliza aceste clase CSS pentru a seta o lățime maximă pentru încorporări pe blogul dvs. WordPress.
Aceasta este o alegere bună dacă doriți să setați o dimensiune maximă pentru un anumit tip de încorporare, cum ar fi tweet-uri încorporate. De asemenea, vă permite să creați o dimensiune maximă pentru tot conținutul încorporat, indiferent de tip.
Pentru a afla ce clase CSS trebuie să vizați, pur și simplu încorporați conținut într-o postare sau pagină și apoi previzualizați-l în browserul dvs.
Apoi, plasați cursorul mouse-ului peste conținutul încorporat și faceți clic dreapta. În meniul care apare, selectați instrumentul „Inspect”.
Aceasta deschide un panou nou care afișează toate clasele CSS pe care WordPress le-a adăugat conținutului încorporat. Puteți utiliza aceste clase pentru a seta o lățime maximă pentru acest tip de încorporare.
Pentru a viza un anumit furnizor oEmbed, veți folosi de obicei .wp-block-providername, așa că căutați această clasă în panou.
De exemplu, în imaginea următoare, am subliniat clasa .wp-block-embed-providername . Pe această linie, putem vedea și clasa .wp-block-embed-pinterest.
Puteți seta o lățime maximă doar pentru încorporările Pinterest utilizând clasa .wp-block-embed-pinterest.
De exemplu:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Doar fiți conștient că s-ar putea să fie nevoie să înlocuiți .wp-block-embed-pinterest cu o clasă CSS diferită, în funcție de conținutul pe care doriți să-l vizați.
Dacă doriți să setați o lățime maximă pentru toate încorporările, puteți utiliza următorul fragment de cod:
.wp-block-embed {
max-width: 900px!important;
}
Cel mai simplu mod de a adăuga CSS personalizat pe site-ul dvs. web este prin utilizarea WPCode. Pur și simplu creați un nou fragment personalizat urmând același proces descris mai sus.
Cu toate acestea, de data aceasta deschideți meniul derulant „Tip cod” și selectați „Fragment CSS”.
Puteți salva și publica acum acest fragment de cod exact în același mod în care faceți ca orice fragment de cod WPCode să fie activ.
Cu asta făcut, WordPress va folosi această valoare ca dimensiune maximă pentru încorporările dvs.
Sfat bonus: Cum să adăugați cu ușurință fluxurile dvs. de social media în WordPress
Dacă încorporați în mod regulat conținut de pe platforme de social media, atunci puteți economisi mult timp și efort utilizând Smash Balloon.
Smash Balloon este cel mai bun plugin de social media pentru WordPress și vă permite să adăugați cu ușurință fluxurile dvs. de social media pe un site WordPress.
Suportă toate încorporările populare de pe rețelele sociale, inclusiv videoclipuri YouTube, Twitter, Instagram și videoclipuri TikTok.
Mai important, Smash Balloon este responsiv la mobil și funcționează cu orice temă WordPress, astfel încât conținutul dvs. încorporat va arăta întotdeauna grozav.
Sperăm că acest articol v-a ajutat să învățați cum să setați o lățime maximă oEmbed în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să încorporați ușor codul iFrame în WordPress, sau comparația noastră expertă a celui mai bun software de chat live pentru afaceri mici.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Andreu
Problema este că aceasta face ca lățimea maximă a imaginilor să fie și ea la dimensiunea definită. Ce pot face dacă vreau să limitez lățimea de încorporare în editor, dar nu pe cea a imaginii? Mulțumesc
Joe Daniel
Mulțumesc. M-am chinuit cu asta săptămâni întregi… funcționează pentru WP 4.0 cu tema Genesis
digg
Bună, funcționează perfect pentru mine.
Dar acest lucru afectează întregul site, care are lățimi diferite, deoarece există pagini pe toată lățimea, cu bare laterale sau forumuri etc.
Este posibil să discriminați acest lucru pentru a afecta doar paginile forumului bbpress?
Va fi foarte util, mulțumesc!
Ajit Kumar
Pentru oricine nu reușește să facă acest lucru să funcționeze sau dacă videoclipurile YouTube și alt conținut iframe nu sunt redimensionate, va trebui să adăugați următorul cod la fișierul dvs. style.css
/* Asigură-te că embed-urile și iframes se potrivesc în containerele lor */
embed,
iframe,
object {
max-width: 100%;
}
Sper că acest lucru ajută. Și Syed, mulțumesc pentru postarea excelentă!
Waymond
Mulțumesc pentru postarea soluției!
Abhishek Sachan
nu funcționează
Dj
MULȚUMESC! Mă înnebunea asta.
Anto (@imanto)
Nu puteți folosi iframe, object, embed { max-width: 100%; height:auto;} da, obține lățimea corectă și face videoclipul responsiv, dar nu rezolvă înălțimea atunci când este vizualizat în browser.
Există de fapt o modalitate de a face acest lucru? Am încercat cam tot, nici măcar fitvids nu funcționează deoarece setezi o lățime de bază px în funcții, dar aceasta afișează lățimea pe mobil, apoi când încerci să corectezi asta cu max-width, înălțimea se strică chiar și în browser.
Mă gândesc la media queries sau ceva de genul? Uf, sunt epuizat.
Amir
Funcționează perfect, mulțumesc mult!
Pierre Dickinson
Salut, mulțumesc pentru sfat, dar nu funcționează, iată ce aveți nevoie în fișierul dvs. function.php:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // sau orice altă valoare doriți
$defaults[‘height’]=360; // sau orice altă valoare doriți
return $defaults;
}
funcționează excelent!
Cu stimă,
Filip Kojic
Acest cod nu funcționează bine. Am pus numele temei mele și tema doar blochează.
Valerie
Nu sunt sigur dacă celălalt comentator a realizat, dar codul are ghilimele curbate și ar strica un site. Voi testa aici pentru a vedea dacă wrapper-ele de shortcode vor preveni schimbarea care a stricat codul...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Încerc să postez un film de animație de înaltă calitate de pe YouTube pe blogul meu WordPress. Partea de jos a cadrului este tăiată în previzualizare. Odată ce săgeata de redare este apăsată, această problemă dispare. Dar cineastul este pe bună dreptate nemulțumit că previzualizarea din postare va da aparența unei erori. Ajustarea înălțimii și lățimii în codul postării funcționează, dar nu rezolvă problema. Idei?
Colin
A funcționat perfect – mulțumesc!
Ryan Silver
Salut,
Am folosit soluția dvs. pentru lățime și a funcționat grozav. Dar cum setez acum înălțimea? Este la fel dacă ( ! isset( $content_width ) ) $content_width = 560; dar cu cuvântul „width” înlocuit cu cuvântul „height”? Am încercat asta și nu a funcționat…
Personal editorial
Înălțimea este determinată automat pentru a se potrivi raportului 16:9.
Admin
FIlip Kojic
Se pare că este 16:10. Iată un exemplu:
How can I change height. Please someone answer.
Jasmine Ham
Super, funcționează! dar ce fac dacă am nevoie să fie responsive?
Ai vreo idee cum să fac asta?
josef
salut,
există o modalitate de a forța toate iframes-urile de pe site să fie 100% lățime. nu doar youtube
am aproximativ 300 de iframes și toate de dimensiune fixă, deci… mulțumesc anticipat
Josef
josef
Salut,
există o modalitate de a forța toate iframes-urile de pe site să aibă o lățime de 100%. Nu doar YouTube.
Am aproximativ 300 de iframes și toate au dimensiuni fixe, deci...
Ryan
Am adăugat acest cod la functions.php, dar nu a făcut nicio diferență și presupun că acest lucru se datorează faptului că tema mea nu definește $content_width.
Văd linkul către codex despre definirea acestuia, dar nu sunt dezvoltator și nu am unul la dispoziție; cum adaugă cineva o definiție $content_width la o temă? Unde merge? Mulțumesc!
Justin Germino
Acest lucru a funcționat perfect, există vreo modalitate de a forța și de a seta implicit calitatea video la HD în loc de SD, care pare să fie implicită, chiar dacă în setările mele YouTube am setat-o să fie implicit HD?
Personal editorial
Care este lățimea dvs. maximă? Am citit în trecut că Youtube ajustează calitatea în funcție de lățimea iframe-ului.
Admin
Grant Norwood
Vă rugăm să rețineți că variabila $content_width trebuie declarată ca globală înainte ca această remediere să funcționeze.
Nigel Parry
WP pare să fie actualizat de oameni care nu înțeleg centralitatea multimedia pe Internet. De ce această preferință de bază ar necesita intervenție prin cod, nu știu. WP clar nu putea să-mi spună cât de late erau coloanele mele. Oricum, totul este rezolvat acum. Voi sunteți grozavi.
Personal editorial
Ei bine Nigel, este mai mult decât atât. Ei încearcă să facă WordPress mai ușor de utilizat pentru „utilizatori”. În timp, WordPress a adăugat o opțiune după alta. Acest lucru devine cu adevărat înfricoșător pentru utilizatorii noi. Acesta este motivul pentru care merg pe ruta decizii peste opțiuni. Speranța cu această lățime maximă oEmbed este că fiecare designer de temă ar trebui/va defini acest lucru în temele lor, astfel încât utilizatorul final să nu fie nevoit să-și facă griji cu privire la el.
Admin
Alex Leonard
Mulțumesc! Eram puțin nedumerit cu privire la unde dispăruse setarea de încorporare media!
Azad
Bună ziua
Mulțumesc pentru postarea ta.
Dar nu reușesc să fac asta corect, am scris și celălalt post pe care l-ai menționat în comentarii. Dar tot nu reușesc să-l fac să funcționeze, am pus asta:
La începutul fișierului functions.php, dar apoi întregul meu site a încetat să mai funcționeze. Totul a devenit alb, a trebuit să editez fișierul prin ftp pentru a-l face să funcționeze din nou.
Ce fac greșit?
Mulțumesc!
Azad
Hey
I got it working, thanks!
Monica
Salut, unde în fișierul functions.php ar trebui plasat acest cod?
Personal editorial
Îl puteți lipi la început sau la sfârșit, atâta timp cât este independent de alte funcții. Iată un articol despre asta:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Jesse Garnier
Ce valoare ar fi potrivită pentru $content_width pentru un design cu lățime variabilă sau responsiv?
Personal editorial
Pentru design responsiv, probabil doriți să folosiți fitvid.js sau ceva similar pentru a redimensiona videoclipurile dvs.
Admin
Paul Lumsdaine
Am reușit să obțin un fel de responsivitate lucrând cu setarea unei lățimi maxime: 100% pe iframes-urile mele în CSS. Desigur, înălțimea este setată automat în funcție de lățimea conținutului dvs., dar acest lucru ar trebui cel puțin să îl facă să funcționeze corect fără a folosi JavaScript suplimentar. Fitvid este soluția, dar asta a funcționat pentru mine.
Jeremy Myers
Paul,
Poți include CSS-ul pe care l-ai folosit pentru a seta lățimea iframe-ului la 100%?
Roman
Folosesc acest cod CSS pentru design responsiv:
iframe, object, embed { max-width: 100%; } (dacă doriți, puteți adăuga -> height: auto)
Tevya
Din păcate, CSS-ul lui Roman fie nu funcționează pe unele teme, fie nu funcționează cu noul player media WP 3.6 încorporat în nucleu. Tocmai l-am încercat și nimic. Încerc să obțin o temă responsivă care să păstreze și noul player WP 3.6 responsiv, dar fără succes până acum. Tema 2012 pare să o gestioneze foarte bine, dar nu pot să-mi dau seama ce fac diferit față de tema cu care lucrez.
Melanie
Sunt un novice în WP & codare, având în vedere acest lucru, nu sunt sigur unde să pun codul „if ( ! isset( $content_width ) ) $content_width = 600;”. Am mers la fișierul function.php din tema mea Suffusion și nu sunt sigur unde exact să inserez acest cod. Am încercat în mai multe locuri unde menționa atașamentul video și nu funcționează. În cazul meu, videoclipurile încorporate sunt acum prea mari pentru tema mea, după ce am făcut upgrade la WP 3.5.
Personal editorial
Schimbați numărul 600 pentru a se potrivi cu dimensiunea temei dvs. Dacă este prea mare pentru tema dvs., atunci faceți-o mai mică.
Admin
Jessi Linh
A fost lansat la momentul potrivit!!! Numele „Elvin” este, de asemenea, atât de special.
Mulțumesc pentru postarea ta.
Edward Caissie
Aceasta este o parte din motivul pentru care setarea unei valori adecvate $content_width este o cerință conform ghidurilor de revizuire a temelor WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Personal editorial
Da, sunt total de acord cu tine. Doar temele prost codificate nu vor avea asta. Dar există multe dintre ele. O temă pe care o folosea unul dintre clienții noștri avea acea piesă lipsă. În general, este o temă bună.
Admin
Devin
Moment perfect. Mulțumesc!