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

Volete limitare la larghezza degli oEmbed in WordPress?

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

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

Perché correggere la larghezza massima di OEmbed in WordPress?

WordPress supporta oEmbed, che consente di incorporare automaticamente contenuti da siti web di terzi. Ad esempio, è possibile incorporare facilmente video di YouTube, presentazioni di SlideShare, tweet e molti altri tipi di contenuti.

Questo contenuto non è ospitato sul vostro server, quindi non rallenterà il vostro sito web. In particolare, dovreste sempre utilizzare tecnologie come oEmbed e non caricare mai un video su WordPress.

Nota: sebbene Facebook e Instagram abbiano supportato entrambi l’oEmbed in passato, Meta ha abbandonato il supporto per l’oEmbed. Per istruzioni passo passo su come riparare questa funzione, consultate 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 può essere troppo largo e sovrapporsi alle altre aree di contenuto del sito web.

Purtroppo, non è possibile impostare una larghezza massima per gli embed di terze parti utilizzando gli strumenti integrati di WordPress.

Detto questo, vediamo come aggiungere questa funzione mancante e impostare una larghezza massima di oEmbed in WordPress. Utilizzate semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:

Metodo 1: Utilizzo dello shortcode di incorporamento (migliore per i video di YouTube)

È possibile impostare una larghezza massima utilizzando uno shortcode. Questo metodo è semplice, soprattutto se si desidera impostare la larghezza massima solo per un numero ridotto di post. Abbiamo riscontrato che questo metodo funziona bene anche per incorporare i video nei post del blog WordPress.

Tuttavia, lo shortcode embed e i suoi parametri di larghezza e altezza non funzionano per tutti i fornitori di oEmbed. Ad esempio, non è possibile utilizzarlo per impostare l’altezza e la larghezza di un embed di Giphy in WordPress. In questo caso, potete provare uno degli altri metodi indicati di seguito.

Invece di incollare l’URL nell’editor del post, è necessario creare un blocco shortcode. È quindi possibile aggiungere i parametri di larghezza e altezza al codice embed.

Ad esempio, è sufficiente avvolgere quanto segue nei tag embed:

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

È sufficiente modificare i valori di larghezza e altezza in base alle proprie esigenze e sostituire l’URL con il contenuto che si desidera incorporare.

Quando si è soddisfatti della pagina, basta cliccare su “Aggiorna” o “Pubblica”.

Il contenuto incorporato dovrebbe ora adattarsi perfettamente allo spazio disponibile.

Metodo 2: Utilizzare i blocchi incorporati di WordPress (facile)

L’editor di blocchi di WordPress è dotato di diversi blocchi di incorporamento per diversi servizi oEmbed.

Alcuni di questi blocchi consentono di modificare l’allineamento dell’embed e di impostare il contenuto su “larghezza ampia” o “larghezza piena”.

Se si sceglie la larghezza massima, il blocco incorporato e il contenuto incorporato occuperanno l’intera larghezza dello schermo. Se si sceglie la larghezza ampia, il blocco incorporato occuperà l’intera larghezza, ma il contenuto rimarrà della stessa dimensione.

Il risultato finale può variare a seconda del vostro tema WordPress. Tuttavia, si tratta di un metodo semplice e veloce, quindi vale la pena di verificare se funziona per il vostro sito WordPress.

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

Se questo risolve il problema della larghezza massima dell’embed, si può procedere alla pubblicazione della pagina. Se non si è soddisfatti dell’aspetto, è necessario provare un altro metodo.

Metodo 3: Usare PHP personalizzato (impostare una larghezza massima per tutti gli incorporamenti)

A volte si può desiderare di impostare una larghezza massima per tutti i contenuti incorporati. Il modo più semplice per farlo è aggiungere un codice personalizzato al vostro sito WordPress.

Il problema di questo metodo è che l’attributo di larghezza massima funziona solo se il contenuto incorporato non ha già una “larghezza” definita. Se il codice incorporato include già il proprio attributo ‘width’, questo metodo potrebbe non funzionare.

Se non avete mai modificato il codice del vostro sito, date un’occhiata alla nostra guida su come aggiungere facilmente snippet di codice personalizzati in WordPress.

Alcune guide chiedono di modificare manualmente i file del tema, ma questo può causare errori comuni di WordPress e può persino distruggere completamente il vostro sito web.

Per questo motivo, consigliamo di utilizzare WPCode. Consente di aggiungere facilmente snippet di codice in WordPress senza dover modificare i file del tema. In questo modo, è possibile aggiornare o modificare il tema senza perdere tutte le funzioni del codice personalizzato.

Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Per ulteriori informazioni, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, andare su Code Snippets ” Add Snippet.

Nella schermata successiva, passare il mouse sull’opzione “Aggiungi codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet” quando appare.

Nella schermata successiva, digitate un titolo per lo snippet di codice. Questo è solo un riferimento, quindi potete usare qualsiasi cosa vogliate.

Quindi, aprire il menu a tendina “Tipo di codice” e scegliere “Snippet PHP”.

A questo punto, è sufficiente incollare quanto segue nell’editor di codice:

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );

function wpbeginner_embed_defaults() {
    return array(
        'width'  => 400,
        'height' => 280
    );
}

Non dimenticate di regolare gli attributi di altezza e larghezza in base alle vostre esigenze.

Infine, fare clic sul cursore “Inattivo”, in modo da visualizzare “Attivo”. Quindi basta fare clic sul pulsante “Salva snippet” o “Aggiorna” per rendere attivo lo snippet di codice.

Metodo 4: Utilizzo dei CSS (Impostazione della larghezza massima per tipi specifici di incorporazioni)

Per impostazione predefinita, WordPress aggiunge automaticamente le classi CSS alle diverse aree del sito.

Aggiunge anche diverse classi CSS ai blocchi di incorporamento. È possibile utilizzare queste classi CSS per impostare una larghezza massima per gli embed sul proprio blog WordPress.

È una buona scelta se si desidera impostare una dimensione massima per un tipo specifico di incorporamento, come i Tweet incorporati. Consente anche di creare una dimensione massima per tutti i contenuti incorporati, indipendentemente dal tipo.

Per sapere quali sono le classi CSS da selezionare, è sufficiente incorporare il contenuto in un post o in una pagina e visualizzarlo in anteprima nel browser.

Quindi, passare il mouse sul contenuto incorporato e fare clic con il tasto destro del mouse. Nel menu che appare, selezionare lo strumento “Ispezione”.

Si apre un nuovo pannello che mostra tutte le classi CSS che WordPress ha aggiunto al contenuto incorporato. È possibile utilizzare queste classi per impostare una larghezza massima per questo tipo di incorporamento.

Per puntare a uno specifico fornitore di oEmbed, di solito si usa .wp-block-embed-providername, quindi cercate questa classe nel pannello.

Ad esempio, nell’immagine seguente, abbiamo sottolineato la classe .wp-block-embed-providername. Su questa riga, possiamo vedere anche una classe .wp-block-embed-pinterest.

È possibile impostare una larghezza massima solo per gli embed di Pinterest utilizzando la classe .wp-block-embed-pinterest.

Ad esempio:

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

Si tenga presente che potrebbe essere necessario sostituire .wp-block-embed-pinterest con una classe CSS diversa, a seconda del contenuto che si desidera indirizzare.

Se si vuole impostare una larghezza massima per tutti gli incorporamenti, si può usare il seguente snippet:

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

Il modo più semplice per aggiungere CSS personalizzati al proprio sito web è utilizzare WPCode. È sufficiente creare un nuovo snippet personalizzato seguendo la stessa procedura descritta sopra.

Tuttavia, questa volta aprite il menu a tendina “Tipo di codice” e selezionate “Snippet CSS”.

Ora è possibile salvare e pubblicare questo snippet esattamente nello stesso modo in cui si rende vivo qualsiasi snippet di WPCode.

Fatto ciò, WordPress utilizzerà questo valore come dimensione massima per i vostri embed.

Suggerimento bonus: come aggiungere facilmente i feed dei social media a WordPress

Se incorporerete regolarmente contenuti dalle piattaforme dei social media, potrete risparmiare molto tempo e fatica utilizzando Smash Balloon.

Smash Balloon è il miglior plugin di social media per WordPress e consente di aggiungere facilmente i feed dei social media a un sito web WordPress.

Supporta tutti i social media più diffusi, tra cui YouTube, Twitter e Instagram.

Inoltre, Smash Balloon risponde alle esigenze dei dispositivi mobili e funziona con qualsiasi tema di WordPress, per cui i contenuti incorporati avranno sempre un aspetto eccellente.

Speriamo che questo articolo vi abbia aiutato a capire come impostare la larghezza massima di un oEmbed in WordPress. Potreste anche voler consultare la nostra scheda completa sui social media o il nostro confronto di esperti tra i migliori software di live chat per le piccole imprese.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.