Cómo cambiar dinámicamente el ancho y alto de oEmbed en WordPress

¿Quieres que tu contenido incrustado se vea perfecto en tu sitio web de WordPress, sin importar el tamaño de la pantalla?

Por defecto, WordPress hace un gran trabajo al incrustar videos y otros oEmbeds en tus publicaciones y páginas. Sin embargo, según nuestra experiencia, a veces necesitas más control sobre su tamaño.

Poder cambiar dinámicamente el ancho y alto de los incrustados es importante para el diseño adaptable, asegurando que tu sitio web se vea genial en teléfonos, tabletas y escritorios. También te permite ajustar el diseño de tu contenido para una apariencia más pulida. 

En este artículo, te mostraremos cómo cambiar dinámicamente el ancho y alto de oEmbed en WordPress.

Por qué establecer el ancho y alto dinámico de oEmbed en WordPress

WordPress facilita la incrustación de contenido de terceros en tus publicaciones y páginas utilizando una tecnología llamada oEmbed.

Esto te permite incrustar fácilmente videos de YouTube, publicaciones de Facebook, videos de TikTok, tweets y mucho más en WordPress. La mejor parte es que este contenido no está alojado en tu sitio web de WordPress, lo que ahorra recursos de tu servidor y mejora el rendimiento de WordPress.

Por defecto, WordPress hace un gran trabajo ajustando automáticamente la altura y el ancho del contenido incrustado para que se ajuste a tus publicaciones y páginas.

Sin embargo, algunos usuarios pueden querer cambiar este comportamiento predeterminado. Por ejemplo, es posible que desees establecer un ancho y alto de incrustación predeterminados diferentes para la página principal y los artículos individuales.

Esto es útil cuando estás utilizando un diseño de página de inicio personalizado o trabajando en tu propio diseño de tema personalizado.

Dicho esto, veamos cómo establecer fácilmente un ancho y alto dinámicos para el contenido oEmbed en WordPress.

Te mostraremos dos métodos diferentes, puedes usar los enlaces rápidos a continuación para ir directamente al método que te interesa.

• Método 1. Establecer ancho y alto de incrustación dinámicos en WordPress
• Método 2. Usar CSS para establecer ancho y alto dinámicos de oEmbed

Método 1. Establecer ancho y alto de incrustación dinámicos en WordPress

Este método requiere que agregues código personalizado a tu sitio web de WordPress. Si no has hecho esto antes, consulta nuestra guía sobre cómo pegar fragmentos de la web en WordPress fácilmente.

Para este método, usaremos las etiquetas condicionales de WordPress para detectar qué página de WordPress se está viendo y luego cambiaremos los valores predeterminados de ancho y alto de oEmbed en consecuencia.

Simplemente agrega el siguiente código a tu archivo functions.php, a un plugin específico del sitio, o a un plugin de fragmentos de código.

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

Recomendamos agregar este código usando WPCode, el mejor plugin de fragmentos de código de WordPress. Es la forma más fácil de agregar código personalizado en WordPress sin editar el archivo functions.php de tu tema.

Con este método, no tienes que preocuparte por romper tu sitio. Además, si cambias tu tema de WordPress, podrás conservar todas tus personalizaciones.

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, ve a la página Fragmentos de código » + Añadir fragmento desde tu panel de administración de WordPress.

Luego, busca la opción ‘Añadir tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Añadir fragmento personalizado’.

A continuación, selecciona ‘Fragmento de PHP’ como tipo de código de las opciones que aparecen en la pantalla.

Después de eso, puedes añadir un nombre para tu fragmento personalizado, que puede ser cualquier cosa para ayudarte a recordar para qué es el código.

Luego, simplemente copia y pega el fragmento de código de arriba en el cuadro ‘Vista previa del código’.

Cuando eso esté hecho, simplemente cambia el interruptor en la parte superior de la pantalla de ‘Inactivo’ a ‘Activo’ y haz clic en el botón ‘Guardar fragmento’.

Puedes usar cualquiera de las etiquetas condicionales de WordPress disponibles para detectar diferentes escenarios.

Aquí tienes otro ejemplo donde cambiamos el ancho predeterminado de oEmbed para una página de destino personalizada.

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

Como puedes ver, este código simplemente establece un ancho y alto predeterminado diferente para un ID de página específico.

Método 2. Usar CSS para establecer ancho y alto dinámicos de oEmbed

WordPress añade automáticamente clases CSS predeterminadas a diferentes áreas de tu sitio web.

Estas clases CSS se pueden usar para cambiar la apariencia de los elementos incrustados en áreas específicas de tu sitio web.

Por ejemplo, puedes encontrar clases CSS como page-id, post-id, category, tag y muchas más en tu tema de WordPress. Puedes descubrir estas clases CSS usando la herramienta Inspect tool.

De manera similar, WordPress también agrega clases CSS a los bloques de incrustación en tus publicaciones y páginas. Nuevamente, usarás la herramienta Inspect para encontrar qué clases utiliza el bloque de incrustación.

Una vez que tengas estas clases CSS, puedes usarlas para establecer una altura y anchura dinámicas para los oEmbeds. Por ejemplo, en el siguiente código de ejemplo, estamos estableciendo una anchura y altura dinámicas para el bloque de incrustación de Pinterest en un ID de publicación específico.

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

Puedes probar tu código CSS agregando CSS personalizado en el personalizador del tema. Una vez que estés satisfecho, no olvides guardar y publicar tus cambios.

Esperamos que estos dos métodos te hayan ayudado a aprender cómo establecer fácilmente la anchura y altura dinámicas de oEmbed en WordPress. También es posible que desees ver estos útiles consejos, trucos y hacks de WordPress o consultar nuestra selección de los mejores plugins de redes sociales para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.