Come impostare la larghezza massima di oEmbed in WordPress (4 semplici metodi)

Índice

Vuoi limitare la larghezza di oEmbed in WordPress?

WordPress incorpora automaticamente contenuti di terze parti come video e tweet di YouTube. Tuttavia, a volte gli incorporamenti possono diventare troppo larghi e rovinare il design del tuo sito web.

In questo articolo, ti mostreremo come impostare la larghezza massima di oEmbed in WordPress in modo da avere un maggiore controllo sul layout del tuo sito.

Perché correggere la larghezza massima di OEmbed in WordPress?

WordPress supporta oEmbed, che consente di incorporare automaticamente contenuti da siti Web di terze parti. Ad esempio, puoi facilmente incorporare video di YouTube, presentazioni di SlideShare, tweet e molti altri tipi di contenuti.

Questo contenuto non è ospitato sul tuo server, quindi non rallenterà 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 abbiano entrambi supportato oEmbed in passato, da allora Meta ha abbandonato il supporto per oEmbed. Per istruzioni dettagliate su come riparare questa funzione, consulta la nostra guida su come risolvere il problema di Facebook e Instagram oEmbed in WordPress.

WordPress cercherà sempre di regolare la larghezza del contenuto incorporato in modo che si adatti perfettamente allo spazio disponibile. Tuttavia, a volte il contenuto incorporato potrebbe essere troppo ampio e sovrapporsi ad altre aree di contenuto del tuo sito web.

Sfortunatamente, non puoi impostare una larghezza massima per gli incorporamenti di terze parti utilizzando gli strumenti WordPress integrati.

Detto questo, vediamo come puoi aggiungere questa funzionalità mancante e impostare una larghezza massima di oEmbed in WordPress. Basta utilizzare i collegamenti rapidi di seguito per passare direttamente al metodo che si desidera utilizzare:

Metodo 1: utilizzo dell’Embed Shortcode (ideale per i video di YouTube)

Puoi impostare una larghezza massima utilizzando uno shortcode. Questo metodo è semplice, in particolare se desideri impostare la larghezza massima solo per un numero limitato di post. Abbiamo anche scoperto che questo metodo funziona bene per incorporare video nei post del blog di WordPress.

Tuttavia, lo shortcode di incorporamento e i relativi 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 incorporamento 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. È quindi possibile aggiungere parametri di larghezza e altezza al codice di incorporamento.

Ad esempio, devi semplicemente racchiudere quanto segue embed tag:

width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues

Basta modificare i valori di larghezza e altezza in base alle proprie esigenze e sostituire l’URL con il contenuto che si desidera 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 integrati di WordPress incorporati (semplice)

L’editor di blocchi di WordPress viene fornito con diversi blocchi di incorporamento per diversi servizi oEmbed.

Alcuni di questi blocchi ti consentono di modificare l’allineamento dell’incorporamento e di impostare il contenuto su “Larghezza ampia” 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 ampia, il blocco di incorporamento occuperà l’intera larghezza, ma il contenuto rimarrà della stessa dimensione.

Il risultato finale può variare a seconda del tema WordPress. Tuttavia, questo è un metodo semplice e veloce, quindi vale la pena vedere se funziona per il tuo sito Web WordPress.

Basta fare clic sul pulsante “Allinea” nella piccola barra degli strumenti sopra il blocco. Quindi, seleziona “Larghezza ampia” o “Larghezza intera”.

Se questo risolve il problema della larghezza massima per l’incorporamento, puoi andare avanti e pubblicare la pagina. Se non sei soddisfatto di come appare, dovrai provare un metodo diverso.

Metodo 3: utilizzo di PHP personalizzato (imposta una larghezza massima per tutti gli incorporamenti)

A volte potresti voler impostare una larghezza massima per tutto il contenuto incorporato. 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 frammenti di codice personalizzati in WordPress.

Alcune guide ti chiedono di modificare manualmente i file del tema, ma ciò può causare errori comuni di WordPress e persino interrompere completamente il tuo sito web.

Per questo motivo, ti consigliamo di utilizzare WPCode. Semplifica l’aggiunta di frammenti di codice in WordPress senza dover modificare i file del tema. In questo modo, puoi aggiornare o modificare il tema senza perdere tutte le funzioni del codice personalizzato.

Innanzitutto, dovrai installare e attivare il plug-in WPCode gratuito. Per ulteriori informazioni, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l’attivazione, vai a Frammenti di codice » Aggiungi frammento.

Nella schermata successiva, passa il mouse sopra l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)” e fai clic sul pulsante “Usa snippet” quando viene visualizzato.

Nella schermata successiva, digita un titolo per lo snippet di codice. Questo è solo per riferimento, quindi puoi usare tutto ciò che vuoi.

Quindi, apri il menu a discesa “Tipo di codice” e scegli “Snippet PHP”.

Fatto ciò, incolla semplicemente quanto segue nell’editor di codice:

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );function wpbeginner_embed_defaults()     return array(        'width'  => 400,        'height' => 280    );

Non dimenticare di regolare gli attributi di altezza e larghezza in base alle tue esigenze.

Infine, fai clic sul dispositivo di scorrimento “Inattivo” in modo che mostri “Attivo”. Quindi fai clic sul pulsante “Salva snippet” o “Aggiorna” per pubblicare lo snippet di codice.

Metodo 4: utilizzo di CSS (imposta la larghezza massima per tipi di incorporamento specifici)

Per impostazione predefinita, WordPress aggiunge automaticamente classi CSS a diverse aree del tuo sito.

Aggiunge anche diverse classi CSS per incorporare i blocchi. 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. Consente inoltre di creare una dimensione massima per tutti i contenuti incorporati, indipendentemente dal tipo.

Per scoprire quali classi CSS devi scegliere come target, incorpora semplicemente il contenuto in un post o in una pagina e quindi visualizzalo 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 WordPress aggiunte al contenuto incorporato. Puoi utilizzare queste classi per impostare una larghezza massima per questo tipo di incorporamento.

Per scegliere come target un provider oEmbed specifico, in genere utilizzerai .wp-block-embed-providernamequindi cerca questa classe nel pannello.

Ad esempio, nell’immagine seguente, abbiamo sottolineato il .wp-block-embed-providername classe. Su questa linea, possiamo anche vedere a .wp-block-embed-pinterest classe.

Puoi impostare una larghezza massima per gli incorporamenti di Pinterest solo utilizzando il file .wp-block-embed-pinterest classe.

Per esempio:

.wp-block-embed-pinterest     max-width: 900px!important;

Basta essere consapevoli che potrebbe essere necessario sostituire .wp-block-embed-pinterest con una classe CSS diversa, a seconda del contenuto che desideri scegliere come target.

Se desideri impostare una larghezza massima per tutti gli incorporamenti, puoi utilizzare il seguente frammento di codice:

.wp-block-embed     max-width: 900px!important;

Il modo più semplice per aggiungere CSS personalizzati 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 frammento esattamente nello stesso modo in cui rendi attivo qualsiasi frammento di WPCode.

Fatto ciò, WordPress utilizzerà questo valore come dimensione massima per i tuoi incorporamenti.

Suggerimento bonus: come aggiungere facilmente i 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 plug-in per social media per WordPress e ti consente di aggiungere facilmente i tuoi feed di social media a un sito Web WordPress.

Supporta tutti i popolari incorporamenti di social media, inclusi YouTube, Twitter e Instagram.

Ancora più importante, Smash Balloon è reattivo ai dispositivi mobili e funziona con qualsiasi tema WordPress, quindi i tuoi contenuti incorporati avranno sempre un bell’aspetto.

Ci auguriamo che questo articolo ti abbia aiutato a imparare come impostare una larghezza massima di oEmbed in WordPress. Potresti anche voler vedere il nostro cheat sheet completo sui social media o il nostro confronto di esperti del miglior software di chat dal vivo per le piccole imprese.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per i video tutorial di WordPress. Puoi trovarci anche su Cinguettio e Facebook.