Uso de tamaños de imagen personalizados en su tema y cambio de tamaño de imágenes existentes

En este tutorial, aprenderá cómo generar imágenes de tamaño personalizado para que las use en su tema de WordPress. ¿Por qué usar tamaños de imagen personalizados? Por lo tanto, no tendrá que editar cada imagen que cargue en la Biblioteca de medios. De esta manera, cada imagen cargada obtendrá todos los tamaños de imagen definidos personalizados generados automáticamente. Se puede insertar en la publicación o página utilizando la Galería de medios o desde el bucle. Continúa leyendo para descubrir cómo.


Paso 1: Definición de tamaños de imagen personalizados

Para que su tema sea compatible con tamaños de imagen personalizados, debe editar el archivo functions.php que se encuentra en su carpeta de temas. Abra las funciones de su tema.php y verifique si tiene una línea que se vea así:

add_action ('after_setup_theme', 'function_name');

Este gancho se llama durante la inicialización de un tema. Generalmente se usa para realizar acciones básicas de configuración, registro e inicialización para un tema, donde "function_name" es el nombre de la función que se va a llamar.

Si encontró una línea como esa, entonces también encuentre el método con el mismo nombre que el segundo parámetro de ese método add_action.

Si no puede encontrar una línea que parezca, debe agregarla y también crear un nombre de método como el segundo parámetro:

add_action ('after_setup_theme', 'setup'); configuración de funciones () //…

Ahora, para habilitar las miniaturas de publicaciones para su tema, agregue las siguientes líneas en el método definido anteriormente:

configuración de funciones () //… add_theme_support ('post-thumbnails'); // Esta función habilita el soporte posterior a la miniatura para un tema // Para habilitar solo las publicaciones: // add_theme_support ('post-thumbnails', array ('post')); // Para habilitar solo para publicaciones y tipos de publicaciones personalizadas: // add_theme_support ('post-thumbnails', array ('post', 'movie')); // Registrar un nuevo tamaño de imagen. // Esto significa que WordPress creará una copia de la imagen de publicación con las dimensiones especificadas // cuando subas una nueva imagen. Registre tantos como sea necesario. // Agregar tamaños de imagen personalizados (nombre, ancho, altura, recorte) add_image_size ('Featured-image', 620, 200, true); //…

Paso 2 Visualización de imágenes con tamaños personalizados

Insertar una imagen de tamaño personalizado en una publicación usando Media Gallery

Para insertar una imagen dentro de una publicación o página de la galería de medios, inserte el siguiente filtro en el archivo functions.php:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ tamaños) $ custom_sizes = array ('Featured-image' => 'Featured Image'); devuelve array_merge ($ tamaños, $ tamaños personalizados); 

Lo que hace este código, es que combina sus tamaños de imagen personalizados con el definido en WordPress, por lo que el resultado será la siguiente imagen.

Insertar imagen de tamaño personalizado dentro del bucle

Para mostrar, por ejemplo, la imagen que se denominó "imagen destacada", dentro del bucle debe agregar estas líneas:

 'Foto principal' ) ); terminara si; ?>

Esto comprobará si la publicación / página tiene alguna imagen adjunta y generará una Etiqueta que muestra la imagen en el tamaño deseado..


Paso 3 Cambiar el tamaño de las imágenes existentes

Para esta tarea hay un complemento para ayudar, Regenerar miniaturas. Puede regenerar todas, un lote o imágenes individuales. Si cambia el tamaño de las imágenes y las regenera, las imágenes con las dimensiones anteriores no se eliminarán..


Ejemplo

Digamos que le gustaría hacer uso de esta función dentro de su tema. Desde el / wp-content / themes / nombre-del-tema carpeta abierta funciones.php con tu editor de texto favorito. Si tu tema no tiene after_setup_theme acción definida, debe agregar uno. El código para los tamaños de imagen personalizados se agregará a ese método definido.

Nota: estos son nombres de tamaño de imagen reservados: pulgar, miniatura, mediano, grande, posterior a la miniatura. Agregar un tamaño de imagen personalizado con un nombre reservado anulará sus valores predefinidos.

add_action ('after_setup_theme', 'setup'); configuración de funciones () //… add_theme_support ('post-thumbnails'); // Esta característica habilita el soporte posterior a la miniatura para un tema add_image_size ('header', 600, 200, true); // imagen de cabecera add_image_size ('custom-size1', 400, 200); // 400 píxeles de ancho y 200 píxeles de alto, redimensionados proporcionalmente add_image_size ('tamaño personalizado2', 400, 200, verdadero); // 400 píxeles de ancho y 200 píxeles de alto, recortado //…

Editando el content.php o content-single.php o content-page.php archivos, puede mostrar la imagen con el tamaño adecuado para el encabezado de la publicación colocándola debajo o debajo del título de la publicación.

Para hacer que los otros dos tamaños personalizados puedan seleccionarse desde la Galería multimedia, agregue el siguiente filtro:

add_filter ('image_size_names_choose', 'custom_image_sizes_choose'); function custom_image_sizes_choose ($ tamaños) $ custom_sizes = array ('custom-size1' => 'My custom size 1', 'custom-size2' => 'My custom size 2'); devuelve array_merge ($ tamaños, $ tamaños personalizados); 

Un ejemplo real de cómo funciona esto y cómo se puede usar: gurde.com


Referencias

  • add_action ()
  • after_setup_theme
  • add_theme_support ()
  • add_image_size ()
  • the_post_thumbnail ()

Siguiente

Cómo generar una galería con tamaños de imagen personalizados y agregar algo de JavaScript para ampliar las imágenes y alternar entre ellas (mouse y teclado).