Accentsconagua

Efectuarea unei teme cu oase Noțiuni de bază

Cod
Share

Folosim o temă de pornire pentru a construi un nou site receptiv.

De ce Bones?

Bones este o temă inițială complet gratuită (nu un cadru) construită pe baza celor mai recente practici. Acesta servește ca o bază excelentă pentru a construi o temă WordPress. Aceasta este o listă de funcții incomplete despre Bones:

  • construit pe placa de bază HTML5
  • prima abordare mobilă
  • proiectare receptivă
  • vine cu LESS și SASS
  • backback pentru browserele mai vechi
  • curată secțiune antet
  • documentație excelentă

Pasul 1: Descărcați oasele

Puteți descărca tema starter de pe site-ul Themble.

Pasul 2: Directorul temelor

Despachetați fișierul ZIP în wp-content / teme și redenumiți directorul său la oase.

Pasul 3: Setări tematice

Setați tema în interfața WP admin la Bones (la Aspect / Teme).

Pasul 4: Pagina

Acesta este modul în care site-ul arată cu tema Bones de bază. Rezoluția este de 1440x900 pixeli.

Pasul 5: Tematica datelor de bază

Acesta este locul unde se află numele temei, descrierea, autorul, versiunea și așa mai departe. style.css fișierul este în directorul tematic. Practic, temele bazate pe Bones nu folosesc aici stiluri reale, ci doar datele pentru afișarea informațiilor din interfața de administrare.

 / ************************************************* *********************** Denumirea temei: Kotkoda Tema URI: http://wp.tutsplus.com Descriere: Acest site a fost construit folosind Tema Dezvoltare Bones . Autor: Adam Burucs URI autor: http://burucs.com Versiune: 1.0 Tag-uri: flexble-width, micro-format, RTL-support-license Licență: URI pentru licență GPL2: http://www.gnu.org/ licențe / gpl-2.0.html

Pasul 6: Descărcați un compilator LESS sau Sass

Acest instrument este necesar pentru a compila și a minimiza stilurile de oase într-un fișier CSS de producție. Am ales WinLESS pentru că lucrez la Windows 7.

Pasul 7: Explorarea stilurilor oaselor (mai puțin)

În oase / biblioteca / mai puțin puteți găsi toate fișierele pentru a particulariza tema. Acestea sunt stilurile de care avem nevoie:

  • 1030up.less - desktop style sheet
  • 1240up.less - mega dimensiune stylesheet monitor
  • 2x.less - stiluri pentru ecrane Retina
  • 481up.less - 481px + stiluri
  • 768up.less - tabletă și foaie de calcul pentru desktop-uri mici
  • base.less - baza pentru dispozitivele mobile
  • ie.less - aici numim toate stilurile pentru IE, dar fără interogările mass-media
  • login.less - putem modifica pagina de autentificare a WordPress
  • mixins.less - acesta este locul unde folosim mai puțin amestecuri și constante
  • normalize.less - resetare generală pentru stilurile implicite
  • style.less - stiluri principale, utilizează toate celelalte fișiere

Pasul 8: Fundalul principal și culoarea textului

Folosim fundal portocaliu si gri-gri (@ Kotkoda-gri) text de culoare în base.less. (Utilizați culoarea pentru a seta culoarea fontului și proprietatea de fundal pentru a seta culoarea de fundal.)

 corp font-family: Georgia, serif; font-size: 14px; înălțimea liniei: 1,5; culoare: @ kotkoda-gri; fundal: # ED7626; / * culoarea de fundal principal * /

Și asta intră mixins.less. Puteți defini o variabilă de culoare în LESS cu următoarele: @ Kotkoda-gri este numele variabilei de culoare și după colon este codul de culoare (# 19171A). Fiecare nume de variabilă începe cu @ semn.

 @ kotkoda-gri: # 19171A;

Pasul 9: Legătura, capitolul și culoarea postului Meta

Pentru link-uri culoarea va fi @alb, dar @ Alertă galben- vor fi folosite pentru stiluri de hover și focus. Utilizați proprietatea de culoare pentru a seta valoarea. Fiecare rubrica si rubrica cu link-uri va fi @ Kotkoda-gri. Avem nevoie de un gri mai inchis pentru asta, valoarea initiala a fost # 999. Cu culoare putem să o stabilim # 444 (care este egal cu # 444444).

 / ********************* STILURI LINK ********************* / a, a: vizitat culoare: @ albă; / * pe hover * / &: hover, &: focalizare culoare: @ alertă-galben;  H1, h2, h3, h3, h4, .h4, h5, .h5 font-family: sans-serif; redare de text: optimizabilitate; greutatea fontului: 500; / * dacă intenționați să utilizați webfonturi, asigurați-vă că verificați greutățile http://css-tricks.com/watch-your-font-weight/ * / / * eliminând decorarea textului din toate linkurile de titlu * / a  text-decoration: nici unul; culoare: @ kotkoda-gri;  ... / * post meta * / .meta culoare: # 444; ...

Pasul 10: Pagina noastră după aceste modificări

Acesta este modul în care arată în lățime de 600 de pixeli.

La jumatatea drumului

Vom ajunge la sfârșitul primei părți a acestei serii de tutorial.

Cod
×