Hvordan bruke filtre med Tematisk

Hvordan bruke filtre med Tematisk


Som en WordPress tema rammeverket er Tematisk best sammen med et barn tema for optimal ytelse og tilpasning. Barne temaer tillate deg å bygge en tilpasset web-design ved hjelp av standard HTML og CSS, og deretter integrere Tematisk og WordPress funksjonalitet med "kroker" og "filtre." Disse krokene, eller "malkodene," pull i kode og HTML opprettet av WordPress eller Tematisk å produsere layout og funksjonalitet av temaet. Hver av disse krokene har et filter navn. Når du bygger et barn tema, kan du lage dine egne funksjoner som forteller disse filter kroker hva du utgang til den ferdige tema. Fordelen er å kunne lage en egendefinert oppsett som bruker Tematisk funksjonalitet uten å endre noen malfiler.

Bruksanvisning

1 Opprett en ny mappe på skrivebordet som heter "FilterTest." Dette vil inneholde barnet ditt tema filer. Åpne en tekst eller HTML editor og lage en ny fil som heter "style.css". Dette stil huser noen egendefinerte stiler du velger å opprette, og kreves av WordPress å oppdage og aktivere den nye tema. Den "style.css" vil også erklære som mal satt til å bruke, som i dette tilfellet er Tematisk. For å oppnå dette, kopier følgende inn i "style.css" og redigere Forfatter Navn med din egen:

/ *

Tema Navn: FilterTest

Forfatter Navn: Ditt navn

Mal: tematisk

* /

2 Last ned en kopi av Tematisk og åpne tema-mappen. Åpne "header.php" filen i tekst eller HTML-editor. Du vil merke at denne filen bruker en rekke malkodene og tema kroker i stedet for å inneholde en statisk HTML layout. Disse krokene tillate designere til å lage sine egne oppsett gjennom barne tema, men bruker den tematiske tema rammeverk for å håndtere de administrative aspekter av temaet. Legg merke til "thematic_create_stylesheet ();" kroken. Normalt ville du trenger å kopiere stiler fra Tematiske ulike stilark inn i barnets tema er "style.css", men du kan filtrere "thematic_create_stylesheet ();" å knytte dem til overskriften i stedet, slik at du kan administrere egendefinerte stiler på barnet ditt tema stilark eksklusivt.

3 Opprett en ny ny fil som heter "functions.php." Denne filen skal inneholde egendefinerte funksjoner og filtre som WordPress vil bruke til å erstatte den definerte kroken innenfor Tematisk med egendefinert kode du oppretter.

4 Kopier følgende egendefinerte funksjonen i din "functions.php" file:

<? Php

funksjon childtheme_create_stylesheet () {

$templatedir = get_bloginfo('template_directory');

$ Stylesheetdir = get_bloginfo ( 'stylesheet_directory');

?>

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ templatedir> / bibliotek / stiler / reset.css" />

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ templatedir> / bibliotek / stiler / typography.css" />

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ templatedir> / bibliotek / stiler / images.css" />

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ templatedir> / bibliotek / oppsett / 2c-l-fixed.css" />

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ templatedir> / bibliotek / stiler / 18px.css" />

& Lt; link rel = "stylesheet" type = "text / css" href = "& lt;? Php echo $ stylesheetdir> / style.css" />

<? Php

}

add_filter ( 'thematic_create_stylesheet', 'childtheme_create_stylesheet');

?>

I eksempelet ovenfor, du har opprettet en egendefinert funksjon som heter "childtheme_create_stylesheet.". Deretter opprettet to egendefinerte variabler, "$ templatedir" og "$ stylesheetdir", for å bruke som snarveier i stedet for å gjenta det samme WordPress mal tag over og over. Den egendefinerte HTML kommer etterpå. Denne koden vil vises der "thematic_create_stylesheet ();" krok, eller mal tag, blir brukt. Den siste linjen forteller WordPress å "filtrere" denne kroken med den tilpassede funksjonen for å få dette gjort.

5 Bruk et filter for å endre dokumenttypen av de genererte HTML-sider. Som standard Tematiske vilje utgang sider som XHTML 1.0 Transitional. For å endre dette til HTML5, kopiere og lime inn følgende filter satt inn i "functions.php" file like over den avsluttende PHP-koden (>?) Nederst i dokumentet:

funksjon childtheme_create_doctype ($ innhold) {

$ Content = '<! DOCTYPE html>';

$ Content = "\ n".;

returnere $ innhold;

}

add_filter ( 'thematic_create_doctype', 'childtheme_create_doctype');

Dette filteret vil erstatte "thematic_create_doctype ();" i Tematisk header med en HTML5 "DOCTYPE" erklæring, der det tidligere følgende linje vil bli generert:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6 Lag dine egne filtre og plassere dem før den avsluttende PHP-koden, og bruke riktig syntaks for å unngå å forårsake feil i nettleseren din. Spar både for barnet ditt tema filer til "FilterTest" -mappen. Last det opp til din server under "wp-content / themes" og aktivere den nye tema i WordPress administrasjonspanel for å se resultatene. Fortsett å legge til filtre og redigere dine barn tema filer ved hjelp av WordPress tema editor for mer umiddelbare resultater.

Hint

  • Kopiere Tematisk mal filen til barnet ditt tema og deretter tilpasse oppsettet, fjerne eller legge kroker, eller endre stiler. Dette er ofte lettere for designere som ønsker å drastisk endre temaet layout.
  • Unngå å legge for mye HTML til temaet maler seg selv, da dette tar bort fra kraften og fleksibiliteten til å bruke Tematisk som ramme. Alltid vikle din kode tilleggene i kroker og filtre for å holde temaet funksjonalitet intakt.