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.

This allows you to easily embed YouTube videos, Facebook posts, TikTok videos, tweets, and much more in WordPress. The best part is that this content is not hosted on your WordPress website, which saves your server resources and improves WordPress performance.

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.

This comes in handy when you are using a custom homepage layout or working on your own custom theme design.

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

This method requires you to add custom code to your WordPress website. If you haven’t done this before, then take a look at our guide on how to easily paste snippets from the web into 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.

Simply add the following code to your theme’s functions.php file, a site-specific plugin, or a code snippets plugin.

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

We recommend adding this code using WPCode, the best WordPress code snippets plugin. It’s the easiest way to add custom code in WordPress without editing your theme’s functions.php file.

With this method, you don’t have to worry about breaking your site. Plus, if you change your WordPress theme, you’ll be able to keep all of your customizations.

To get started, you need to install and activate the free WPCode plugin. For step by step instructions, see our guide on how to install a WordPress plugin.

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’.

You can use any of the available WordPress conditional tags to detect different scenarios.

Here is another example where we change the oEmbed default width for a custom landing page.

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 automatically adds default CSS classes to different areas of your website.

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

For instance, you may find CSS classes like page-id, post-id, category, tag, and many more in your WordPress theme. You can find out these CSS classes using the Inspect tool.

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.

Once you have these CSS classes, you can use them to set dynamic height and width for oEmbeds. For instance, in the following sample code, we are setting dynamic width and height for the Pinterest embed block on a specific post ID.

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

You can try out your CSS code by adding custom CSS in the theme customizer. Once you are satisfied, don’t forget to save and publish your changes.

We hope these two methods helped you learn how to easily set dynamic oEmbed width and height in WordPress. You may also want to see these useful WordPress tips, tricks and hacks or check out our pick of the best social media plugins for WordPress.

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