Cum să schimbați dinamic lățimea și înălțimea oEmbed în WordPress

Doriți ca conținutul dvs. încorporat să arate perfect pe site-ul dvs. WordPress, indiferent de dimensiunea ecranului?

În mod implicit, WordPress face o treabă excelentă la încorporarea videoclipurilor și a altor oEmbed-uri în postările și paginile dvs. Cu toate acestea, pe baza experienței noastre, uneori aveți nevoie de mai mult control asupra dimensiunilor acestora.

Posibilitatea de a schimba dinamic lățimea și înălțimea embed-urilor este importantă pentru designul responsiv, asigurând că site-ul dvs. arată grozav pe telefoane, tablete și desktopuri. De asemenea, vă permite să ajustați fin aspectul conținutului dvs. pentru un aspect mai rafinat. 

În acest articol, vă vom arăta cum să schimbați dinamic lățimea și înălțimea oEmbed în WordPress.

De ce să setați lățimea și înălțimea oEmbed dinamică în WordPress

WordPress facilitează încorporarea conținutului terților în postările și paginile tale folosind o tehnologie numită oEmbed.

Acest lucru vă permite să încorporați cu ușurință videoclipuri YouTube, postări de pe Facebook, videoclipuri TikTok, tweet-uri și multe altele în WordPress. Partea cea mai bună este că acest conținut nu este găzduit pe site-ul dvs. WordPress, ceea ce economisește resursele serverului dvs. și îmbunătățește performanța WordPress.

În mod implicit, WordPress face o treabă excelentă în ajustarea automată a înălțimii și lățimii conținutului încorporat pentru a se potrivi postărilor și paginilor dvs.

Cu toate acestea, unii utilizatori ar putea dori să schimbe acest comportament implicit. De exemplu, ați putea dori să setați o lățime și o înălțime implicită diferită pentru pagina principală și articolele individuale.

Acest lucru este util atunci când utilizați un layout de pagină de pornire personalizat sau lucrați la propriul design de temă personalizată.

Acestea fiind spuse, să vedem cum să setăm cu ușurință lățimea și înălțimea dinamică pentru conținutul oEmbed în WordPress.

Vă vom arăta două metode diferite, puteți folosi linkurile rapide de mai jos pentru a sări direct la metoda care vă interesează.

• Metoda 1. Setarea lățimii și înălțimii dinamice a încorporărilor în WordPress
• Metoda 2. Utilizarea CSS pentru a seta lățimea și înălțimea dinamică a oEmbed

Metoda 1. Setarea lățimii și înălțimii dinamice a încorporărilor în WordPress

Această metodă necesită adăugarea de cod personalizat pe site-ul tău WordPress. Dacă nu ai mai făcut asta înainte, consultă ghidul nostru despre cum să copiezi fragmente de cod de pe web în WordPress cu ușurință.

Pentru această metodă, vom folosi etichetele condiționale WordPress pentru a detecta ce pagină WordPress este vizualizată și apoi vom schimba implicit lățimea și înălțimea oEmbed în consecință.

Pur și simplu adaugă următorul cod în fișierul functions.php al temei tale, un plugin specific site-ului sau un plugin pentru fragmente de cod.

//Custom oEmbed Size
function wpb_oembed_defaults($embed_size) {
if(is_front_page()) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

Recomandăm adăugarea acestui cod folosind WPCode, cel mai bun plugin pentru fragmente de cod WordPress. Este cea mai ușoară modalitate de a adăuga cod personalizat în WordPress fără a edita fișierul functions.php al temei.

Cu această metodă, nu trebuie să vă faceți griji cu privire la defectarea site-ului dvs. În plus, dacă schimbi tema WordPress, vei putea păstra toate personalizările tale.

Pentru a începe, trebuie să instalați și să activați pluginul gratuit WPCode. Pentru instrucțiuni pas cu pas, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Odată ce pluginul este activat, accesați pagina Code Snippets » + Add Snippet din tabloul de bord de administrare WordPress.

Apoi, găsiți opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat”.

Apoi, selectați „Fragment PHP” ca tip de cod din opțiunile care apar pe ecran.

După aceea, puteți adăuga un nume pentru fragmentul dvs. personalizat, care poate fi orice pentru a vă ajuta să vă amintiți la ce folosește codul.

Apoi, pur și simplu copiați și lipiți fragmentul de cod de mai sus în caseta „Previzualizare cod”.

Când acest lucru este gata, pur și simplu comutați comutatorul din partea de sus a ecranului de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvare fragment”.

Poți folosi oricare dintre etichetele condiționale WordPress disponibile pentru a detecta diferite scenarii.

Iată un alt exemplu în care modificăm lățimea implicită oEmbed pentru o pagină de destinație personalizată.

function wpb_oembed_defaults($embed_size) {
if( is_page( 42 ) ) {
        $embed_size['width'] = 940;
        $embed_size['height'] = 600;
}
else {
    $embed_size['width'] = 600;
        $embed_size['height'] = 338;
}
    return $embed_size;
}
add_filter('embed_defaults', 'wpb_oembed_defaults');

După cum puteți vedea, acest cod pur și simplu setează o lățime și o înălțime implicită diferită pentru un ID de pagină specific.

Metoda 2. Utilizarea CSS pentru a seta lățimea și înălțimea dinamică a oEmbed

WordPress adaugă automat clase CSS implicite în diferite zone ale site-ului dvs. web.

Aceste clase CSS pot fi apoi folosite pentru a schimba aspectul încorporărilor în zone specifice ale site-ului dvs. web.

De exemplu, puteți găsi clase CSS precum page-id, post-id, category, tag și multe altele în tema dvs. WordPress. Puteți afla aceste clase CSS folosind instrumentul Inspect.

Similar, WordPress adaugă și clase CSS blocurilor de încorporare din postările și paginile dvs. Din nou, veți folosi instrumentul Inspect pentru a găsi ce clase sunt utilizate de blocul de încorporare.

Odată ce aveți aceste clase CSS, le puteți folosi pentru a seta înălțimea și lățimea dinamică pentru oEmbed-uri. De exemplu, în următorul cod de eșantion, setăm lățimea și înălțimea dinamică pentru blocul de încorporare Pinterest pe un ID de postare specific.

article#post-79 .wp-block-embed-pinterest {
    max-width: 200px!important;
    max-height: 400px!important;
}

Puteți încerca codul CSS prin adăugarea de CSS personalizat în personalizatorul temei. Odată ce sunteți mulțumit, nu uitați să salvați și să publicați modificările.

Sperăm că aceste două metode v-au ajutat să învățați cum să setați cu ușurință lățimea și înălțimea dinamică oEmbed în WordPress. De asemenea, ați putea dori să vedeți aceste utile sfaturi, trucuri și hack-uri WordPress sau să consultați selecția noastră de cele mai bune plugin-uri pentru rețelele sociale pentru WordPress.

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.