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 crear tamaños de imagen adicionales en WordPress
Cuota
Notificación Mostrar más
Últimas noticias
Fotograma completo vs APS-C: ¿Qué sensor de cámara debería elegir?
Versus
Currys acaba de lanzar el mejor paquete de Pixel 7 hasta el momento
Ofertas
Cómo eliminar una lista de reproducción de tu iPhone
Cómo
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
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 > Tutoriales > Cómo crear tamaños de imagen adicionales en WordPress
Tutoriales

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

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

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

Contents
¿Por qué crear tamaños de imagen adicionales en WordPress?Registro de tamaños de imagen adicionales para su temaVisualización de tamaños de imagen adicionales en su tema de WordPressRegeneración de tamaños de imagen adicionalesHabilitación de tamaños de imagen adicionales para el contenido de su publicación

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 suave 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.

También podría gustarte

Cómo eliminar una lista de reproducción de tu iPhone

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

ETIQUETADO: adicionales, Cómo, crear, imagen, tamaños, 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 Cómo agregar la funcionalidad Guardar y continuar en formularios de WordPress
Artículo siguiente Cómo crear un formulario de búsqueda personalizado de WordPress (paso a paso)
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

https://blog.hootsuite.com/how-to-add-music-to-instagram-post/
Estrategia
Chat GPT-4 vs Chat GPT-3: ¿Qué hay de nuevo?
Versus
Oppo Find X6 Pro vs OnePlus 11: ¿Cómo se comparan?
Versus
Cómo cambiar el navegador predeterminado en Windows 11
Cómo
Cómo configurar la autenticación multifactor en NordVPN
Cómo
Chefree Air Fryer Grill AFG01 revisión
Reseñas de tecnología

También podría gustarte

Cómo

Cómo eliminar una lista de reproducción de tu iPhone

hace 50 mins 5 Minutos mínimos para leer
Cómo

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

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

Cómo configurar la autenticación multifactor en NordVPN

hace 17 horas 4 Minutos mínimos para leer
Versus

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

hace 18 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 19 horas 2 Minutos mínimos para leer
Cómo

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

hace 23 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 2 días 4 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?