ElegantThemes

Cómo establecer el ancho máximo de oEmbed en WordPress (4 métodos sencillos)

¿Quieres limitar el ancho de oEmbeds en WordPress?

WordPress incorpora automáticamente contenido de terceros, como videos de YouTube, tweets o publicaciones de Facebook. Sin embargo, a veces las incrustaciones pueden ensancharse demasiado y estropear los diseños de página.

En este artículo, le mostraremos cómo establecer el ancho máximo de oEmbed en WordPress para que tenga más control sobre el diseño de su sitio.

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

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

Para que puedas fácilmente Insertar videos de YouTube, Publicaciones de Facebook, Tweets y muchos otros tipos de contenido en su sitio web. Este contenido no está alojado en el tuyo Sitio web de WordPress. En cambio, se mostrará directamente desde estos sitios de terceros.

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

Sin embargo, a veces este contenido incrustado puede ser demasiado amplio y superponerse a las áreas de contenido de su sitio web, como en el siguiente ejemplo.

Un incrustado de WordPress que desborda el ancho del contenido

Para solucionar esto, debe decirle explícitamente a WordPress que use una restricción de ancho máximo en incrustaciones de terceros. Desafortunadamente, no hay ninguna opción para esto en la configuración de WordPress.

Sin embargo, echemos un vistazo a cómo puede establecer fácilmente el ancho máximo de oEmbed en WordPress sin romper nada.

Vamos a cubrir 4 métodos diferentes y puedes elegir el que mejor se adapte a tus necesidades:

  1. Establecer el ancho de inserción con el código corto de WordPress
  2. Establezca el ancho de oEmbed con el Bloque de inserción de WordPress
  3. Establecer el ancho máximo de oEmbed usando CSS
  4. Establezca el ancho máximo de oEmbed usando el filtro de WordPress (método de código)

Método 1. Utilice el código corto de incrustación en WordPress

Este método es más simple y funciona muy bien para establecer un ancho máximo para incrustaciones de video en WordPress.

En lugar de pegar la URL o utilizar el bloque de YouTube, utilice la Código corto Cuadra. En él, debe usar el código corto de incrustación y especificar los parámetros de ancho y alto.

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

Puede cambiar los valores de ancho y alto a su gusto y reemplazar la URL de inserción con su propia URL de inserción.

Insertar ancho de shortcode

Ahora puede obtener una vista previa de su publicación o página y ver la inserción en acción.

o Ancho de incrustación ajustado

El código corto de inserción y sus parámetros de ancho y alto no funcionarán para todos los proveedores de oEmbed. Por ejemplo, no puede usarlo para cambiar la altura y el ancho de un. ajustar Incrustar Giphy en WordPress.

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

Método 2. Utilice bloques de incrustación en WordPress

los Editor estándar de WordPress viene con varios bloques de inserción para diferentes proveedores de servicios oEmbed. Puede usarlos para incrustar contenido en diferentes áreas de sus publicaciones y páginas.

Insertar bloques en WordPress

Para algunos de estos bloques, también puede cambiar la orientación de la incrustación y establecer el ancho del contenido en ancho o ancho completo.

Ancho y orientación del bloque

Puede intentar usar estas opciones para ver si resuelve el problema del ancho máximo de inserción.

Método 3. Use CSS para establecer el ancho máximo para incrustaciones en WordPress

Por defecto, WordPress agrega automáticamente Clases CSS en diferentes áreas de sus publicaciones y páginas.

También agrega varias clases de CSS para incrustar bloques. Estas clases de CSS se pueden usar para establecer un ancho máximo para incrustaciones en su sitio web de WordPress.

Para saber a qué clases de CSS dirigirse, simplemente inserte el contenido en una publicación o página, luego véalo en su navegador. Haga clic con el botón derecho colocando el cursor sobre el contenido incrustado y luego seleccione la Herramienta de revisión.

Encuentra clases de CSS para insertar bloques

Puede ver todas las clases CSS que se han agregado al elemento incrustado. Puede utilizar estas clases para establecer un ancho máximo para este tipo de incrustación.

Por ejemplo, si desea establecer un ancho máximo para todas las incrustaciones, puede usar: CSS personalizado.

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

También puede dirigirse a proveedores oEmbed específicos mediante el uso de .wp-block-embed-providername Excelente. Por ejemplo, si desea establecer un ancho máximo solo para incrustaciones de Pinterest, puede usar el siguiente CSS personalizado.

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

Método 4. Establezca el ancho máximo de oEmbed usando el filtro de WordPress

Este último método implica agregar código personalizado a su sitio web de WordPress. Si aún no lo has hecho, echa un vistazo a nuestra guía. Cómo agregar fácilmente fragmentos de código personalizados en WordPress.

Para este método, agregaremos nuestro propio código a WordPress para establecer el ancho predeterminado para oEmbeds. Simplemente agregue el siguiente código al archivo functions.php de su tema o Fragmentos de código Enchufar.

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 ancho para satisfacer sus propias necesidades.

El problema con este método es que el atributo de ancho solo se aplica si no se define «ancho» para el contenido incrustado. Si el código de inserción ya contiene ancho, es posible que este método no funcione.

Consejo de bonificación

Si inserta regularmente contenido de plataformas de redes sociales en su sitio web de WordPress, entonces debería comenzar a usarlo Rompe el globo.

Rompe el globo

Es el mejor complemento de redes sociales para WordPress y permite una fácil incrustación feeds de redes sociales personalizados en WordPress.

Admite incrustaciones de redes sociales populares como YouTube, Twitter y más. También le permite incrustar contenido de Facebook e Instagram que WordPress no admite.

Más importante aún, todos los feeds de redes sociales responden a dispositivos móviles y funcionan con cualquier tema de WordPress.

Esperamos que este artículo le haya ayudado a aprender cómo establecer un ancho máximo de oEmbed en WordPress. También puede querer ver nuestro completo Hoja de trucos de redes sociales o nuestra comparación experta de el mejor software de chat en vivo para pequeñas empresas.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

El cargo Cómo establecer el ancho máximo de oEmbed en WordPress (4 métodos sencillos) apareció primero WPBeginner.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *