Design dine widgets i WordPress


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.

Lars Bachmann

Iværksætter og Online nørd. Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

Prøv lige at se disse indlæg også!

10 kommentarer til Design dine widgets i WordPress

  1. 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 🙂

  2. Super tip Lars

    Jeg har overhovedet ikke styr på CSS, men det der må jeg da kunne finde ud af 😉

  3. Lars Bachmann siger:

    @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. 🙂

  4. 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.

  5. Martin siger:

    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.

  6. Thomas Zacchi siger:

    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 🙂

  7. Lars Bachmann siger:

    @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å 🙂

  8. Lars Skjoldby siger:

    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?

  9. Lars Bachmann siger:

    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. 😉

  1. 3. november 2011

    […] fik mig lidt af en forskrækkelse her til morgen, da jeg så at Lars Bachmann havde brudt vores usagte aftale om at holde vores blogs helt inaktive i […]

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *