¿Quieres cambiar dinámicamente el ancho y alto de oEmbed en WordPress?
De forma predeterminada, WordPress hace un gran trabajo al incrustar videos y otros oEmbeds en sus publicaciones y páginas. Sin embargo, a veces es posible que desee cambiar dinámicamente el ancho y la altura de inserción.
En este artículo, le 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 integración de contenido de terceros en sus publicaciones y páginas utilizando una tecnología llamada oEmbed.
Esto le permite incrustar fácilmente videos de YouTube, tweets, TikToks y más. La mejor parte es que este contenido no está alojado en su sitio web de WordPress, lo que ahorra recursos de su servidor y mejora el rendimiento de WordPress.
De forma predeterminada, WordPress hace un gran trabajo al ajustar automáticamente la altura y el ancho del contenido incrustado para que se ajuste a sus publicaciones y páginas.
Sin embargo, es posible que algunos usuarios deseen cambiar este comportamiento predeterminado. Por ejemplo, es posible que desee establecer un ancho y alto de inserción predeterminados diferentes para la página principal y los artículos individuales.
Esto es útil cuando está utilizando un diseño de página de inicio personalizado o trabajando en su propio diseño de tema personalizado.
Dicho esto, echemos un vistazo a cómo configurar fácilmente el ancho y la altura dinámicos para el contenido oEmbed en WordPress.
Método 1. Configuración dinámica de ancho y alto de inserción en WordPress
Este método requiere que agregue un código personalizado a su sitio web de WordPress. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo agregar fácilmente fragmentos de código personalizados en WordPress.
Para este método, usaremos 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 agregue el siguiente código al archivo functions.php de su tema o un complemento específico del sitio.
//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');
Puede utilizar cualquiera de los disponibles Etiquetas condicionales de WordPress para detectar diferentes escenarios.
Aquí hay otro ejemplo en el que 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 puede ver, este código simplemente establece un ancho y alto predeterminados diferentes para una ID de página específica.
Método 2. Usar CSS para establecer el ancho y alto dinámicos de oEmbed
WordPress agrega automáticamente clases CSS predeterminadas a diferentes áreas de su sitio web.
Estas clases de CSS se pueden usar para cambiar la apariencia de las incrustaciones en áreas específicas de su sitio web.
Por ejemplo, puede encontrar clases de CSS como page-id, post-id, categoría, etiqueta y muchas más en su tema de WordPress. Puede encontrar estas clases de CSS usando la herramienta Inspeccionar.
Del mismo modo, WordPress también agrega clases de CSS para incrustar bloques en sus publicaciones y páginas. Nuevamente, usará la herramienta Inspeccionar para encontrar qué clases usa el bloque de inserción.
Una vez que tenga estas clases de CSS, puede usarlas para establecer la altura y el ancho dinámicos para oEmbeds. Por ejemplo, en el siguiente código de muestra, estamos configurando el ancho y alto dinámicos para el bloque de inserción de Pinterest en una ID de publicación específica.
article#post-79 .wp-block-embed-pinterest { max-width: 200px!important; max-height: 400px!important; }
Puede probar su código CSS agregando CSS personalizado en el personalizador de temas. Una vez que esté satisfecho, no olvide guardar y publicar sus cambios.
Esperamos que estos dos métodos le hayan ayudado a aprender cómo configurar fácilmente el ancho y alto dinámicos de oEmbed en WordPress. Es posible que también desee ver estos útiles consejos, trucos y trucos de WordPress o consulte nuestra selección de los mejores complementos de redes sociales para WordPress.