WordPress rende facile creare pagine coinvolgenti e multimediali incorporando automaticamente contenuti di terze parti come video di YouTube e Tweet.
Tuttavia, dopo aver lavorato a stretto contatto con gli utenti di WordPress negli ultimi 15 anni, una lezione che abbiamo imparato è che gli oEmbed possono anche causare problemi. Immagina un video di YouTube che trabocca dal suo contenitore e spinge tutto il tuo testo di lato, o forza il tuo pulsante di invito all'azione più in basso sullo schermo.
È qui che entra in gioco l'impostazione di una larghezza massima per gli oEmbed. Ti consente di prendere il controllo e garantire che i tuoi contenuti incorporati si adattino perfettamente al design del tuo sito web.
In questo articolo, ti mostreremo come impostare la larghezza massima degli oEmbed in WordPress in modo da avere il controllo completo sul layout del tuo sito.
Perché correggere la larghezza massima degli oEmbed in WordPress?
WordPress supporta oEmbed, che ti consente di incorporare automaticamente contenuti da siti Web di terze parti. Ad esempio, puoi facilmente incorporare video di YouTube, presentazioni SlideShare, tweet e molti altri tipi di contenuti.
Questi contenuti non sono ospitati sul tuo server, quindi non rallenteranno il tuo sito Web. In particolare, dovresti sempre utilizzare tecnologie come oEmbed e non caricare mai un video su WordPress.
Nota: Sebbene Facebook e Instagram supportassero in passato oEmbed, Meta ha da allora interrotto il supporto per oEmbed. Per istruzioni dettagliate su come risolvere questo problema, consulta la nostra guida su come risolvere il problema oEmbed di Facebook e Instagram in WordPress.
WordPress tenterà sempre di adattare la larghezza dei contenuti incorporati in modo che si adattino perfettamente allo spazio disponibile. Tuttavia, a volte il contenuto incorporato potrebbe essere troppo largo e sovrapporsi ad altre aree di contenuto del tuo sito web.
Sfortunatamente, non è possibile impostare una larghezza massima per gli embed di terze parti utilizzando gli strumenti integrati di WordPress.
Detto questo, vediamo come puoi aggiungere questa funzionalità mancante e impostare una larghezza massima oEmbed in WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:
- Metodo 1: Utilizzo dello Shortcode Embed (Ideale per video di YouTube)
- Metodo 2: Utilizzo dei Blocchi di Incorporamento integrati di WordPress (Facile)
- Metodo 3: Utilizzo di PHP personalizzato (Imposta una larghezza massima per tutti gli embed)
- Metodo 4: Utilizzo di CSS (Imposta la larghezza massima per tipi specifici di embed)
- Suggerimento bonus: Come aggiungere facilmente i tuoi feed dei social media a WordPress
Metodo 1: Utilizzo dello Shortcode Embed (Ideale per video di YouTube)
Puoi impostare una larghezza massima utilizzando uno shortcode. Questo metodo è facile, soprattutto se desideri impostare la larghezza massima solo per un piccolo numero di post. Abbiamo anche scoperto che questo metodo funziona bene per incorporare video nei post del blog di WordPress.
Tuttavia, lo shortcode di embed e i suoi parametri di larghezza e altezza non funzionano per tutti i provider oEmbed. Ad esempio, non puoi usarlo per impostare l'altezza e la larghezza di un embed Giphy in WordPress. In tal caso, puoi provare uno degli altri metodi menzionati di seguito.
Invece di incollare l'URL nell'editor dei post, dovrai creare un blocco shortcode. Puoi quindi aggiungere parametri di larghezza e altezza al codice di embed.
Ad esempio, devi semplicemente racchiudere quanto segue nei tag embed:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Cambia semplicemente i valori di larghezza e altezza per adattarli alle tue esigenze e sostituisci l'URL con il contenuto che desideri incorporare.
Quando sei soddisfatto della pagina, fai clic su 'Aggiorna' o 'Pubblica'.
Il contenuto incorporato dovrebbe ora adattarsi perfettamente allo spazio disponibile.
Metodo 2: Utilizzo dei Blocchi di Incorporamento integrati di WordPress (Facile)
L'editor a blocchi di WordPress include diversi blocchi di incorporamento per vari servizi oEmbed, come blocchi per Twitter, streaming live di YouTube e video, e incorporamenti SoundCloud.
Alcuni di questi blocchi ti consentono di modificare l'allineamento dell'incorporamento e impostare il contenuto su 'Larghezza estesa' o 'Larghezza intera'.
Se scegli la larghezza intera, il blocco di incorporamento e il contenuto incorporato occuperanno l'intera larghezza dello schermo. Se scegli la larghezza estesa, il blocco di incorporamento occuperà l'intera larghezza, ma il contenuto rimarrà della stessa dimensione.
Il risultato finale può variare a seconda del tuo tema WordPress. Tuttavia, questo è un metodo rapido e semplice, quindi vale la pena vedere se funziona per il tuo sito web WordPress.
Fai semplicemente clic sul pulsante 'Allinea' nella piccola barra degli strumenti sopra il blocco. Quindi, seleziona 'Larghezza estesa' o 'Larghezza intera'.
Se questo risolve il problema della larghezza massima per l'incorporamento, puoi procedere e pubblicare la pagina. Se non sei soddisfatto dell'aspetto, dovrai provare un metodo diverso.
Metodo 3: Utilizzo di PHP personalizzato (Imposta una larghezza massima per tutti gli embed)
A volte potresti voler impostare una larghezza massima per tutti i contenuti incorporati. Il modo più semplice per farlo è aggiungere codice personalizzato al tuo sito web WordPress.
Il problema con questo metodo è che l'attributo di larghezza massima funzionerà solo se il contenuto incorporato non ha già una 'larghezza' definita. Se il codice di incorporamento include già il proprio attributo 'width', questo metodo potrebbe non funzionare.
Se non hai mai modificato il codice del tuo sito, dai un'occhiata alla nostra guida su come aggiungere facilmente snippet di codice personalizzati in WordPress.
Alcune guide ti chiedono di modificare manualmente i file del tema, ma questo può causare tutti i tipi di errori e potrebbe persino bloccare completamente il tuo sito web.
Per questo motivo, ti consigliamo di utilizzare WPCode. Rende facile aggiungere snippet di codice in WordPress senza dover modificare i file del tuo tema. In questo modo, puoi aggiornare o cambiare il tuo tema senza perdere tutte le tue funzioni di codice personalizzate.
WPCode viene fornito anche con una libreria di snippet di codice preconfigurati, che include uno snippet 'Imposta larghezza massima oEmbed'. Questo ti permette di specificare una larghezza e un'altezza massime per i tuoi oEmbed.
Innanzitutto, dovrai installare e attivare il plugin gratuito WPCode. Per maggiori informazioni, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, naviga su Snippet di codice » Libreria nel tuo pannello di amministrazione di WordPress.
Qui, puoi cercare 'Imposta larghezza massima oEmbed' e passare il mouse sul risultato con lo stesso nome.
Puoi quindi fare clic su ‘Usa Snippet’.
WPCode ti porterà quindi alla pagina ‘Modifica Snippet’, dove il plugin ha già configurato tutto per te.
Qui, noterai il seguente snippet di codice pronto all'uso:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Per impostazione predefinita, questo imposta la larghezza massima a '400' e l'altezza massima a '280'. Non dimenticare di regolare gli attributi di altezza e larghezza in base alle tue esigenze.
Infine, fai clic sullo slider 'Inattivo' in modo che mostri 'Attivo'. Quindi fai semplicemente clic sul pulsante 'Salva frammento' o 'Aggiorna' per rendere attivo lo snippet di codice.
Metodo 4: Utilizzo di CSS (Imposta la larghezza massima per tipi specifici di embed)
Per impostazione predefinita, WordPress aggiunge automaticamente classi CSS a diverse aree del tuo sito.
Aggiunge anche diverse classi CSS ai blocchi di incorporamento. Puoi utilizzare queste classi CSS per impostare una larghezza massima per gli incorporamenti sul tuo blog WordPress.
Questa è una buona scelta se desideri impostare una dimensione massima per un tipo specifico di incorporamento, come i Tweet incorporati. Ti consente inoltre di creare una dimensione massima per tutti i contenuti incorporati, indipendentemente dal tipo.
Per scoprire quali classi CSS devi indirizzare, incorpora semplicemente contenuti in un post o in una pagina e quindi visualizzali in anteprima nel tuo browser.
Quindi, passa il mouse sopra il contenuto incorporato e fai clic con il pulsante destro del mouse. Nel menu che appare, seleziona lo strumento 'Ispeziona'.
Questo apre un nuovo pannello che mostra tutte le classi CSS che WordPress ha aggiunto al contenuto incorporato. Puoi usare queste classi per impostare una larghezza massima per questo tipo di incorporamento.
Per indirizzare un provider oEmbed specifico, userai tipicamente .wp-block-embed-providername, quindi cerca questa classe nel pannello.
Ad esempio, nell'immagine seguente, abbiamo sottolineato la classe .wp-block-embed-providername . Su questa riga, possiamo anche vedere una classe .wp-block-embed-pinterest.
Puoi impostare una larghezza massima solo per gli incorporamenti Pinterest usando la classe .wp-block-embed-pinterest.
Ad esempio:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Sii solo consapevole che potresti dover sostituire .wp-block-embed-pinterest con una classe CSS diversa, a seconda del contenuto che desideri indirizzare.
Se desideri impostare una larghezza massima per tutti gli incorporamenti, puoi utilizzare il seguente snippet:
.wp-block-embed {
max-width: 900px!important;
}
Il modo più semplice per aggiungere CSS personalizzato al tuo sito web è utilizzare WPCode. Crea semplicemente un nuovo snippet personalizzato seguendo lo stesso processo descritto sopra.
Tuttavia, questa volta apri il menu a discesa 'Tipo di codice' e seleziona 'Snippet CSS'.
Ora puoi salvare e pubblicare questo snippet esattamente nello stesso modo in cui rendi live qualsiasi snippet WPCode.
Fatto ciò, WordPress utilizzerà questo valore come dimensione massima per i tuoi incorporamenti.
Suggerimento bonus: Come aggiungere facilmente i tuoi feed dei social media a WordPress
Se incorpori regolarmente contenuti da piattaforme di social media, puoi risparmiare molto tempo e fatica utilizzando Smash Balloon.
Smash Balloon è il miglior plugin per i social media per WordPress e ti consente di aggiungere facilmente i tuoi feed dei social media a un sito WordPress.
Supporta tutti i popolari embed dei social media, inclusi YouTube, Twitter, Instagram e video TikTok.
Ancora più importante, Smash Balloon è responsive per dispositivi mobili e funziona con qualsiasi tema WordPress, quindi i tuoi contenuti incorporati avranno sempre un bell'aspetto.
Speriamo che questo articolo ti abbia aiutato a imparare come impostare una larghezza massima oEmbed in WordPress. Potresti anche voler consultare la nostra guida su come incorporare facilmente codice iframe in WordPress, o il nostro confronto esperto dei migliori software di live chat per piccole imprese.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Andreu
Il problema di questo è che rende anche la larghezza massima delle immagini alla dimensione definita. Cosa posso fare se voglio limitare la larghezza dell'embed nell'editor ma non quella dell'immagine? Grazie
Joe Daniel
Grazie. Ci sto lottando da settimane... funziona per WP 4.0 con il tema Genesis
digg
Ciao, per me funziona perfettamente.
Ma questo influisce sull'intero sito, che ha larghezze diverse poiché ci sono pagine a larghezza intera, con barre laterali o forum, ecc.
È possibile discriminare questo in modo che influenzi solo le pagine del forum di bbpress?
Sarà molto utile, grazie!
Ajit Kumar
Per chiunque non riesca a farlo funzionare o se i video di YouTube e altri contenuti iframe non vengono ridimensionati, dovrai aggiungere il seguente codice al tuo style.css
/* Assicurati che gli embed e gli iframe si adattino ai loro contenitori */
embed,
iframe,
object {
max-width: 100%;
}
Spero che questo aiuti. E Syed, grazie per l'ottimo post!
Waymond
Grazie per aver pubblicato la soluzione!
Abhishek Sachan
non funziona
Dj
GRAZIE! Mi stava facendo impazzire.
Anto (@imanto)
Non puoi usare iframe, object, embed { max-width: 100%; height:auto;} sì, ottiene la larghezza corretta e rende il video reattivo, ma non risolve l'altezza quando si visualizza nel browser.
C'è davvero un modo per farlo? Ho provato quasi tutto, anche fitvids non funziona perché stai impostando una larghezza di base in px nelle funzioni, ma quella larghezza viene mostrata sui dispositivi mobili, poi quando provi a correggerla con max-width, l'altezza si sballa anche nel browser...
Sto pensando a media queries o qualcosa del genere? Uff, sono esausto.
Amir
Funziona perfettamente, grazie mille!
Pierre Dickinson
Ciao, grazie per il suggerimento, ma non funziona, ecco cosa ti serve nel tuo file function.php:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // o quello che vuoi
$defaults[‘height’]=360; // o quello che vuoi
return $defaults;
}
funziona benissimo!
Saluti,
Filip Kojic
Questo codice non funziona bene. Ho messo il nome del mio tema e il tema si blocca.
Valerie
Non sono sicuro che l'altro commentatore se ne sia reso conto, ma il codice ha virgolette ricurve e potrebbe danneggiare un sito. Lo testerò qui per vedere se i wrapper shortcode impediranno la modifica che ha rotto il codice...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Sto cercando di pubblicare un film d'animazione di alta gamma da YouTube sul mio blog WordPress. La parte inferiore del frame viene tagliata nell'anteprima. Una volta cliccata la freccia di riproduzione, questo problema scompare. Ma il regista è giustamente infelice che l'anteprima nel post dia l'impressione di un errore. La regolazione dell'altezza e della larghezza nel codice del post funziona, ma non risolve il problema. Idee?
Colin
Ha funzionato alla grande – grazie!
Ryan Silver
Ciao,
Ho usato la tua soluzione per la larghezza e ha funzionato benissimo. Ma come imposto l'altezza ora? È semplicemente la stessa if ( ! isset( $content_width ) ) $content_width = 560; ma con la parola 'width' sostituita dalla parola 'height'? Ho provato ma non ha funzionato....
Staff editoriale
L'altezza è determinata automaticamente per corrispondere al rapporto 16:9.
Amministratore
FIlip Kojic
Sembra che sia 16:10. Ecco un esempio:
How can I change height. Please someone answer.
Jasmine Ham
Fantastico, funziona! ma se avessi bisogno che fosse reattivo?
Qualche idea su come fare?
josef
Ciao,
c'è un modo per forzare tutti gli iframe del sito ad essere larghi al 100%. non solo youtube
ho circa 300 iframe e tutti di dimensioni fisse quindi... grazie in anticipo
Josef
josef
Ciao,
c'è un modo per forzare tutti gli iframe del sito ad essere larghi al 100%. non solo youtube
ho circa 300 iframe e tutti di dimensioni fisse quindi...
Ryan
Ho aggiunto questo codice al mio functions.php ma non ha fatto alcuna differenza, e presumo che sia perché il mio tema non definisce $content_width.
Vedo il link al codex sulla definizione, ma non sono uno sviluppatore e non ne ho uno a disposizione; come si aggiunge una definizione di $content_width a un tema? Dove va? Grazie!
Justin Germino
Questo ha funzionato perfettamente, c'è un modo per forzare e impostare di default il video in qualità HD invece che SD che sembra essere il default anche se nelle mie impostazioni di YouTube l'ho impostato per impostazione predefinita in HD?
Staff editoriale
Qual è la tua larghezza massima? Ho letto in passato che Youtube regola la qualità in base alla larghezza dell'iframe.
Amministratore
Grant Norwood
Si noti che la variabile $content_width deve essere dichiarata come globale prima che questa correzione funzioni.
Nigel Parry
WP sembra essere aggiornato da persone che non hanno chiaro la centralità del multimedia su Internet. Perché questa preferenza di base dovrebbe richiedere un intervento sul codice non lo so. WP chiaramente non riusciva a capire quanto fossero larghe le mie colonne. Comunque, ora è tutto risolto. Voi ragazzi siete fantastici.
Staff editoriale
Beh Nigel, c'è di più. Stanno cercando di rendere WordPress più facile da usare per gli "utenti". Nel tempo, WordPress ha aggiunto un'opzione dopo l'altra. Questo diventa davvero terrificante per i nuovi utenti. Ecco perché stanno seguendo la strada delle decisioni piuttosto che delle opzioni. La speranza con questa larghezza massima oEmbed è che ogni designer di temi dovrebbe/vorrà definirla nei propri temi, in modo che l'utente finale non debba preoccuparsene.
Amministratore
Alex Leonard
Grazie! Ero un po' perplesso su dove fosse finita l'impostazione di incorporamento dei media!
Azad
Ciao
Grazie per il tuo post.
Ma non riesco a farlo funzionare, ho scritto l'altro post che hai menzionato nei commenti. Ma ancora non riesco a farlo funzionare, ho messo questo:
All'inizio del mio functions.php, ma poi tutto il mio sito ha smesso di funzionare. tutto è diventato bianco, ho dovuto modificare il file tramite ftp per farlo funzionare di nuovo.
Cosa sto facendo di sbagliato?
Grazie!
Azad
Hey
I got it working, thanks!
Monica
Ciao, dove nel file functions.php dovrebbe essere inserito questo codice?
Staff editoriale
Puoi incollarlo all'inizio o alla fine purché sia indipendente da altre funzioni. Ecco un articolo a riguardo:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Amministratore
Jesse Garnier
Quale valore sarebbe appropriato per $content_width per un design a larghezza variabile o responsivo?
Staff editoriale
Per un design responsivo, probabilmente vorrai usare fitvid.js o qualcosa di simile per ridimensionare i tuoi video.
Amministratore
Paul Lumsdaine
Sono riuscito in qualche modo a far funzionare la responsività impostando un max-width: 100% sui miei iframe in CSS. Naturalmente l'altezza viene impostata automaticamente a seconda della larghezza del tuo contenuto, ma questo dovrebbe almeno farlo funzionare correttamente senza usare JavaScript aggiuntivo. Fitvid è la strada da percorrere, ma questo ha funzionato per me.
Jeremy Myers
Paul,
Puoi includere il CSS che hai usato per impostare la larghezza del tuo iframe al 100%?
Roman
Uso questo codice CSS per il design responsivo:
iframe, object, embed { max-width: 100%; } ( se vuoi puoi aggiungere -> height: auto )
Tevya
Sfortunatamente il CSS di Roman o non funziona su alcuni temi o non funziona con il nuovo lettore multimediale WP 3.6 integrato nel core. L'ho appena provato e niente. Sto cercando di ottenere un tema responsivo che mantenga anche il nuovo lettore WP 3.6 responsivo, ma finora niente da fare. Il tema 2012 sembra gestirlo molto bene, ma non riesco a capire cosa stanno facendo di diverso rispetto al tema con cui sto lavorando.
Melanie
Sono un principiante di WP e del codice, detto questo non sono sicuro di dove inserire il codice “if ( ! isset( $content_width ) ) $content_width = 600;” Sono andato al file function.php nel mio tema Suffusion e non sono sicuro di dove inserire esattamente questo codice. Ho provato in diversi punti in cui si parlava di allegati video e non funziona. Nel mio caso, i video incorporati sono ora troppo grandi per il mio tema dopo l'aggiornamento a WP 3.5.
Staff editoriale
Cambia il numero 600 per farlo corrispondere alle dimensioni del tuo tema. Se è troppo grande per il tuo tema, allora rendilo più piccolo.
Amministratore
Jessi Linh
È stato rilasciato al momento giusto!!! Anche il nome “Elvin” è così speciale.
Grazie per il tuo post.
Edward Caissie
Questa è una delle ragioni per cui impostare un valore appropriato di $content_width è un requisito secondo le linee guida di revisione dei temi di WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Staff editoriale
Sì, sono totalmente d'accordo con te. Solo i temi codificati male non avranno questo. Ma ce ne sono molti in giro. Un tema che uno dei nostri clienti stava usando aveva quel pezzo mancante. Nel complesso, è un buon tema.
Amministratore
Devin
Tempismo perfetto. Grazie!