¿Quieres cambiar dinámicamente el ancho y alto de oEmbed en WordPress?
De forma predeterminada, WordPress hace un gran trabajo al incorporar videos y otras incrustaciones en sus publicaciones y páginas. Sin embargo, a veces es posible que desee cambiar dinámicamente el ancho y la altura de incrustació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 la altura de Dynamic OEmbed en WordPress?
WordPress facilita la incorporación de contenido de terceros en sus publicaciones y páginas mediante 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, algunos usuarios pueden querer cambiar este comportamiento predeterminado. Por ejemplo, es posible que desee establecer un ancho y una altura de incrustación predeterminados diferentes para la primera página y los artículos individuales.
Esto es útil cuando se utiliza un diseño de página de inicio personalizado o se trabaja en un 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. Establecer el ancho y la altura de incrustación dinámica en WordPress
Este método requiere agregar un código personalizado a su sitio web de WordPress. Si nunca antes ha hecho esto, consulte 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 muestra y luego cambiaremos la configuración predeterminada 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');
Puedes usar 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 una altura predeterminados diferentes para una ID de página específica.
Método 2. Uso de CSS para establecer el ancho y el alto dinámicos de oEmbed
WordPress agrega automáticamente clases CSS predefinidas a diferentes áreas de su sitio web.
Estas clases de CSS se pueden usar para cambiar el aspecto de las incrustaciones en áreas específicas de su sitio web.
Por ejemplo, puede encontrar clases de CSS como ID de página, ID de publicación, categoría, etiqueta y muchas más en su tema de WordPress. Puede descubrir estas clases de CSS utilizando 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 incrustado.
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 código de muestra a continuación, estamos configurando el ancho y el alto dinámicos para el bloque de incrustació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 a configurar fácilmente el ancho y alto dinámico de oEmbed en WordPress. Es posible que también desee ver estos útiles consejos, trucos y trucos de WordPress o ver nuestra selección de los mejores complementos de redes sociales para WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
Cómo cambiar dinámicamente el ancho y alto de oEmbed en WordPress
¿Quieres cambiar dinámicamente el ancho y alto de oEmbed en WordPress?
De forma predeterminada, WordPress hace un gran trabajo al incorporar videos y otras incrustaciones en sus publicaciones y páginas. Sin embargo, a veces es posible que desee cambiar dinámicamente el ancho y la altura de incrustació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 la altura de Dynamic OEmbed en WordPress?
WordPress facilita la incorporación de contenido de terceros en sus publicaciones y páginas mediante 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, algunos usuarios pueden querer cambiar este comportamiento predeterminado. Por ejemplo, es posible que desee establecer un ancho y una altura de incrustación predeterminados diferentes para la primera página y los artículos individuales.
Esto es útil cuando se utiliza un diseño de página de inicio personalizado o se trabaja en un 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. Establecer el ancho y la altura de incrustación dinámica en WordPress
Este método requiere agregar un código personalizado a su sitio web de WordPress. Si nunca antes ha hecho esto, consulte 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 muestra y luego cambiaremos la configuración predeterminada 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');
Puedes usar 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 una altura predeterminados diferentes para una ID de página específica.
Método 2. Uso de CSS para establecer el ancho y el alto dinámicos de oEmbed
WordPress agrega automáticamente clases CSS predefinidas a diferentes áreas de su sitio web.
Estas clases de CSS se pueden usar para cambiar el aspecto de las incrustaciones en áreas específicas de su sitio web.
Por ejemplo, puede encontrar clases de CSS como ID de página, ID de publicación, categoría, etiqueta y muchas más en su tema de WordPress. Puede descubrir estas clases de CSS utilizando 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 incrustado.
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 código de muestra a continuación, estamos configurando el ancho y el alto dinámicos para el bloque de incrustació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 a configurar fácilmente el ancho y alto dinámico de oEmbed en WordPress. Es posible que también desee ver estos útiles consejos, trucos y trucos de WordPress o ver nuestra selección de los mejores complementos de redes sociales para WordPress.
Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
