Come cambiare dinamicamente la larghezza e l'altezza di oEmbed in WordPress

Vuoi che i tuoi contenuti incorporati abbiano un aspetto perfetto sul tuo sito WordPress, indipendentemente dalle dimensioni dello schermo?

Per impostazione predefinita, WordPress fa un ottimo lavoro nell'incorporare video e altri oEmbed nei tuoi post e pagine. Tuttavia, sulla base della nostra esperienza, a volte è necessario un maggiore controllo sulle loro dimensioni.

Essere in grado di cambiare dinamicamente la larghezza e l'altezza degli embed è importante per il design reattivo, garantendo che il tuo sito web abbia un bell'aspetto su telefoni, tablet e desktop. Ti consente inoltre di ottimizzare il layout dei tuoi contenuti per un aspetto più curato. 

In questo articolo, ti mostreremo come cambiare dinamicamente la larghezza e l'altezza di oEmbed in WordPress.

Perché impostare larghezza e altezza dinamiche per oEmbed in WordPress

WordPress rende facile incorporare contenuti di terze parti nei tuoi post e pagine utilizzando una tecnologia chiamata oEmbed.

Questo ti permette di incorporare facilmente video di YouTube, post di Facebook, video di TikTok, tweet e molto altro in WordPress. La parte migliore è che questi contenuti non sono ospitati sul tuo sito WordPress, il che consente di risparmiare risorse del server e migliora le prestazioni di WordPress.

Per impostazione predefinita, WordPress fa un ottimo lavoro nell'adattare automaticamente l'altezza e la larghezza dei contenuti incorporati per adattarli ai tuoi post e alle tue pagine.

Tuttavia, alcuni utenti potrebbero voler modificare questo comportamento predefinito. Ad esempio, potresti voler impostare una larghezza e un'altezza di incorporamento predefinite diverse per la home page e per i singoli articoli.

Questo è utile quando si utilizza un layout di home page personalizzato o si lavora al proprio design di tema personalizzato.

Detto questo, diamo un'occhiata a come impostare facilmente larghezza e altezza dinamiche per i contenuti oEmbed in WordPress.

Ti mostreremo due metodi diversi, puoi usare i collegamenti rapidi qui sotto per passare direttamente al metodo che ti interessa.

• Metodo 1. Impostazione di larghezza e altezza di incorporamento dinamiche in WordPress
• Metodo 2. Utilizzo di CSS per impostare larghezza e altezza oEmbed dinamiche

Metodo 1. Impostazione di larghezza e altezza di incorporamento dinamiche in WordPress

Questo metodo richiede l'aggiunta di codice personalizzato al tuo sito WordPress. Se non l'hai mai fatto prima, dai un'occhiata alla nostra guida su come incollare facilmente snippet dal web in WordPress.

Per questo metodo, utilizzeremo i tag condizionali di WordPress per rilevare quale pagina di WordPress viene visualizzata e quindi modificare di conseguenza le impostazioni predefinite di larghezza e altezza di oEmbed.

Aggiungi semplicemente il seguente codice al file functions.php del tuo tema, a un plugin specifico per il sito o a un plugin per snippet di codice.

//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');

Ti consigliamo di aggiungere questo codice utilizzando WPCode, il miglior plugin per snippet di codice WordPress. È il modo più semplice per aggiungere codice personalizzato in WordPress senza modificare il file functions.php del tuo tema.

Con questo metodo, non dovrai preoccuparti di rompere il tuo sito. Inoltre, se cambi il tuo tema WordPress, potrai mantenere tutte le tue personalizzazioni.

Per iniziare, è necessario installare e attivare il plugin gratuito WPCode. Per istruzioni passo passo, consulta la nostra guida su come installare un plugin WordPress.

Una volta attivato il plugin, vai alla pagina Snippet di codice » + Aggiungi Snippet dalla tua bacheca di amministrazione di WordPress.

Quindi, trova l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’ e fai clic sul pulsante ‘+ Aggiungi Snippet Personalizzato’.

Successivamente, seleziona ‘Snippet PHP’ come tipo di codice tra le opzioni che appaiono sullo schermo.

Dopodiché, puoi aggiungere un nome per il tuo snippet personalizzato, che può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Quindi, copia e incolla semplicemente lo snippet di codice dall'alto nella casella ‘Anteprima Codice’.

Una volta fatto, semplicemente sposta l'interruttore in cima allo schermo da ‘Inattivo’ ad ‘Attivo’ e fai clic sul pulsante ‘Salva Snippet’.

Puoi utilizzare uno qualsiasi dei tag condizionali di WordPress disponibili per rilevare diversi scenari.

Ecco un altro esempio in cui modifichiamo la larghezza predefinita di oEmbed per una landing page personalizzata.

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');

Come puoi vedere, questo codice imposta semplicemente una larghezza e un'altezza predefinite diverse per un ID di pagina specifico.

Metodo 2. Utilizzo di CSS per impostare larghezza e altezza oEmbed dinamiche

WordPress aggiunge automaticamente classi CSS predefinite a diverse aree del tuo sito web.

Queste classi CSS possono quindi essere utilizzate per modificare l'aspetto degli embed in aree specifiche del tuo sito web.

Ad esempio, potresti trovare classi CSS come page-id, post-id, category, tag e molte altre nel tuo tema WordPress. Puoi scoprire queste classi CSS utilizzando lo strumento Ispeziona elemento.

Allo stesso modo, WordPress aggiunge anche classi CSS ai blocchi di embed nei tuoi post e pagine. Ancora una volta, utilizzerai lo strumento Ispeziona per trovare quali classi sono utilizzate dal blocco di embed.

Una volta che hai queste classi CSS, puoi usarle per impostare altezza e larghezza dinamiche per gli oEmbed. Ad esempio, nel seguente codice di esempio, stiamo impostando larghezza e altezza dinamiche per il blocco di embed Pinterest su un ID di post specifico.

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

Puoi provare il tuo codice CSS aggiungendo CSS personalizzato nel personalizzatore del tema. Una volta soddisfatto, non dimenticare di salvare e pubblicare le tue modifiche.

Speriamo che questi due metodi ti abbiano aiutato a imparare come impostare facilmente larghezza e altezza dinamiche per gli oEmbed in WordPress. Potresti anche voler vedere questi utili suggerimenti, trucchi e hack di WordPress o dare un'occhiata alla nostra selezione dei migliori plugin per i social media per WordPress.

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