ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Search
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
Lectura: Cómo configurar el ancho máximo de oEmbed en WordPress (4 métodos sencillos)
Cuota
Notificación Mostrar más
Últimas noticias
HP Envy vs HP Pavilion: ¿Cuál es mejor?
Versus
Esta oferta de tarjeta SIM le brinda 60 GB de datos por solo £ 10
Ofertas
SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus
Cómo
¿El modo de enfoque no funciona? Pruebe estos 8 consejos para solucionar problemas
Cómo
Oppo Find X6 Pro vs Oppo Find X5 Pro: ¿Qué hay de nuevo?
Versus
Aa
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Aa
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
Search
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Síganos
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
ThemeLocal: consejos de blog que funcionan como magia > Blog > WordPress > Themes > Cómo configurar el ancho máximo de oEmbed en WordPress (4 métodos sencillos)
Themes

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

Última actualización: noviembre 19, 2021 12:17 am
ThemeLocal hace 1 año 8 Minutos mínimos para leer
Cuota
8 Minutos mínimos para leer
Cuota

¿Quieres limitar el ancho de oEmbeds en WordPress?

Contents
¿Por qué arreglar el ancho máximo de OEmbed en WordPress?Método 1. Utilice el código corto incrustado en WordPressMétodo 2. Utilice bloques de inserción en WordPressMétodo 3. Use CSS para establecer el ancho máximo para incrustaciones en WordPressMétodo 4. Establecer el ancho máximo de oEmbed usando el filtro de WordPressConsejo de bonificación

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

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

¿Por qué arreglar 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.

Esto le permite incrustar fácilmente videos de YouTube, publicaciones de Facebook, tweets y muchos otros tipos de contenido en su sitio web. Este contenido no está alojado en su sitio web de WordPress. En cambio, se muestra directamente desde estos sitios de terceros.

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

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, deberá decirle explícitamente a WordPress que use un límite de ancho máximo para incrustaciones de terceros. Desafortunadamente, no hay ninguna opción en la configuración de WordPress para hacer eso.

Dicho esto, echemos un vistazo a cómo configurar fácilmente el ancho máximo de oEmbed en WordPress sin romper nada.

Cubriremos 4 métodos diferentes, y puede elegir el que mejor se adapte a sus necesidades:

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

Método 1. Utilice el código corto incrustado en WordPress

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

En lugar de pegar la URL o usar el bloque de YouTube, usará el bloque de código corto. Dentro de él, debe usar el código corto de inserción e incluir los parámetros de ancho y alto.

Siéntase libre de cambiar los valores de ancho y alto según sus propios requisitos, y reemplace la URL de inserción por su propia 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.

oAncho de inserción ajustado

El código corto de inserción y sus parámetros de ancho y alto no funcionan para todos los proveedores de oEmbed. Por ejemplo, no puede usarlo para establecer la altura y el ancho de una inserción de 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 inserción en WordPress

El editor de WordPress predeterminado 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

Algunos de estos bloques también le permiten cambiar la alineación de la inserción y establecer el ancho del contenido en ancho o ancho completo.

Ancho y alineación del bloque

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

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

De forma predeterminada, WordPress agrega automáticamente clases de CSS a 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 debe dirigirse, simplemente incruste el contenido en una publicación o página y luego obtenga una vista previa en su navegador. Haga clic con el botón derecho llevando el mouse sobre el contenido incrustado y luego seleccione la herramienta Inspeccionar.

Encontrar clases de CSS para incrustar bloques

Podrá ver todas las clases CSS agregadas al elemento incrustado. Puede usar 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 el siguiente 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 clase. Por ejemplo, si desea establecer un ancho máximo solo para las incrustaciones de Pinterest, puede usar 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 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, agregaremos nuestro propio código en WordPress para establecer el ancho predeterminado para oEmbeds. Simplemente agregue el siguiente código al archivo functions.php de su tema o al 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 a sus propios requisitos.

El problema con este método es que solo aplica el atributo de ancho si el contenido incrustado no tiene ‘ancho’ definido. Si el código de inserción ya incluye el 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 usar Romper Globo.

Romper Globo

Es el mejor complemento de redes sociales para WordPress y le permite incrustar fácilmente 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 no es compatible con WordPress.

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. Es posible que también desee ver nuestra hoja de trucos completa de redes sociales o nuestra comparación de expertos del mejor software de chat en vivo para pequeñas empresas.

También podría gustarte

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus

Cómo configurar la autenticación multifactor en NordVPN

Oppo Find X6 Pro vs OnePlus 11: ¿Cómo se comparan?

Cómo enseñarle a Siri a decir un nombre agregando ortografía fonética a la aplicación Contactos

Cómo eliminar libros de la aplicación o dispositivo Kindle

ETIQUETADO: ancho, Cómo, configurar, máximo, métodos, oEmbed, sencillos, WordPress
ThemeLocal noviembre 19, 2021
Comparte este artículo
Facebook Twitter Pinterest Whatsapp Whatsapp
Cuota
¿Qué piensas?
Amor0
Triste0
Contento0
Somnoliento0
Enfadado0
Sin comentarios0
Guiño0
Artículo anterior 5 complementos de WordPress para impulsar la participación del lector
Artículo siguiente Cómo crear un menú de navegación flotante fijo en WordPress
Deja un comentario

Deja una respuesta Cancelar la respuesta

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

Publicación popular

Chefree Air Fryer Grill AFG01 revisión
Reseñas de tecnología
NordVPN Standard vs NordVPN Complete: ¿Qué paquete es el adecuado para usted?
Versus
Revisión de Acer Aspire 3
Reseñas de tecnología
Cómo reemplazar las tapas del joystick en el DualSense Edge
Cómo
Cómo configurar un diseño de pantalla de inicio de iPhone diferente en el trabajo (2023)
Cómo
Primeras impresiones: Samsung Galaxy A54 5G Primeras impresiones: ¿Un S23 más barato? Revisar
Reseñas de tecnología

También podría gustarte

Cómo

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus

hace 3 horas 3 Minutos mínimos para leer
Cómo

Cómo configurar la autenticación multifactor en NordVPN

hace 15 horas 4 Minutos mínimos para leer
Versus

Oppo Find X6 Pro vs OnePlus 11: ¿Cómo se comparan?

hace 16 horas 6 Minutos mínimos para leer
Cómo

Cómo enseñarle a Siri a decir un nombre agregando ortografía fonética a la aplicación Contactos

hace 16 horas 2 Minutos mínimos para leer
Cómo

Cómo eliminar libros de la aplicación o dispositivo Kindle

hace 21 horas 8 Minutos mínimos para leer
Cómo

Cómo cambiar el navegador predeterminado en Windows 11

hace 1 día 2 Minutos mínimos para leer
Cómo

Cómo configurar un diseño de pantalla de inicio de iPhone diferente en el trabajo (2023)

hace 1 día 4 Minutos mínimos para leer
Cómo

Cómo cambiar el fondo del iPhone según la hora del día (2023)

hace 2 días 7 Minutos mínimos para leer
Mostrar más
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Síganos

© 2022 Themelocal. Reservados todos los derechos.

  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

Removed from reading list

Deshacer
Welcome Back!

Sign in to your account

¿Perdiste tu contraseña?