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 Tutoriales

Cómo crear tamaños de imagen adicionales en WordPress

Hace 7 meses
en Tutoriales
Tiempo de leer:6 minutos de lectura
A A
0
Compartir en FacebookCompartir en Twitter

¿Quieres crear tamaños de imagen adicionales en WordPress?

De forma predeterminada, WordPress crea automáticamente varias copias de cargas de imágenes en diferentes tamaños. Además, los temas y complementos de WordPress también pueden crear sus propios tamaños de imagen.

En este artículo, le mostraremos cómo crear fácilmente tamaños de imagen adicionales en WordPress y usarlos en su sitio web.

¿Por qué crear tamaños de imagen adicionales en WordPress?

Normalmente, todos los temas y complementos populares de WordPress manejan muy bien los tamaños de imagen. Por ejemplo, su tema de WordPress puede crear tamaños adicionales para usar como miniaturas en páginas de archivo.

Sin embargo, a veces estos tamaños de imagen pueden no ajustarse a sus propios requisitos. Es posible que desee utilizar un tamaño de imagen diferente en un tema secundario o un diseño de cuadrícula de publicación.

Puede hacer esto creando tamaños de imagen adicionales en WordPress y luego llamando a estos tamaños cuando los necesite.

Dicho esto, echemos un vistazo a cómo crear tamaños de imagen adicionales en WordPress.

Registro de tamaños de imagen adicionales para su tema

La mayoría de los temas de WordPress, incluidos todos los temas principales de WordPress, admiten la función de miniaturas de publicaciones (imagen destacada) de forma predeterminada.

Sin embargo, si está creando un tema de WordPress personalizado, deberá agregar soporte para miniaturas de publicaciones agregando el siguiente código al archivo functions.php de su tema.

add_theme_support( 'post-thumbnails' );

Una vez que habilite la compatibilidad con miniaturas de publicaciones, ahora puede usar la funcionalidad de registrar tamaños de imagen adicionales mediante la función add_image_size ().

La función add_image_size se utiliza en el siguiente formato:

add_image_size( 'name-of-size', width, height, crop mode );

El código de ejemplo puede tener el siguiente aspecto:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Ahora, si se da cuenta, hemos especificado tres tipos diferentes de tamaños de imagen. Cada uno tiene diferentes modos, como cultivo duro, cultivo suave y altura ilimitada.

Cubramos cada ejemplo y cómo puede usarlos en sus propios proyectos.

1. Modo de cultivo duro

Como puede notar, hay un valor «verdadero» agregado después de la altura. Esto le dice a WordPress que recorte la imagen exactamente al tamaño que hemos definido (en este caso 120 x 120px).

Este método se utiliza para garantizar que todo sea exactamente proporcionado. Esta función recortará automáticamente la imagen ya sea desde los lados o desde la parte superior e inferior según el tamaño.

Ejemplo de imágenes de recorte duro

2. Modo de cultivo suave

De forma predeterminada, el modo de recorte su ave está activado, por lo que no ve ningún valor adicional agregado después de la altura. Este método cambia el tamaño de la imagen proporcionalmente sin distorsionarla. Por lo tanto, es posible que no obtenga las dimensiones que deseaba. Por lo general, coincide con la dimensión de ancho y las alturas son diferentes según la proporción de cada imagen. Una pantalla de ejemplo se vería así:

Ejemplo de cultivo suave

Modo de altura ilimitado

Hay ocasiones en las que tiene imágenes muy largas que desea usar en su diseño, pero desea asegurarse de que el ancho sea limitado. Por ejemplo, las imágenes infográficas tienden a ser muy largas y generalmente más anchas que el ancho del contenido.

Este modo le permite especificar un ancho que no romperá su diseño, dejando que la altura sea ilimitada.

Modo de altura ilimitado

Visualización de tamaños de imagen adicionales en su tema de WordPress

Ahora que ha agregado la funcionalidad para los tamaños de imagen deseados, echemos un vistazo a mostrarlos en su tema de WordPress. Abra el archivo de tema donde desea mostrar la imagen y pegue el siguiente código:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Nota: Este bit de código debe pegarse dentro del bucle de publicación.

Eso es todo lo que realmente tiene que hacer para mostrar los tamaños de imagen adicionales en su tema de WordPress. Probablemente deba envolverlo con el estilo que se adapte a sus necesidades.

Regeneración de tamaños de imagen adicionales

Si no está haciendo esto en un sitio nuevo, probablemente tendrá que volver a generar miniaturas.

La función add_image_size () solo genera los tamaños desde el punto en que se agregó al tema. Esto significa que las imágenes de publicaciones que se agregaron antes de la inclusión de esta función no tendrán nuevos tamaños.

Para solucionar este problema, debe volver a generar el nuevo tamaño de imagen para las imágenes más antiguas. Esto se facilita con el complemento llamado Regenerar miniaturas. Una vez que instale y active el complemento, se agregará una nueva opción en el menú: Herramientas »Regenerar miniaturas

Regenerar miniaturas

Verá la opción de regenerar la miniatura de todas las imágenes o solo de las imágenes destacadas. Recomendamos regenerar todas las imágenes para evitar comportamientos inesperados o imágenes rotas.

Para obtener más detalles, consulte nuestro artículo sobre cómo regenerar fácilmente nuevos tamaños de imagen en WordPress.

Habilitación de tamaños de imagen adicionales para el contenido de su publicación

Aunque ha habilitado tamaños de imagen en su tema, el uso está limitado solo a su tema, lo que no tiene ningún sentido.

Todos los tamaños de imagen se generan independientemente, así que ¿por qué no ponerlo a disposición del autor de la publicación para que lo utilice dentro del contenido de la publicación?

Puede hacer esto agregando el siguiente código al archivo de funciones de su tema.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail', 
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

No olvide guardar sus cambios después de agregar el código.

Ahora puede subir una imagen a una publicación o página de WordPress. En la configuración del bloque de imagen, verá los tamaños de imagen personalizados en la opción ‘Tamaño de imagen’.

Elija su tamaño de imagen personalizado dentro del editor de publicaciones

Usted y otros autores que trabajan en su sitio web ahora pueden seleccionar estas opciones de tamaño al agregar imágenes a publicaciones y páginas.

Esperamos que este artículo le haya ayudado a aprender a crear tamaños de imagen adicionales en WordPress. Es posible que también desee ver nuestro artículo sobre los mejores complementos de compresión de imágenes para WordPress y nuestra guía de rendimiento de WordPress para mejorar la velocidad de su sitio web.

Share30Tweet19Send
Página anterior

Cómo agregar la funcionalidad Guardar y continuar en formularios de WordPress

Página siguiente

Cómo crear un formulario de búsqueda personalizado de WordPress (paso a paso)

Relacionado Mensajes

Cómo

¿Las notificaciones de Apple Watch o el Centro de control no funcionan? Como arreglar

Hace 3 horas
Cómo

Cómo encender y usar Back Tap en el iPhone en iOS 14

Hace 4 horas
Cómo

iOS 16: Cómo agregar widgets a la pantalla de bloqueo de tu iPhone

Hace 8 horas
Carga más
Página siguiente

Cómo crear un formulario de búsqueda personalizado de WordPress (paso a paso)

Deja una respuesta Cancelar la respuesta

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

RECOMENDADO

Cómo instalar fuentes en Photoshop

Hace 6 días

Sony WH-1000XM5: lo que sabemos y lo que nos gustaría ver

Hace 3 meses

F1 2022: Todo lo que necesitas saber

Hace 4 días

Cross-site Scripting (XSS): ¿Qué es y cómo solucionarlo?

Hace 8 meses

Cómo quitar un fondo en Photoshop

Hace 3 días
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

¿HDMI ARC y CEC no funcionan? Prueba estas correcciones

junio 30, 2022

Los juegos gratuitos de julio de PS Plus están encabezados por una leyenda de PlayStation de todos los tiempos

junio 30, 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.