Så visar du bildtexten under din utvalda bild i Divi

✏️ 2019-02-27 | Divi, Divi Nuggets, Tips & trix, Wordpress | 0 Kommentarer

Trött på att Divi inte visar bildtexten under din utvalda bild? Här hittar du lösningen.
Skribent: Victor Duse
Av Victor Duse

När du skapar ett inlägg i WordPress kan du ladda upp en Utvald bild (Featured Image) som visas mellan rubriken och brödtexten. För att Divi ska visa din bildtext under bilden så behöver du lägga till en rad kod. Vi visar hur och bjuder dessutom på en enkel CSS-stil.

Före

Bildtexten visas inte 🙁

Efter #1

Standarddesign

Efter #2

Med egen CSS

Tips! Innan du börjar bör du säkerställa att du använder ett barntema (child theme) till Divi. Annars skrivs dina ändringar över nästa gång  du uppdaterar Divi. Skapa ett gratis barntema »

1. Lägg till en Utvald bild

Börja med att skapa ett inlägg (post) och bläddra ner för att lägga till din utvalda bild. Det spelar ingen roll om du skapar inlägget med Divi Builder eller någon annan editor, så länge du använder temat Divi.

Skapa ett inlägg med en Utvald bild

2. Ange din bildtext

Välj en befintlig bild eller ladda upp en ny bild till mediabiblioteket. Skriv in din önskade bildtext i fältet ”Bildtext” till höger om bilderna. Klicka på knappen ”Ange utvald bild”

Skriv i din bildtext

3. Kopiera single.php

Tyvärr räcker inte detta för att bildtexten ska visas. Men lugn, det tar bara några minuter att locka fram den.

Börja med att ladda ner single.php från katalogen /wp-content/themes/Divi/

Detta gör du enklast med en ftp-klient som FileZilla eller via filhanteraren i kontrollpanelen på ditt webbhotell.

 

Utvald bild som inte visar bildtexten

3. Redigera single.php

Öppna din nedladdade fil för redigering i t.ex. NotePad ++ för Windows eller CotEditor för Mac.

Sök upp följande rad:

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

Lägg till den här raden direkt under raden ovan:

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

Spara och ladda upp din sprillans nya single.php i katalogen för ditt barntema, t.ex. /wp-content/themes/ditt-barntema/

Lägg in kod i single.php

Så här ska det se ut när du är klar.

Nu visas bildtexten under den utvalda bilden

Ändringen slår igen på alla inlägg, även de som är publicerade innan du uppdaterade single.php. 

Bonus: Snygga till bildtexten med CSS

Men visst ser bildtexten lite tråkig ut? Du kan påverka stilen via CSS-klassen .custom_caption. Här är ett enkelt exempel som du kan lägga in i Divi > Tema-anpassare > Extra CSS för att centrera texten, göra den kursiv och snygga till padding och radavstånd.

CSS:

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

Centrerad och kursiv bildtext

Det var allt för den här gången. Lycka till!

Relaterade inlägg

0 kommentarer

Skicka en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.