Her kommer endnu et nemt lille trick til at designe dine widgets forskelligt. Widgets er en indbygget funktion i WordPress, og er de “bokse” som dem du ser her til højre. Disse widgets kan indeholde forskellige data, som for eksempel seneste indlæg, en liste over dine kategorier osv, eller det kan være en tekst, et billede og meget andet.
Det hele foregår ved hjælp af Drag’n Drop i WordPress backenden, og som udgangspunkt får alle disse widgets den samme CSS class, og de vil så typisk være ens alle sammen.
Der kan være flere årsager til at man vil have en eller flere widgets til at “skille sig ud” og være mere fremtrædende. Det kan være en widget med kontakt informationer, signup til nyhedsbrev osv.
Som i kan se her på siden, så har jeg i skrivende stund widgets i 2 farver. De fleste er grå, men en skiller sig ud, ved at være orange (#d54e21), og dermed være lidt mere iøjnefaldende.
Sådan designer du dine widgets i WordPress
Opbygningen af temaer og CSS til WordPress kan varierer, og i dette eksempel tages udgangspunkt i temaet TwentyTen, som er et standard tema i WordPress.
Som du kan se på billedet har jeg en række aktive widgets. WordPress har allerede gjort det så smart at de giver hver type widget en unik CSS class, så den widget der viser “Nye indlæg” hedder
.widget_recent_entries
Og en standard tekst widget får en CSS class der hedder
.widget_text
Så ved at tilføje disse CSS classer til din CSS fil, kan du style dine widgets uafhængig af hinanden.
Denne løsning er fin hvis du vil fremhæve “Seneste kommentarer” eller lignende, men hvis du for eksempel styler din tekst widget, så vil dette slå igennem på alle dine tekst widgets. Så for at differencere yderligere har jeg valgt at bruge et plugin der hedder “Better Text Widget“, som ikke gør andet end at tilføje en ny type tekst widget til dit widget område, og den tilføjer så en ekstra CSS class, baseret på den overskrift du giver din tekst widget.
Da jeg har ofte bruger 2 eller flere tekst widgets, og kun vil have den ene til at skille sig ud, har jeg som i kan se på billedet, valgt at bruge “Better Text”-widget til den, og da overskriften er Lars Bachmann, har den fået en CSS class der hedder
.lars-bachmann
Temaet her på bloggen, er baseret på Twentyten, så derfor ser CSS’en for mine widgets således ud
#primary .widget-container {
padding: 8px 8px 8px 8px;
background: #999;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin: 0 0 10px 0;
color: #FFF;
}
Du skal være opmærksom på at dette kan hedde noget andet i dit WordPress tema.
Jeg har så bare tilføjet følgende CSS class.
#primary .lars-bachmann {
background: #d54e21;
}
Og som det fremgår, så gør den kode ikke andet end at skifte baggrundsfarven. Jeg kunne have ændret font, størrelse osv, ved at tilføje det til den class.
loading...
Andre indlæg der måske kunne interesserer dig:
- Opdatering og nyt design Da jeg startede med at blogge, var det på min egen hjemmelavede blog,...
- WordPress 2.7 på gaden Så er WordPress udkommet i version 2.7 Den nye WordPress har gennemgået en...
- Ændre længden på “excerpt” i WordPress Her kommer lige et lille “hack”til hvordan du kan ændre længden på uddraget...
- SEO boost din WordPress Når man som jeg til daglig arbejder med søgemaskineoptimering og WordPress, så glæder...
- Mister du dine læsere? Jeg var for nogen dage siden forbi Toprankblog.com, som havde et indlæg med...
Hej Lars,
Tak for et interessant indlæg.
Det skal jeg vidst lige prøve af engang og se om jeg kan hitte ud af
Super tip Lars
Jeg har overhovedet ikke styr på CSS, men det der må jeg da kunne finde ud af
@Kristian – Mon ikke du kan det? Det skulle være lige til.
@Dennis – Jeg er faktisk heller ikke nogen kæmpe CSS haj, men dette lille tip burde de fleste med bare lidt kendskab til WordPress og CSS finde ud af.
Hej Lars.
??
Tak for et super godt plugin. Hvorfor har jeg dog ikke fundet det noget før
Det gør helt sikkert tingene noget nemmere.
Pingback: Årets eneste blogpost | Saugstrup.org
Hej Lars,
Det er et rigtig fint trick du viste der – tak for det! Det skal jeg helt sikkert hjem og forsøge mig med
Udover at det giver et godt blikfang, så skaber det også noget mere “liv” på siden.
Hej Lars
Godt med et nyt indlæg
“Better Text Widget“ ser ud til at være et meget gammelt plugin som ikke har været opdateret i flere år, kan du bekræfte, at det også virker på WP 3.2.1 installationer, eller kører du stadig 2.7.1 som er den sidste officielle version som dette plugin er kompatibelt med? Og nej, det var ikke et hint til, at der har været meget stille på din blog
@Thomas – Jeg kører 3.2.1 og “Better Text Widget” fungere fint. Dette plugin er i princippet ret simpelt, og består af forholdsvis få linier kode, så der var ikke umiddelbart noget til hindre for at det ikke skulle virke på nyere versioner.
Og den med hintet tror jeg ikke på
Tal for et super godt tip. Det får jeg helt sikkert brug for.
Tager du i øvrigt altid udgangspunkt i TwentyTen/TwentyElleven temaerne når du designer?
Hej Lars
Jet bruger ofte TwentyTen som udgangspunkt, da jeg etferhånden kender det så godt, at det er meget nemmere at rette CSS og PHP filerne til, i stedet for at skrive noget helt nyt.
Men der er opgaver hvor jeg bruger andre løsninger.