ThemeLocal: consejos de blog que funcionan como magia
  • Blogging

    7 formas de reducir el tamaño de los archivos PDF

    Por qué la mayoría de los consejos de blogs fallan (y cómo solucionarlo)

    7 preguntas esenciales que todo bloguero debe hacerse

    Cómo escribir contenido que mantenga a sus lectores con ganas de más

    Qué hacer cuando su blog es pirateado

    Cómo escribir más rápido: 10 consejos sencillos para duplicar su salida de escritura

    Cómo monitorear tendencias de manera productiva y escribir contenido de interés periodístico

    Cómo planificar contenido como Walter Bishop

    Cómo escribir la publicación de blog definitiva: una hoja de trucos de un blogger

  • WordPress
    • Todos
    • Plugins
    • Themes

    Los 11 mejores temas de WordPress para afiliados de Amazon en 2022

    Los 5 mejores temas NFT de WordPress de 2022

    Cómo agregar colaboración en el editor de bloques de WordPress (estilo Google-Doc)

    Cómo aceptar Google Pay en WordPress (la manera fácil)

    Los 9 mejores temas de WordPress para generación de prospectos en 2022

    Cómo personalizar la página de resultados de búsqueda de productos de WooCommerce

    Cómo aceptar pagos ACH en WordPress

    Cómo agregar planes de pago «Compre ahora y pague después» a WordPress

    Cómo aceptar Apple Pay en WordPress (la forma FÁCIL)

  • Marketing por correo

    Cómo utilizar los blogs de invitados para crear su lista de correo electrónico

    Las métricas de marketing por correo electrónico en las que debe basarse cada campaña

    Cómo utilizar un formulario de contacto para crear su lista de correo electrónico

  • SEO

    Cómo corregir errores 404 de tipo de publicación personalizada en WordPress

    Aumente el tráfico a su sitio de WordPress en 6 sencillos pasos

    Cómo no seguir automáticamente enlaces externos en WordPress

    Cómo clasificar más alto en los motores de búsqueda

    Cómo eliminar enlaces rotos de su sitio de WordPress para siempre

    Guía para principiantes de SEO: introducción, preparación y jerga

    Investigación y uso de palabras clave de WordPress para SEO

    Mejore el SEO con vínculos de retroceso, velocidad del sitio y más

    Las 10 funciones más importantes de Yoast SEO para WordPress

  • Redes sociales

    Cómo agregar un recordatorio a una publicación de Instagram

    Cómo programar pines de Pinterest gratis

    Cómo volverse viral en Instagram: la guía para principiantes

    5 excelentes formas de diversificar las actualizaciones de sus redes sociales para generar más tráfico y participación

    ¿Puedes usar Instagram para hacer crecer tu negocio?

    6 formas efectivas de marcarte en las redes sociales

    6 consejos inteligentes de marketing en Instagram para impulsar su negocio

    Cómo convertir su perfil personal de Instagram en un perfil comercial

    Revisión de Shorby: Dirija el tráfico desde las redes sociales con páginas de destino y más

  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Sin resultados
Ver todos los resultados
  • Blogging

    7 formas de reducir el tamaño de los archivos PDF

    Por qué la mayoría de los consejos de blogs fallan (y cómo solucionarlo)

    7 preguntas esenciales que todo bloguero debe hacerse

    Cómo escribir contenido que mantenga a sus lectores con ganas de más

    Qué hacer cuando su blog es pirateado

    Cómo escribir más rápido: 10 consejos sencillos para duplicar su salida de escritura

    Cómo monitorear tendencias de manera productiva y escribir contenido de interés periodístico

    Cómo planificar contenido como Walter Bishop

    Cómo escribir la publicación de blog definitiva: una hoja de trucos de un blogger

  • WordPress
    • Todos
    • Plugins
    • Themes

    Los 11 mejores temas de WordPress para afiliados de Amazon en 2022

    Los 5 mejores temas NFT de WordPress de 2022

    Cómo agregar colaboración en el editor de bloques de WordPress (estilo Google-Doc)

    Cómo aceptar Google Pay en WordPress (la manera fácil)

    Los 9 mejores temas de WordPress para generación de prospectos en 2022

    Cómo personalizar la página de resultados de búsqueda de productos de WooCommerce

    Cómo aceptar pagos ACH en WordPress

    Cómo agregar planes de pago «Compre ahora y pague después» a WordPress

    Cómo aceptar Apple Pay en WordPress (la forma FÁCIL)

  • Marketing por correo

    Cómo utilizar los blogs de invitados para crear su lista de correo electrónico

    Las métricas de marketing por correo electrónico en las que debe basarse cada campaña

    Cómo utilizar un formulario de contacto para crear su lista de correo electrónico

  • SEO

    Cómo corregir errores 404 de tipo de publicación personalizada en WordPress

    Aumente el tráfico a su sitio de WordPress en 6 sencillos pasos

    Cómo no seguir automáticamente enlaces externos en WordPress

    Cómo clasificar más alto en los motores de búsqueda

    Cómo eliminar enlaces rotos de su sitio de WordPress para siempre

    Guía para principiantes de SEO: introducción, preparación y jerga

    Investigación y uso de palabras clave de WordPress para SEO

    Mejore el SEO con vínculos de retroceso, velocidad del sitio y más

    Las 10 funciones más importantes de Yoast SEO para WordPress

  • Redes sociales

    Cómo agregar un recordatorio a una publicación de Instagram

    Cómo programar pines de Pinterest gratis

    Cómo volverse viral en Instagram: la guía para principiantes

    5 excelentes formas de diversificar las actualizaciones de sus redes sociales para generar más tráfico y participación

    ¿Puedes usar Instagram para hacer crecer tu negocio?

    6 formas efectivas de marcarte en las redes sociales

    6 consejos inteligentes de marketing en Instagram para impulsar su negocio

    Cómo convertir su perfil personal de Instagram en un perfil comercial

    Revisión de Shorby: Dirija el tráfico desde las redes sociales con páginas de destino y más

  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Sin resultados
Ver todos los resultados
ThemeLocal: consejos de blog que funcionan como magia
Sin resultados
Ver todos los resultados
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
Inicio WordPress Themes

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

Hace 8 meses
en Themes
Tiempo de leer:7 minutos de lectura
A A
0
Compartir en FacebookCompartir en Twitter

¿Quieres limitar el ancho de oEmbeds en WordPress?

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.

Share30Tweet19Send
Página anterior

5 complementos de WordPress para impulsar la participación del lector

Página siguiente

Cómo crear un menú de navegación flotante fijo en WordPress

Relacionado Mensajes

Cómo

Cómo verificar la batería de AirPod y cómo saber si los AirPods se están cargando (actualización de 2022)

Hace 6 horas
Cómo

Cómo cambiar entre su teclado de iPad de software y hardware (actualización de iPadOS 15)

Hace 19 horas
Cómo

Cómo encender la linterna y abrir la cámara desde la pantalla de bloqueo de tu iPhone

Hace 23 horas
Carga más
Página siguiente

Cómo crear un menú de navegación flotante fijo en WordPress

Deja una respuesta Cancelar la respuesta

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

RECOMENDADO

Integración de Yoast SEO y Wincher para WordPress

Hace 6 meses

Cómo agregar un formulario de pago de PayPal en WordPress (paso a paso)

Hace 3 meses

Samsung Galaxy S22 Ultra vs iPhone 13 Pro: ¿Cómo se comparan?

Hace 5 meses

Oppo Find X5 Pro vs OnePlus 10 Pro: ¿Cuál debería obtener?

Hace 4 meses

MacBook Air M2 vs MacBook Pro de 14 pulgadas: ¿Cómo se comparan?

Hace 4 semanas
ThemeLocal: consejos de blog que funcionan como magia

Ayudamos a emprendedores inteligentes a convertir sus blogs en negocios rentables. Somos un blog galardonado que ha estado ayudando a blogueros y emprendedores desde 2020.

Síguenos

Noticias recientes

Revisión de GP ReCyko 850mAh AAA

julio 4, 2022

Amazon ha reducido el precio de las AirTags de Apple antes del Prime Day

julio 4, 2022
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

© 2022 ThemeLocal. Tous droits réservés.

Sin resultados
Ver todos los resultados
  • Blogging
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • Marketing por correo
  • Monetización
  • SEO
  • Redes sociales
  • Tutoriales
  • Críticas
  • Consejo
  • Seguridad
  • Software y servicios
  • Generación de tráfico
  • Guia de principiantes
  • Escaparate

© 2022 ThemeLocal. Tous droits réservés.