Siden den opprinnelige lanseringen i 2003 har WordPress utviklet seg fra et enkelt bloggeverktøy til en kraftig og populær nettstedsbygger og et omfattende CMS (content management system) brukt av omtrent 38% av nettstedene på nettet! Gitt nettstedet ditt, hvis nettstedet ditt må skille seg ut fra mengden, må du opprette WordPress-tema som er unikt for nettstedet ditt.
I virkeligheten er det ikke rart at WordPress klarte å gjøre det så langt og bli så populært.
Mengden fleksibilitet den har og funksjonene den er vert for, tillater bred bruk på tvers av forskjellige nettstedstyper. Dessuten er WordPress ganske enkelt å bruke med liten eller ingen tidligere erfaring med koding eller nettutvikling overhodet.
Dette er årsakene bak WordPress suksesshistorie og er nettopp årsakene nesten 40 prosent av alle nettsteder på nettet drives av denne programvaren.
WordPress har en rekke praktiske funksjoner som lager webutvikling og programmering less komplisert og mer tilgjengelig for alle.
Introduksjon til WordPress Theme Development
En annen populær funksjon som gjør WordPress så populær er temaene. Temaet er rett og slett en samling stilark og maler som definerer hvordan et WP-drevet nettsted vil se ut og vises.
Programvaren gir brukeren et bredt utvalg av forskjellige redigeringsalternativer når det gjelder temaer fra WP-adminområdet.
Hundrevis av WordPress-temaer er helt gratis eller med mange andre til en rimelig pris på noen titalls dollar.
Faktisk er WordPress.org vert for en enorm database med temaer i temakatalogen.
Andre nettsteder som Themeforest tilbyr også mange premium-temaer fra forskjellige utviklere.
Hver av disse temaene har forskjellig layout, designmønster og funksjoner.
Det er opp til brukeren å finne en som passer best til nettstedets behov. I de fleste tilfeller lages temaer med tanke på bestemte bransjer eller yrker, noe som betyr at for eksempel restaurantiere enkelt kan finne temaer med bestillingsfunksjoner.
Selv om det er mange fantastiske temaer som passer dine behov, er det trygt å si at hvis du vil gjøre noe fremragende, må du ganske mye gjøre det selv. Hvis du ikke klarer å programmere, et godt alternativ alternativet ville være å gå for en frilans programvareutvikler (prisene kan variere avhengig av ulike faktorer).
I denne artikkelen skal vi imidlertid gå over ALLE trinnene som er nødvendige for å lage ditt eget WordPress-tema for ditt WP-drevne nettsted. Vi tar en titt på alle viktige aspekter for å sikre at du får det beste WordPress har å tilby.
Å komme i gang med å lage ditt helt eget tema som nybegynner kan ved første øyekast virke som en enorm oppgave.
Det er imidlertid ikke så komplisert å lage et tilpasset tema fra bunnen av i WP. Du trenger ikke å være en webutvikler, hvis du har det grunnleggende om koding med PHP, kan du enkelt lære hvordan du lager et WordPress-tema.
Dessuten kan det være ganske givende å lage ditt eget tema, spesielt når du ser sluttresultatet live på nettstedet ditt.
Opprette ditt første tilpassede WordPress-tema
For å komme i gang med å lage et WordPress-tema, trenger du noen grunnleggende ting:
- Et WordPress-nettsted
- En god vertplan
- Litt tidligere erfaring med ting som lokale iscenesettelsesmiljøer
- Grunnleggende forståelse av CSS- og PHP-kodingsspråk
- Et startbilde
Forstå WordPress-malhierarkiet
I WordPress er malfiler (byggesteinene til temaet ditt) modulære og gjenbrukbare.
Malfiler er ansvarlige for å generere sidene på ditt WP-nettsted. Noen av disse filene brukes på nesten alle sidene dine, mens andre bare brukes under spesifikke omstendigheter.
Ta en titt på diagrammet nedenfor – det forklarer hvordan WordPress malhierarkiet er organisert.
Malfiler vil avgjøre det generelle utseendet på innholdet på nettstedet. Hvis du vil opprette en topptekst, vil du bruke en header.php filen, eller hvis du vil legge til en kommentarseksjon, bruker du comments.php filen.
For å forstå malhierarkiet, bør du vite at WordPress bruker noe som kalles en “spørringsstreng” for å bestemme hvilken mal eller malsett som skal brukes til å opprette og vise en bestemt side.
Spørringsstrengen er informasjon som er lagret i lenken til hver del av nettstedet du prøver å endre. I enklere termer analyserer WordPress informasjonen og utfører søk gjennom malhierarkiet for å finne en malfil som samsvarer med den oppgitte informasjonen i spørringsstrengen.
Dette er i utgangspunktet et opplegg der WP ser etter matchende malfiler hver gang sider lastes inn.
For eksempel hvis du skriver inn følgende URL http://example.com/post/this-post, WordPress finner de nødvendige malfilene i følgende rekkefølge:
- Filer som samsvarer med sneglen, i dette tilfellet, denne posten.
- Filer som samsvarer med post-ID.
- En generisk enkeltpostfil, som single.php.
- En arkivfil, i dette tilfellet, archive.php.
- De index.php filen.
Den siste filen (index.php) kreves i hvert tema, da det er standard (eller tilbakeslag) hvis ingen andre filer kan bli funnet i samsvaringsprosessen. strek (et WP-starttema) har de vanligste filene. Disse filene som er inkludert i dette temaet fungerer rett ut av esken.
Du kan redigere dem hvis du har lyst til å eksperimentere, eller trenger å lage noen egendefinerte funksjoner på nettstedet ditt.
Hva er et WordPress starttema?
Et starttema er et bare-bein grunnlag av et tilpasset WordPress-tema.
Du kan bruke det som grunnlag for å få ditt eget unike tema i gang. Med et starttema kan du bygge ditt eget WordPress-tema uten å måtte designe eller kode et helt tema fra bunnen av.
WordPress-starttemaer inneholder alle filene som definert i hierarkiet ovenfor.
Ved å bruke et starttema kan du få en bedre forståelse av hvordan WordPress fungerer fordi det viser deg det grunnleggende, strukturen til et tema og hvordan de forskjellige delene fungerer sammen.
Et spesialbygd WordPress-tema kan brukes på en rekke forskjellige nettstedstyper, fra presentasjoner og kataloger til nettbutikker bygget med WooCommerce, sosiale medier eller hva annet du måtte trenge nettstedet ditt for.
Å velge starttemaer (for eksempel UnderStrap, Underscores og Bones) vil bidra til å lage WordPress-tema som åpner for å bruke en rekke forskjellige alternativer.
Å bruke Underscores kan være det beste valget for nybegynnere, da det tilbyr de viktigste funksjonene. Det kommer også fra en langvarig og pålitelig utvikler. Dette betyr at det er mer sannsynlig å være kompatibelt, sikkert og pålitelig, og vil ha bedre støtte på sikt.
Hvorfor bør du bruke et starttema
Som nevnt ovenfor er et starttema et fundament, en tegning som hjelper deg med å komme opp med et unikt nettsted. Den fungerer allerede fullt ut, men mangler fremdeles de definerende nøkkelfunksjonene som gjør et brukervennlig nettsted.
I hovedsak må den fremdeles utformes og konfigureres riktig.
Når det er sagt, er starttemaer ideelle for de som har liten eller ingen erfaring med WordPress eller nettutvikling generelt. Det er en fin måte å bli introdusert for temaet temabygging og lære det grunnleggende på WP-drevne nettsteder.
Et WordPress Starter-tema sparer deg tid og krever liten eller ingen bakgrunnskunnskap i koding og resten av WordPress-kompleksitetene.
Du kan utnytte mange års hardt arbeid fra utviklerne av starttemaet og bruke disse retningslinjene for å få en bedre forståelse av hvordan WordPress og temadesign fungerer.
Populære eksempler på startertemaer
- strek – Et pålitelig og kjent starttema som gir nybegynnere et forsprang i temautvikling. Understrekk er ganske grunnleggende og perfekt for å komme i gang med en gang hvis du har alle nødvendige verktøy. Temaet er flott for å forstå begrepene temautvikling. Understrekk handler om å starte et nytt prosjekt som mer bør sees på som en verktøysett i stadig utvikling less som et rammeverk.
- Roots – Dette starttemaet gir deg en tilnærming som er mer rettet mot utviklere, med sin markering basert på HTML5 Boilerplate. Den støtter også mer avanserte verktøy som Bootstrap og Grunt. Roots starttema inkluderer også en temapakke som hjelper deg med å holde prosessen strømlinjeformet og eliminerer å ringe de samme maldelene gjentatte ganger.
Roots bruker også CSS forprosessorer og støtter LESS, en bakoverkompatibel språkutvidelse for CSS, som kan øke hastigheten på prosessen med å utvikle temaet ditt.
Når det er sagt, gir Roots en mer pragmatisk tilnærming og krever litt mer kunnskap fra utvikleren.
6 grunnleggende trinn for å utvikle WordPress-temaet ditt
Etter å ha dekket det grunnleggende, er du endelig klar til å komme i gang med å lage et WordPress-tema.
Siden denne artikkelen er mer rettet mot nybegynnere, bruker vi et starttema, men du er også fri til å lage alt fra bunnen av uten noen starttemaer.
Hvis det er ruten du vil ta, ikke glem at du trenger mye mer tid og trenger å fordype deg litt dypere i koding, og webutvikling generelt.
1. Sette opp utviklingsmiljøet
Det første trinnet i prosessen bør være å skape et utviklingsmiljø.
Dette er i utgangspunktet en server du trenger å installere på datamaskinen din for å administrere og utvikle lokale WP-nettsteder. Et utviklingsmiljø lar deg utvikle nettstedet ditt trygt, i tillegg til at du gir deg flere muligheter for å skape et lokalt miljø.
Ved hjelp av DesktopServer er en av de ideelle stiene du kan ta. Det er en enkel måte å få en lokal og rask versjon av WP som er kompatibel med både Windows og Mac. Velg gratisversjonen, registrer og last ned den, og installer deretter programvaren.
Når du har installert, åpner du programmet og konfigurerer ditt lokale miljø.
Det er en ganske enkel prosess, og du vil være klar på få minutter. Etter oppsettet har du et nettsted og utviklingsmiljø som både fungerer og ser ut som alle live WP-nettsteder.
2. Last ned og installer et starttema
De mest grunnleggende starttemaene (som Underscores) er enkle for første omganger å komme i gang med.
I motsetning til de fleste grunnleggende temaer tillater Underscores å tilpasse alternativer gjennom Avanserte alternativer (som forfatter og beskrivelse) etter å ha navngitt temaet ditt.
Du kan også legge til Syntactically Awesome StyleSheets eller SASS som er et forhåndsbehandlet CSS-språk som lar deg introdusere funksjoner som hekking, matematikkoperasjoner, bruk av variabler osv.
Etter å ha valgt er alt du trenger å gjøre å klikke på Generer for å laste ned .zip-filen med starttemaet ditt.
Nå installerer du filen på ditt lokale nettsted. Hvis du har gjort alt riktig, kan du nå se en grunnleggende versjon av ditt tilpassede WordPress-tema.
Forstå WordPress-kjerneprinsippene
Nå som det grunnleggende er satt opp, kan du komme deg på jobb. Før du dykker inn i tilpasningsprosessen, må du imidlertid bli kjent med kjerneprinsippene og komponentene i å lage et WordPress-tema ved hjelp av kjerneprinsippene til WP.
Først og fremst må du lære om malfiler, de viktigste byggesteinene for ethvert tema i WP.
Malfiler bestemmer i utgangspunktet hvordan layout og innhold skal vises på nettstedet ditt. Hvis du vil opprette en topptekst, vil du bruke header.php fil, mens comments.php brukes til å vise eventuelle kommentarer.
Som diskutert ovenfor bruker WP malhierarkiet for å bestemme hvilken malfil den vil velge for å utføre innholdet en bruker ber om / trenger. Du kan jobbe med disse filene som de er, men gitt at du er her for å lage WordPress-tema, vil det meste av arbeidet være å tilpasse disse filene etter dine behov.
Når vi snakker om WP-kjerneprinsipper, bør du også forstå konseptet bak The Loop.
Det er koden WP primært bruker for å vise innholdet ditt, og det finnes i alt innhold som viser malfiler, som i index.php or sidebar.php. Det er et ganske komplekst emne, men heldigvis følger det med starttemaet (hvis du bruker Underscores), noe som betyr at prosessen din bør være enklere.
Du må forstå konseptet og jobbe med det. Ta en titt på noen av eksemplene i lenken over, for å bedre forstå hvordan sløyfen brukes og hvordan du kan tilpasse koden etter dine behov.
3. Opprett temadetaljer
temaer er ikke bare kosmetiske komponenter.
Det er mange forskjellige funksjoner du kan legge til på nettstedet ditt, noe som kan forbedre funksjonaliteten. Vi skal diskutere hvordan du implementerer noen få grunnleggende funksjoner for å krydre nettstedet ditt.
Legge kroker kan gjøre det mulig å kjøre forskjellige PHP-handlinger, vise annen info eller sette inn stylingdata etter behov.
Kroker er kodebiter som settes inn i malfiler. De fleste av dem er direkte implementert som en del av kjernen i WordPress, men noen kroker er ganske nyttige når du også tilpasser temaer.
Her er en liste over de vanligste krokene og deres roller:
- wp_head () – er lagt til element i header.php. Det muliggjør skript, stiler og annen informasjon som kjører når siden begynner å lastes inn.
- wp_footer () – vanligvis lagt til footer.php før tag, brukes ofte til å sette inn kode for Google Analytics eller annen kode som må vises på hver side, men som er for tung til å lastes inn i overskriften.
- wp_meta () – Vanligvis funnet på sidebar.php, og det brukes ofte til å inkludere flere skript (for eksempel en taggsky).
- kommentarform () – Lagt til comments.php rett før filen lukkes tag for å vise kommentarer.
Når du bruker Underscores, vil disse krokene allerede være inkludert i temaet, men det er alltid en god ide å lære mer om dem og se alle tilgjengelige kroker. Kroker lar deg utvide funksjonene til ditt tilpassede tema.
4. Legge til stiler ved hjelp av CSS
Cascading Style Sheets eller CSS definerer utseendet til innholdet på nettstedet du oppretter.
Ved å bruke style.css filen, som allerede er inkludert i temaet ditt, kan du redigere noen av stilene som finnes her og lagre dem for å se hvordan det endrer designet ditt. Som standard inneholder den bare den grunnleggende stylingen.
CSS brukes til å muliggjøre presentasjon og separering av innholdet på nettstedet ditt, alt fra layout til skrift og innhold. CSS kan bidra til å gjøre innholdet på nettstedet ditt mer tilgjengelig og mer fleksibelt.
Å gå i dybden om hvordan du bruker styling med WordPress-temaer kan bli ganske hårete og ligger utenfor omfanget av denne artikkelen. Hvis du ikke er så sikker på dette, kan det være lurt å lese mer om CSS før du går videre.
5. Inkludert JavaScript
Hvis du legger til JavaScript-filer til temaet ditt, kan det øke interaktive funksjoner og muligheter og få et bedre fungerende nettsted. Det er spesielt nyttig når du vil innlemme tredjeparts plugins på nettstedene dine, som spesifikke video- eller lydspillere, ting som glidebrytere, popup-støtte og andre tredjepartsbiblioteker for å skape avansert funksjonalitet.
For å bruke Javascript med det egendefinerte nettstedet ditt, kan du ringe med syntaksen nedenfor for å legge til skriptfilen til temaet.
Alternativt kan du bruke skriptet direkte i din header.php malfilen mellom metakoder og stilarkoblingen, slik du gjør i tilfellet med en HTML-side. Når du bruker den i toppteksten, bør den se ut slik:
Hvis du vil bruke JS direkte, legg til samtalen for filene direkte som nedenfor. Hvis du vil angi en “send dette til en venn” -funksjon, kan du sette den under tittelen på innlegget. Det ser ut som dette:
” rel=”bookmark”>