Accentsconagua

Lag et tema med bein Komme i gang

Kode
Share

Vi bruker et forrettstema for å bygge et nytt responsivt nettsted.

Hvorfor Bein?

Bones er et helt gratis startstempel (ikke et rammeverk) bygget med de nyeste beste praksisene. Det fungerer som en utmerket base for å bygge et WordPress-tema. Dette er en ufullstendig funksjonsliste om Bones:

  • bygget på HTML5-kjeleplaten
  • mobil første tilnærming
  • responsiv utforming
  • kommer med mindre og sass
  • fallback for eldre nettlesere
  • renere overskrift seksjon
  • god dokumentasjon

Trinn 1: Last ned ben

Du kan laste ned startetemaet fra Themble-siden.

Trinn 2: Temaer Katalog

Pakke ZIP-filen ut i wp-content / themes og endre navn på katalogen til bein.

Trinn 3: Temainnstillinger

Sett temaet i WP admin-grensesnittet til Bones (ved utseende / temaer).

Trinn 4: Siden

Slik ser nettstedet ut med det grunnleggende Bones-temaet. Oppløsningen er 1440x900 piksler.

Trinn 5: Tema grunnleggende data

Dette er stedet for tema navn, beskrivelse, forfatter, versjon og så videre. De style.css filen er i temakatalogen. I utgangspunktet bruker temaene basert på Bones ikke noen ekte stiler her, men bare dataene for å vise info i admingrensesnittet.

 / ************************************************* *********************** Tema Navn: Kotkoda Tema URI: http://wp.tutsplus.com Beskrivelse: Dette nettstedet ble bygget ved hjelp av Bones Development Theme . Forfatter: Adam Burucs Forfatter URI: http://burucs.com Versjon: 1.0 Tags: flexble-width, translation-ready, microformats, rtl-språk-støtte Lisens: GPL2 Lisens URI: http://www.gnu.org/ lisenser / GPL-2.0.html

Trinn 6: Last ned en LESS eller Sass Compiler

Dette verktøyet er nødvendig for å kompilere og redusere stiler av Bones til en produksjon CSS-fil. Jeg valgte WinLESS fordi jeg jobber med Windows 7.

Trinn 7: Utforsker benene (mindre)

I bones / bibliotek / mindre katalog finner du alle filene for å tilpasse temaet. Dette er stilene vi trenger:

  • 1030up.less - desktop stilark
  • 1240up.less - mega størrelse skjerm stilark
  • 2x.less - stiler for retina skjermbilder
  • 481up.less - 481px + stilarter
  • 768up.less - nettbrett og små skrivebordsstiler
  • base.less - basen for mobile enheter
  • ie.less - her kaller vi alle stiler for IE, men uten medieforespørsler
  • login.less - Vi kan endre påloggingssiden til WordPress
  • mixins.less - Det er her vi bruker MINERE mixiner og konstanter
  • normalize.less - generell tilbakestilling for standardstiler
  • style.less - hovedstiler, bruker alle andre filer

Trinn 8: Hovedbakgrunn og tekstfarge

Vi bruker oransje bakgrunn og midgrå (@ Kotkoda-grå) tekstfarge i base.less. (Bruk farge for å angi fontens farge og bakgrunnsegenskapen for å angi bakgrunnsfargen.)

 kropp font-family: Georgia, serif; skriftstørrelse: 14px; linjehøyde: 1,5; farge: @ kotkoda-grå; bakgrunn: # ED7626; / * hoved bakgrunnsfarge * /

Og dette går inn i mixins.less. Du kan definere en fargevariabel i LESS med følgende: @ Kotkoda-grå er fargevariabelnavnet og etter kolon er fargekoden (# 19171A). Hvert variabelt navn starter med @ skilt.

 @ kotkoda-grå: # 19171A;

Trinn 9: Link, Overskrift og Post Meta Color

For koblinger vil fargen være @hvit, men @ Varsel-gul vil bli brukt til sving og fokus stiler. Bruk fargeegenskapen til å angi verdien. Hver overskrift og overskrift med lenker vil være @ Kotkoda-grå. Vi trenger litt mørkere grå for dette, den opprinnelige verdien var # 999. Med farge regelen vi kan sette den til # 444 (som er lik # 444444).

 / ********************* LINK STYLES ********************* / a, a: besøkte farge: @white; / * på hover * / &: svever, &: fokus color: @ alarm-yellow;  ... ... h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; tekstgjenvinning: optimizelegibility; font-weight: 500; / * Hvis du skal bruke webfonter, vær sikker på å sjekke dine vekter http://css-tricks.com/watch-your-font-weight/ * / / * fjerne tekstdekorasjon fra alle overskriftslinjene * / a  tekst-dekorasjon: ingen; farge: @ kotkoda-grå;  ... / * post meta * / .meta farge: # 444; ...

Trinn 10: Vår side etter disse modifikasjonene

Slik ser det ut i 600 piksler bredt.

Halvveis der

Vi kommer til slutten av den første delen av denne opplæringsserien.

Kode
×