Blog Desarrollo Web Wordpress

Como añadir leyenda en una imagen destacada de WordPress

leyenda en una imagen destacada de Wordpress

Las imágenes destacadas son una parte esencial de cualquier publicación o página en WordPress, y agregar una leyenda en una imagen destacada de WordPress a veces mejora el contexto de la publicación o nos muestra algo importante que deseamos mostrar en la publicación o página. Sin embargo, a veces es necesario añadir una leyenda a la imagen destacada para proporcionar contexto adicional o atribuir el crédito adecuado. En esta guía, te mostraremos cómo puedes hacerlo de manera sencilla.

Paso 1: Agregar código a WordPress

archivo functions

Por defecto, WordPress no muestra la leyenda de las imágenes destacadas en el tema. Para solucionar esto, necesitas hacer un pequeño ajuste en el archivo de tu tema.

  1. Acceder a los Archivos de tu Tema: Desde tu hosting ingresa al archivo «functions.php» de tu theme-child y ábrelo para editar.
  2. Agregar código: Agregar el siguiente código al final del archivo «functions.php» y guárdalo.
function add_image_caption_to_featured_image($html, $post_id, $post_thumbnail_id, $size, $attr) {
$caption = get_post_field('post_excerpt', $post_thumbnail_id);
if ($caption) {
$html .= '<span class="wp-caption-text">' . $caption . '</span>';
}
return $html;
}
add_filter('post_thumbnail_html', 'add_image_caption_to_featured_image', 10, 5);

Paso 2: Preparar la Imagen Destacada

leyenda en imagen destacada

Antes de añadir la leyenda, asegúrate de que tienes la imagen destacada lista y cargada en la biblioteca de medios de WordPress.

  1. Accede a tu Panel de Administración de WordPress: Ingresa con tus credenciales.
  2. Ir a Medios > Biblioteca: Aquí puedes cargar una nueva imagen o seleccionar una ya existente.
  3. Subir o Seleccionar la Imagen: Si subes una nueva imagen, asegúrate de rellenar el campo de “Leyenda” en la parte derecha. Si ya tienes la imagen, selecciona la imagen y añade la leyenda en el campo correspondiente.

Paso 3: Añadir la Imagen Destacada a tu Publicación

imagen destacada
  1. Crear o Editar una Publicación/Página: Ve a Publicaciones > «Añadir nueva entrada» o página y/o «Selecciona una existente para editar«.
  2. Establecer Imagen Destacada: En el editor de la publicación, busca la opción “Imagen destacada” en la barra lateral derecha y selecciona la imagen que has preparado anteriormente.

Ahora ya tienes la «Leyenda» lista en tu imagen destacada de WordPress y puedes modificar la «Leyenda» en cualquier momento, solo seleccionando la imagen a la cual deseas modificar.

Modificar el Diseño de una Leyenda en una Imagen Destacada de WordPress

Para incluir la Leyenda dentro de la imagen destacada, puedes agregar el siguiente código en tu CSS PERSONALIZADO dentro de tu theme de WordPress.

<!-- DISENO EN LEYENDA IMAGEN DESTACADA -->
.wp-caption {
position: relative;
}
.wp-caption img {
display: block;
}
.wp-caption-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #29ABE2; /* Fondo celeste */
padding: 5px;
text-align: center;
box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
color: #fff; /* Texto blanco */
}
<!-- DISENO EN LENYENDA IMAGEN DESTACADA -->

Acá te muestro el antes y el después con el código para el diseño de una leyenda en una imagen destacada de WordPress.

cambiar diseño en leyenda imagen destacada

Conclusión

Añadir una leyenda en una imagen destacada de WordPress puede parecer un poco complicado, pero con los pasos adecuados, es un proceso bastante sencillo. Esto no solo mejora la accesibilidad de tu sitio, sino que también proporciona a tus lectores información adicional valiosa. ¡Prueba estos pasos y dale a tus imágenes destacadas el contexto que merecen!

administrator
Especialista en seguridad, desarrollo web, ecommerce y marketing digital. Desarrollador desktop con Embarcadero. Amplia experiencia en servidores Linux con WHM/CPanel, SEO & posicionamiento Web y análisis de malware.

    Deja una respuesta

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


    El periodo de verificación de reCAPTCHA ha caducado. Por favor, recarga la página.