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.
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.
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”
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.
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/
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;
}
Det var allt för den här gången. Lycka till!
0 kommentarer