Hvordan lage et nytt tema med Tematisk

Hvordan lage et nytt tema med Tematisk


Den tematiske tema rammeverk for WordPress tilbyr en ren og kraftig fundament for å bygge nettstedet design. Dens kontrollpanel lar brukerne enkelt konfigurere og tilpasse aspekter av temaet layout og farger, noe som gjør det til et populært valg blant designere for sine kunder. Tematisk er bygget ved hjelp av tilpassede funksjoner og mal "kroker", og sysselsetter "Child Tema" å tillate designere til å lage forskjellig utseende. A Child Theme kan være utformet lik en vanlig webside. Plasser WordPress og Thematic malkodene innenfor bestemte områder av HTML-dokument som gjør at den kan brukes med den tematiske systemet.

Bruksanvisning

1 Opprett en ny mappe og gi den navnet etter det nye temaet. Åpne Tematisk tema-mappen og kopiere innholdet i "thematicsamplechildtheme" -mappen i din nye tema-mappen. Dette er grunnlaget for den nye Child Theme.

2 Start din favoritt HTML eller tekst editor og åpne "style.css" fil funnet i Child Theme mappe. Denne filen vil inneholde den primære layout informasjon for temaet. Begynn med å erstatte "Theme Name" verdi med ønsket tema navn. Legg inn et "Theme URL", som kan være ditt nettsted adresse. Rediger beskrivelsen, forfatter og forfatter URL, men la «Mal: Tematisk" entry som det er. Dette innlegget forteller WordPress å bruke Tematisk som tema rammer.

3 Fjern følgende linje linke til Tematisk er "default.css" file:

@import URL ( '../ tematisk / bibliotek / stiler / default.css');

Du vil ønske å lage dine egne stiler for Child Theme, og den enkleste måten å gjøre det på er å kopiere standardstilene til den nye stilark.

4 Åpne "default.css" filen som ligger i Tematisk template katalogen under "bibliotek> stiler." Kopier hele innholdet på siden og lim den under det eksisterende innholdet i Child temaets style.css dokument. Redigere stiler som du vil, og lagre endringene. Hvis du ønsker å lage dine egne stiler for fonter og tekst, gjentar du disse trinnene for å fjerne linjen linke til "typography.css" og kopiere innholdet i din style.css dokumentet som skal redigeres.

5 Åpne "functions.php" fil fra din Child Theme mappe. Denne filen kontrollerer hvilken informasjon som vil bli trukket inn ved hver Tematisk krok i ramme maler eller dine egne erstatnings maler. Redigere eksisterende funksjoner der ønsket. Du kan også lage dine egne "action kroker" eller legge til egendefinerte tema filtrene til dette dokumentet. Den Tematisk nettsted inneholder et omfattende bibliotek av dokumentasjon for begge.

For eksempel, hvis du bygger din nye Child Theme å bruke HTML5-standarden, kan du sette inn følgende filter mellom "}", og på bunnen av dokumentet ">?":

funksjon childtheme_create_doctype ($ innhold) {

$ Content = '<! DOCTYPE html>';

$ Content = "\ n".;

. $ Content = '<- [if (gte IE 9) |! (IE)]!> <! ->! <Html class = "no-js" lang = "no"> <- <[ endif] -> " ';

returnere $ innhold;

}

add_filter ( 'thematic_create_doctype', 'childtheme_create_doctype');

6 Åpne filene ligger i Tillegg-mappen inne i Tematisk malen mappen. Hver av disse filene inneholder funksjoner knyttet til bestemte deler av koden som utgjør den generelle design. Hvis du har opprettet en layout i HTML, kopiere funksjonene i din Child Theme er functions.php fil og redigere "$ content =" verdier med egendefinert kode. Bare en kodelinje bør gå inn i hver innhold uttalelse, og du kan legge til flere hvis nødvendig ved å skrive inn en ny linje som for eksempel:

$ Content = ''. "\ N";

7 Last opp din nye Child Theme til hovedsiden for "wp-content / themes" katalogen og aktivere den i din WordPress administrasjonspanel. Du kan fortsette å redigere stiler og finpusse funksjons innholdet i Utseende Editor, mens du ser endringene i nettleseren.

Hint

  • Bruk Operas "Inspiser Element" fra høyreklikkmenyen for enkelt å bestemme hvilke maler som skal brukes på et element i malen og redigere der det er nødvendig. En lignende funksjon er tilgjengelig i Firefox ved å laste ned "Firebug" add-on.
  • Rediger functions.php fil med omhu og sørg for at du forstår syntaksen. Hvis du får en blank hvit skjerm, gjennom koden for manglende semikolon eller apostrof og re-lese Theme Hooks referansehåndboken hvis nødvendig.