Muestre su título debajo de la imagen destacada en Divi Posts

✏️ 2020-04-17 | Divi, Divi, Divi Nuggets | 0 Comentarios

Agregue algunos fragmentos de código y verá los subtítulos de la imagen destacada.
Skribent: Victor Duse
Por Victor Duse

Al crear una publicación en WordPress, puede cargar una imagen destacada que se muestra entre el título y la copia del cuerpo. Para que Divi muestre su título debajo de esta imagen, debe agregar una línea de código. Te mostramos cómo y compartimos un estilo básico de subtítulos CSS. ¡Vamos!

Antes

El subtítulo no muestra 🙁

Después de #1

Diseño de subtítulos predeterminado

Después de #2

Con CSS personalizado

¡Importante! Asegúrese de utilizar un tema secundario Divi. De lo contrario, los cambios se sobrescribirán la próxima vez que actualice Divi. Crea tu propio tema infantil gratis »

1. Agregue su imagen destacada

Comienza creando una publicación y desplázate hacia abajo para configurar tu imagen destacada. No importa si creas la publicación con Divi Builder o cualquier otro editor, siempre y cuando uses el tema Divi.

Establecer imagen destacada en WordPress

2. Agregue el título de la imagen

Seleccione una imagen existente o cargue una nueva imagen en la biblioteca multimedia de WordPress. Introduzca el título deseado en el campo «Caption» situado a la derecha de las imágenes. Haga clic en el botón «Establecer imagen destacada»

Elija la imagen destacada

3. Descargar single.php

Desafortunadamente, esto no es suficiente para que se muestre el título. Pero no te preocupes, sólo toma unos minutos para arreglar. Comience descargando el archivo single.php desde el directorio /wp-content/themes/Divi/ en el directorio de su sitio web. Utilice un cliente ftp como FileZilla o utilice el administrador de archivos en el panel de control de su cuenta de alojamiento web.

 

Utvald bild som inte visar bildtexten

3. Edita y sube single.php

Abra el archivo descargado y edítelo en un editor, por ejemplo NotePad ++ para Windows o CotEditor para Mac.

Encuentra esta línea de código:

print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height );

… y agregue esta línea de código a continuación:

echo '<p class="custom_caption">'.get_the_post_thumbnail_caption().'</p>';

Guarde y cargue su archivo actualizado single.php en su carpeta de temas de niño, por ejemplo /wp-content/themes/your-childtheme/

L'gg en kod i single.php

Single.php debería tener un aspecto similar al siguiente cuando haya terminado.

¡Voilà! El título ahora se muestra debajo de la imagen destacada

La actualización surtirá efecto en todas las publicaciones que contengan imágenes destacadas con subtítulos, independientemente de si se publicaron antes o después de esta actualización.

Bonus: Estilo de su imagen de leyenda con CSS personalizado

Pero el pie de foto se ve un poco aburrido, ¿verdad? Puede aplicar estilo al texto del título mediante la clase CSS .custom_caption. Aquí hay un estilo simple que puede usar agregando el código siguiente a Divi > Theme > Customizer CSS adicional. Alineará el texto, lo hará cursiva y fijar el relleno y la altura de línea (que es bueno si el título de la imagen es lo suficientemente largo como para causar un salto de línea).

Css:

.custom_caption {
padding: 0px 8px;
text-align: center;
font-style: italic;
line-height: 1.3em;
}

Centrerad och kursiv bildtext

Eso es todo por ahora. ¡Buena suerte!

Artículos Relacionados

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.