Inclusión de imágenes en nuestro theme WP

WordPress nos lo pone fácil a la hora de añadir imágenes en el contenido de nuestros artículos. Sin embargo existen dos tipos de imágenes que deberemos habilitar en nuestro tema si queremos incluirlas: los thumbnails (miniaturas de post o imágenes destacadas) y el logo de la cabecera.

THUMBNAILS (imágenes destacadas o miniaturas de post)

Para añadir los thumbnails a nuestro tema WordPress, lo primero que haremos será añadir al archivo functions.php el siguiente código:

La primera línea de código nos habilita los thumbnails en nuestro tema. La última línea, nos establece el tamaño de la imagen en píxeles, en nuestro caso 150 x 150. Si no incluimos el tercer parámetro, WordPress redimensionará la imagen proporcionalmente. Con el tercer parámetro ‘true’, la recortará para encuadrarla en la medida establecida.

Luego, para que aparezca, deberemos introducir en el post el siguiente código dentro del ‘loop’:

En nuestro caso, debemos modificar el archivo articulo.php que se encuentra en el subdirectorio del tema ‘partes’, que quedará así:

Recordemos que debemos hacer lo mismo en la plantilla de artículos únicos, single.php.

 

Referencia de funciones del Codex de WordPress

Para el tratamiento de las imágenes destacadas en los artículos, el Codex de WordPress nos ofrece las siguientes funciones:

  • add_theme_support( $feature, $arguments )

Habilita un tema o plugin a registrar soporte de alguna cierta característica de tema. Si se llama desde un tema, debe estar en el archivo functions.php. $feature es una cadena obligatoria, que debe ser una de las siguientes características: ‘post-formats’, ‘post_thumbnails’, ‘custom-background’, ‘custom-header’, ‘custom-logo’, ‘automatic-feed-links’, ‘html5’, ‘title-tag’, ‘editor-style’, ‘widgets’, ‘menus’. Los $arguments se pasan en una matriz opcional, por defecto ‘true’.

Se puede hacer selectivamente:

  • add_image_size( $name, $width, $height, $crop )

Registra un nuevo tamaño de imagen. Los nombres $name de imagen son: ‘thumb’ y ‘thumbnail’ (son lo mismo), ‘medium’, ‘large’ y ‘post-thumbnail’. En $width indicamos el ancho en píxeles, en $height la altura. $crop es un valor lógico que indica ‘true’ para recortar a las dimensiones especificadas empleando un posicionamiento centrado, o bien una matriz con dos valores: ‘x_crop_position’, que acepta ‘left’, ‘center’ o ‘right’; y ‘y_crop_position’, que acepta ‘top’, ‘center’ o ‘bottom’.

  • set_post_thumbnail_size( $width, $height, $crop )

Selecciona las medidas de la imagen destacada de los artículos, mediante las medidas indicadas en $width y $height, y se le indica la forma de encajarla mediante $crop (ver add_image_size).

  • has_post_thumbnail( $post )

Chequea si un post tiene una imagen destacada. Devuelve valor lógico ‘true’ o ‘false’. Dentro del ‘loop’ no precisa el argumento $post, que le indica el ‘id’ del post.

  • the_post_thumbnail( $size, $attrib )

Muestra la imagen destacada del post. Cuando un tema añade soporte a imágenes destacadas, un tamaño de imagen destacada especial es registrada, el cual difiere del tamaño de imagen destacada gestionado a través de ‘Ajustes > Media’. En $size podemos indicar el tamaño mediante una cadena o mediante una matriz de valores anchos y altos en píxeles.

  • get_the_post_thumbnail( $post, $size, $attr )

Equivalente a the_post_thumbnail, pero se le puede pasar el ‘id’ del post, y devuelve la imagen para emplearla con PHP.

  • get_post_thumbnail_id( $post_id )

Devuelve el ‘id’ de la imagen destacada del post indicado en $post_id.

 

Los tamaños de las imágenes

Los tamaños de las imágenes por defecto de WordPress son ‘Thumbnail’, ‘Medium’, ‘Large’ y ‘Full Size’. En administración de medios en ‘Admin > Ajustes > Medios’, se pueden configurar estos tamaños. Pero también podemos definir nuestros propios tamaños.

Por ejemplo, para añadirlos individualmente, mediante:

the_post_thumbnail( array( 50, 50 ) );

Pero, en el archivo functions.php podemos definir un tamaño propio, que luego sea llamado en el archivo de plantilla:

add_image_size( ‘personal’, 50, 50 );

Asimismo, podemos seleccionar directamente en functions.php el tamaño que tendrán los thumbnails:

set_post_thumbnail_size ( 50, 50, true );

 

Dar estilo a las imágenes destacadas

Las imágenes destacadas tienen una class=”wp-post-image”. También tienen una clase dependiente del tamaño mostrado. Se les puede dar estilo con estos selectores CSS:

También se le puede asignar una clase propia:

the_post_thumbnail( ‘thumbnail’, array( ‘class’ => ‘destacada’ ) );

 

Ejemplos de uso

Para vincular una imagen destacada al permalink del post:

Para vincular todas las imágenes destacadas al permalink de sus correspondientes posts, la modificación la haremos en functions.php:

 

ENCABEZADOS

Los encabezados personalizados permiten a los propietarios de los sitios web subir su propio logo al sitio, para emplearlo en la parte superior de algunas páginas. Este puede ser personalizado y recortado por el usuario mediante el editor visual de la sección ‘Apariencia > Cabecera’ del panel de administración. Además, puede colocar texto debajo o arriba de la cabecera. Para soportar capas fluidas y diseño adaptativo, estas cabeceras deben ser flexibles.

Las cabeceras se incorporan en un tema mediante get_custom_header(), pero primero deben ser añadidas al fichero functions.php mediante:

add_theme_support( ‘custom-header’ );

Cuando activas la personalización de encabezados, puedes configurar diversas opciones mediante el paso de argumentos a la función add_theme_support(). Puedes especificar las opciones de configuración mediante una matriz:

Para crear una cabecera básica, flexible y personalizable con texto, emplear el siguiente código:

Para seleccionar una imagen de cabecera personalizable:

Para utilizar cabeceras flexibles:

 

En el fichero header.php debemos introducir:

Por defecto, el usuario tendrá la opción de sí o no mostrar el texto de cabecera sobre la imagen. No hay opción para forzar el texto al usuario, pero si quieres eliminar el texto de cabecera completamente, debes establecer el parámetro ‘header-text’ => false. Esto eliminará el texto de cabecera y la opción de cambiarlo.

 

Hasta aquí hemos llegado en este artículo. Hemos visto cómo trabajar los thumbnails y el logo de la cabecera de nuestro sitio web. Podríamos habernos introducido más en el formateo CSS, pero eso prefiero dejarlo un poco a la experimentación de cada uno, y lo trataremos un poco más en profundidad en nuestro próximo artículo de implantación de Bootstrap. Por otro lado, también hemos visto de soslayo la personalización de temas desde el panel de administración, lo cual también profundizaremos en un próximo artículo de esta serie.

En el próximo artículo veremos cómo paginar nuestros artículos, y veremos formas de disponerlos en nuestro sitio web.

Deja un comentario

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