WordPress

Cómo Configurar el Ancho Máximo de oEmbed en WordPress (4 Métodos Fáciles)

¿Quieres limitar el ancho de los oEmbeds en WordPress? WordPress incrusta automáticamente contenidos de terceros como vídeos de YouTube, Tweets o publicaciones de Facebook. Sin embargo, a veces las incrustaciones pueden ser demasiado anchas y estropear el diseño de tu página.

En este artículo, te mostraremos cómo establecer el ancho máximo de los oEmbeds en WordPress para que puedas tener más control sobre el diseño de tu sitio.

¿Por qué arreglar el ancho máximo de OEmbed en WordPress?

WordPress le permite incrustar automáticamente contenido de determinados sitios web de terceros en sus entradas y páginas mediante una tecnología llamada oEmbed.

Esto le permite incrustar fácilmente vídeos de YouTube, publicaciones de Facebook, tweets y muchos otros tipos de contenido en su sitio web. Este contenido no se aloja en tu sitio web de WordPress. En su lugar, se muestra directamente desde estos sitios de terceros.

WordPress es bastante bueno para ajustar automáticamente el ancho del contenido incrustado a las áreas de contenido o barra lateral de su sitio web.

Sin embargo, a veces estos contenidos incrustados pueden ser demasiado anchos y superponerse a las áreas de contenido de su sitio web, como en el ejemplo siguiente.

Para solucionar esto, tendrás que decirle explícitamente a WordPress que utilice un límite de ancho máximo para las incrustaciones de terceros. Desafortunadamente, no hay ninguna opción en la configuración de WordPress para hacer eso.

Dicho esto, vamos a ver cómo establecer fácilmente el ancho máximo de oEmbed en WordPress sin romper nada.

Cubriremos 4 métodos diferentes, y podrás elegir el que mejor se adapte a tus necesidades:

Método 1: Utilizar el código corto (shortcode) de inserción en WordPress

Este método es más fácil y funciona muy bien para establecer un ancho máximo para las incrustaciones de vídeo en WordPress.

En lugar de pegar la URL o usar el bloque de YouTube, usarás el bloque de shortcode. Dentro de él, tienes que usar el shortcode de incrustación e incluir los parámetros de anchura y altura.

[embed width="900" height="600"]https://youtu.be/6LwWumPeues[/embed]

Siéntase libre de cambiar los valores de la anchura y la altura a sus propios requisitos, y reemplazar la URL de incrustación a su propia incrustación.

Ahora puedes previsualizar tu publicación o página y ver la incrustación en acción.

El shortcode de incrustación y sus parámetros de anchura y altura no funcionan para todos los proveedores de oEmbed. Por ejemplo, no puedes usarlo para establecer la altura y la anchura de un embed de Giphy en WordPress.

En ese caso, puedes probar uno de los métodos alternativos que se mencionan a continuación.

Método 2: Utilizar bloques de incrustación en WordPress

El editor por defecto de WordPress viene con varios bloques de incrustación para diferentes proveedores de servicios oEmbed. Puedes usarlos para incrustar contenido en diferentes áreas de tus entradas y páginas.

Algunos de estos bloques también permiten cambiar la alineación de la incrustación y establecer el ancho del contenido a lo ancho o a lo completo.

Puedes probar a utilizar estas opciones para ver si se soluciona el problema de la anchura máxima de la incrustación.

Método 3: Usar CSS para establecer el ancho máximo de las incrustaciones en WordPress

Por defecto, WordPress añade automáticamente clases CSS a diferentes áreas de tus entradas y páginas.

También añade varias clases CSS a los bloques incrustados. Estas clases CSS se pueden utilizar para establecer un ancho máximo para las incrustaciones en su sitio web de WordPress.

Para saber a qué clases CSS tienes que dirigirte, simplemente incrusta el contenido en un post o página, y luego previsualízalo en tu navegador. Haz clic con el botón derecho del ratón sobre el contenido incrustado y luego selecciona la herramienta Inspeccionar.

Podrás ver todas las clases CSS añadidas al elemento incrustado. Puedes utilizar estas clases para establecer un ancho máximo para este tipo de incrustación.

Por ejemplo, si quieres establecer un ancho máximo para todos los incrustados, entonces puedes usar el siguiente CSS personalizado.

.wp-block-embed {
max-width: 900px!important;
}

También puede dirigirse a proveedores específicos de oEmbed utilizando la función .wp-block-embed-providername. Por ejemplo, si quieres establecer un ancho máximo sólo para las incrustaciones de Pinterest, puedes utilizar el siguiente CSS personalizado.

.wp-block-embed-pinterest {
max-width: 900px!important;
}

Método 4: Establecer el ancho máximo de oEmbed usando el filtro de WordPress

Este último método requiere que añada código personalizado a su sitio web de WordPress. Para este método, añadiremos nuestro propio código en WordPress para establecer el ancho por defecto de los oEmbeds. Simplemente añade el siguiente código al archivo functions.php de tu tema o al plugin Code Snippets.

add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' );

function wpbeginner_embed_defaults() {
return array(
'width' => 400,
'height' => 280
);
}

No olvide ajustar los atributos de altura y anchura a sus propias necesidades.

El problema de este método es que sólo aplica el atributo width si el contenido incrustado no tiene definido ‘width’. Si el código incrustado ya incluye la anchura, entonces este método puede no funcionar.

Publicidad

Síguenos en Facebook