Hvordan Sett CSS-kode i en WordPress Widget

Ikke alle widgets passe utseendet på bloggen din. Med mindre du utviklet widgeten selv, ble det opprettet for et bredt publikum av noen som ikke kunne forutsi hvordan produksjonen vil se på hver type blogg. Noen ganger kan du legge Cascading Style Sheet (CSS) kode til widgets ved hjelp av sine alternativer felt i "Widgets" skjerm av WordPress dashbordet, men ofte du trenger å referere til den genererte HTML-kode og skrive CSS for det i "stil Css "fil.

Bruksanvisning

1 Logg deg inn på WordPress dashbordet fra "wp-admin" katalog av ditt nettsted. Naviger til "Utseende" og klikk på "Widgets" linken for å laste "Widgets" skjerm. Du ser sidepaneler og en liste over widgets på denne siden.

2 Klikk på navnet til en sidebar å utvide den og vise widgets. Utvid widget alternativene ved å klikke på ned-pilen som peker.

3 Legg HTML-koder som inneholder inline CSS-kode i en alternativer innen widgeten. Ikke alle alternativer feltene kan ta HTML eller CSS torsk. For å teste dette, inngang litt HTML og klikk "Lagre" for å se om HTML opphold eller blir slettet. Du kan alltid legge til HTML og CSS til "Text" widget som følger med hver installasjon av WordPress. Klikk på den blå "Lagre" -knappen i widgeten alternativet boksen for å lagre endringene.

4 Naviger til "Utseende" og klikk på "Editor" link hvis du couldn''t legge CSS-koden direkte inn i widgeten gjennom feltene. Finn "functions.php" filen og klikk koblingen. Finn "register_sidebar" koden og gjøre linjen som inneholder "before_widget" ser slik ut:

'Before_widget' => '<div id = "% 1 $ s" class = "widget% 2 $ s"> ",

Endre "after_widget", slik at det lukker "<div>" tagge du åpnet:

'After_widget' => '</ div> ",

5 Last bloggen din i en annen fane eller et vindu i nettleseren. Høyreklikk på nettleserskjermbildet, og velg å vise kildekoden. Finn "<div>" koder rundt widgeten du vil endre, og notere sin ID-attributtet. Koden vil se omtrent slik ut:

<Div id = "arkiv-3" class = "widget widget_archive">

6 Gå tilbake til WordPress dashbordet og naviger til "Rediger Temaer" skjermen igjen. Finn "style.css" filen nederst på skjermen, og klikk på koblingen. Legg inn CSS for widgeten på slutten av filen som dette:

arkiver-3 {

Konstruksjon: verdi;

}

Erstatt "eiendom: verdi;" med en CSS eiendom-verdi-par som "color: red;". Oppdatere filen når du er ferdig med redigeringen.

Hint

  • Sikkerhetskopiere tema filer før du redigerer dem. Hvis du ved et uhell føre til en "hvit skjerm" PHP feil, reupload de originale filene med en FTP-klient for å få tilbake til WordPress.