Transforma tu HTML estático en un tema WordPress con imágenes destacadas

Si has leído los artículos previos de la serie «Creación de un tema de WordPress a partir de HTML estático», ya debes tener un entendimiento básico de cómo convertir un diseño estático en HTML en un tema de WordPress completamente funcional. Ahora que sabemos cómo identificar y agregar las secciones de nuestro tema, es el momento de comenzar a pensar en los detalles finos, como las imágenes destacadas.

¿Qué son las imágenes destacadas en WordPress?

En WordPress, las imágenes destacadas son una forma de agregar una imagen destacada a una publicación o página. Normalmente, esta imagen aparece en la página de inicio del sitio web o en la página de inicio de una categoría específica. Esto permite a los visitantes ver rápidamente el contenido que les interesa y hace que la navegación del sitio web sea más fácil y efectiva.

¿Por qué son importantes las imágenes destacadas?

Aparte de la funcionalidad de navegación, las imágenes destacadas también son importantes para la accesibilidad y la experiencia del usuario. Está demostrado que las imágenes capturan la atención de los visitantes y pueden aumentar el tiempo de permanencia en la página. También pueden ayudar a romper el texto y hacer que el contenido sea más fácil de leer y comprender.

Cómo agregar imágenes destacadas en WordPress

El proceso de agregar imágenes destacadas en WordPress es relativamente sencillo. Primero, debemos asegurarnos de que la función de imágenes destacadas esté habilitada en nuestro tema de WordPress. Para hacer esto, podemos agregar el siguiente código en el archivo functions.php de nuestro tema:

<?php
add_theme_support( 'post-thumbnails' );
?>

Una vez que hemos habilitado la función de imágenes destacadas, podemos agregar una imagen destacada a cualquier publicación o página. Para hacer esto, simplemente seguimos los siguientes pasos:

  1. Creamos o editamos una publicación o página.
  2. Hacemos clic en el enlace «Agregar imagen destacada» que se encuentra en el panel de edición.
  3. Seleccionamos o cargamos la imagen que deseamos utilizar como imagen destacada.
  4. Hacemos clic en «Establecer imagen destacada».
  5. Guardamos la publicación o página.

Cómo agregar imágenes destacadas en nuestro tema personalizado

Si estamos construyendo un tema personalizado, es posible que queramos agregar la imagen destacada directamente en el archivo de plantilla. Podemos hacer esto utilizando la función the_post_thumbnail(). Esta función se utiliza para mostrar la imagen destacada asociada a una publicación o página específica.

Para hacer esto, primero debemos asegurarnos de que estamos dentro del bucle de WordPress. A continuación, simplemente agregamos el siguiente código donde queremos que aparezca la imagen destacada:

<?php if ( has_post_thumbnail() ) {
  the_post_thumbnail();
} ?>

También podemos pasar argumentos opcionales a esta función para personalizar la imagen, como su tamaño y los atributos alt y title. Por ejemplo:

<?php if ( has_post_thumbnail() ) {
  the_post_thumbnail( 'medium', ['alt' => 'Una imagen destacada personalizada', 'title' => 'Opcionalmente, podemos agregar un título para la imagen'] );
} ?>

Para finalizar

En resumen, agregar imágenes destacadas a nuestro tema de WordPress es una parte importante del proceso de diseño y desarrollo. No solo mejora la navegación y la accesibilidad del sitio web, sino que también puede mejorar la experiencia del usuario y aumentar el tiempo de permanencia en la página. Con los conocimientos y habilidades adecuados, agregar imágenes destacadas en WordPress es un proceso sencillo y efectivo.

Entradas relacionadas

Deja una respuesta

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