Kuidas näidata blogi postituse all autori lisainfot koos pildiga

Antud postituses õpetame sulle, kuidas saad lisada enda blogi alla kellegi kontaktid või lühikese informatsiooni. Kuna oleme viimase kuu jooksul muutnud täielikult enda kodulehe kujundust, siis kirjutan blogi postituse meie kodulehe näite põhjal. Vajalik on esmane programmeerimise oskus.

Miks üldse selline asi lehele lisada

Mis on kodulehe eesmärk? Üldiselt on kodulehe eesmärk midagi müüa või tutvustada. Selleks on aga vaja luua usaldus. Selline lisainformatiivne kast tutvustab inimest või vajadusel ka firmat ning annab mõne sõnaga mõista kellega on tegu või kelle postitust inimene parasjagu loeb.

Mida läheb vaja

Kõigepealt peaksid laadima enda wordpress kodulehele plugini Author Avatars. See on plugin, mis annab sulle võimaluse lisada kodulehe blogi postituste alla kirjutaja lisainfo. Kui see on tehtud, peaksid tegema endale konto www.gravatar.com lehel.
Lehekülg on spetsiaalselt tehtud selleks, et saaksid lisada sinna pildi. Seda lehte kasutavad paljud pluginid, kus on vajalik avatari laadimine. Otsi välja endast ilus pilt, ning lisa see sinna lehele. Vajalik on ka emaili teel kinnitus – lisa õige e-maili konto 🙂
Seejärel mine tagasi enda kodulehele – kasutaja osasse. Täida sealsed väljad. Soovitavalt nimi, hüüdnimi ning informatsioon sinust.

Avatari kuvamine läbi widgeti

Author Avatari saab kasutada mitut moodi ning üks mooduds selleks on kuvamine widgetina. See tähendab, et saad seda kuvada enda kodulehe widget asukohas. Näiteks, kui sul on blogi osas paremal või vasakakul pool sidebar, siis saad selle sinna lisada. Selleks peaksid minema Appearance -> Widgets ning tõstma widgeti enda õigesse asukohta ja täitma widgetis kohustuslikud väljad.

Avatari kasutamine läbi lühikoodi

Plugin on ülimalt hea, sest seda on võimalik kasutada ka lühikoodidega – shortcode’dega. Plugini lühikoodid leida siit lehelt.
Lühikoodide kasutamisel oleks mõistlik anda css stiil. Näiteks, meie oma näeb välja selline:
.shortcode-author-avatars .avatar {
float:left;
text-align:left;
margin:3px;
}
.shortcode-author-avatars div.author-list .user {
text-align: left;
background-color: #f6f6f6;
border: 1px solid #d4d4d4;
}

.shortcode-author-avatars .biography {
text-align: left;
padding-left: 15px;
padding-right: 15px;
}

Lisa see enda .css koodi ning sul ongi olemas just selline nagu meil :).