Accentsconagua

Creare un tema con le ossa come iniziare

Codice
Share

Stiamo utilizzando un tema di avviamento per creare un nuovo sito reattivo.

Perché ossa?

Bones è un tema di base completamente gratuito (non un framework) costruito con le migliori pratiche più recenti. Serve come base eccellente per costruire un tema WordPress. Questa è una lista di funzionalità incompleta su Bones:

  • costruito sulla piastra HTML5
  • primo approccio mobile
  • design reattivo
  • viene fornito con LESS e SASS
  • fallback per i browser più vecchi
  • sezione dell'intestazione più pulita
  • ottima documentazione

Passaggio 1: Scarica Bones

È possibile scaricare il tema di avvio dal sito Themble.

Passaggio 2: directory temi

Disimballare il file ZIP in wp-content / themes e rinominare la sua directory in ossatura.

Passaggio 3: Impostazioni del tema

Imposta il tema nell'interfaccia di amministrazione di WP su Bones (su Aspetto / Temi).

Step 4: La pagina

Ecco come appare il sito Web con il tema Bones di base. La risoluzione è 1440x900 pixel.

Passaggio 5: Dati di base del tema

Questo è il luogo del nome del tema, descrizione, autore, versione e così via. Il style.css il file è nella directory dei temi. Fondamentalmente i temi basati su Bones non usano qui stili reali, ma solo i dati per mostrare le informazioni nell'interfaccia di amministrazione.

 / ************************************************* *********************** Nome del tema: URI del tema Kotkoda: http://wp.tutsplus.com Descrizione: Questo sito è stato creato utilizzando il tema di sviluppo delle ossa . Autore: Adam Burucs Autore URI: http://burucs.com Versione: 1.0 Tag: flexble-width, translation-ready, microformati, supporto linguaggio-rtl Licenza: URI licenza GPL2: http://www.gnu.org/ licenze / gpl-2.0.html

Passaggio 6: Scarica un compilatore LESS o Sass

Questo strumento è necessario per compilare e minimizzare gli stili di Bones in un file CSS di produzione. Ho scelto WinLESS perché sto lavorando su Windows 7.

Passaggio 7: esplorare gli stili Bones (LESS)

Nel ossa / library / meno directory puoi trovare tutti i file per personalizzare il tema. Questi sono gli stili di cui abbiamo bisogno:

  • 1030up.less - foglio di stile del desktop
  • 1240up.less - foglio di stile per monitor di dimensioni ridotte
  • 2x.less - stili per gli schermi Retina
  • 481up.less - Stili 481px +
  • 768up.less - tablet e piccolo foglio di stile desktop
  • base.less - la base per i dispositivi mobili
  • ie.less - qui chiamiamo tutti gli stili per IE, ma senza le query multimediali
  • login.less - possiamo modificare la pagina di accesso di WordPress
  • mixins.less - è qui che utilizziamo mixine e costanti MENO
  • normalize.less - reset generale per stili predefiniti
  • style.less - stili principali, usa tutti gli altri file

Passaggio 8: Colore di sfondo e testo principale

Usiamo lo sfondo arancione e il grigio medio (@ Kotkoda-grigio) colore del testo in base.less. (Usa il colore per impostare il colore del carattere e la proprietà dello sfondo per impostare il colore di sfondo).

 body font-family: Georgia, serif; font-size: 14px; altezza della linea: 1,5; colore: @ kotkoda-grey; sfondo: # ED7626; / * colore di sfondo principale * /

E questo entra mixins.less. È possibile definire una variabile di colore in LESS con quanto segue: @ Kotkoda-grigio è il nome della variabile colore e dopo i due punti è il codice colore (# 19171A). Ogni nome di variabile inizia con @ cartello.

 @ kotkoda-gray: # 19171A;

Step 9: Link, Heading e Post Meta Color

Per i link il colore sarà @bianca, ma @ Allarme giallo sarà usato per gli stili di hover e focus. Usa la proprietà color per impostare il valore. Saranno tutti i titoli e le intestazioni @ Kotkoda-grigio. Abbiamo bisogno di un grigio un po 'più scuro per questo, il valore originale era # 999. Con il colore regola possiamo impostarlo # 444 (che è uguale a # 444444).

 / ********************* LINK STYLES ********************* / a, a: visited color: @white; / * su hover * / &: hover, &: focus color: @ alert-yellow;  ... ... h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 font-family: sans-serif; text-rendering: ottimizelegibility; font-weight: 500; / * Se hai intenzione di usare i webfonts, assicurati di controllare i tuoi pesi http://css-tricks.com/watch-your-font-weight/ * / / * rimuovendo la decorazione del testo da tutti i link dei titoli * / a  decorazione del testo: nessuna; colore: @ kotkoda-grey;  ... / * post meta * / .meta color: # 444; ...

Step 10: La nostra pagina dopo queste modifiche

Ecco come appare in 600 pixel di larghezza.

A metà strada

Veniamo alla fine della prima parte di questa serie di tutorial.

Codice
×