Good Mood

Dette kommer til å bli en morsom opplæringen der vi undersøker hvordan å lage din egen WordPress Tema fra bunnen av. Faktisk, vi vil begynne med absolutt null filer og null linjer med kode. Den eneste måten å forstå hvordan WordPress-Temaer fungerer, er å virkelig hoppe inn på et lavt nivå, og gjøre hver enkelt ting selv. Ja, det er fristende å unngå dette fordi du kan gjøre WordPress gjøre alt for deg uten noen forståelse av koden som driver den., Dette kan være PHP, JavaScript, CSS eller til og med den grunnleggende HTML. Ved slutten av denne trinnvise WordPress Tema opplæringen, vil du forstå hvordan alt passer sammen og hvordan å bøye WordPress til din vil med letthet.

Det er så mange gratis temaer som er tilgjengelig for deg når du kjører et WordPress nettsted. Utover gratis temaer, du kan også velge å betale en premie for profesjonelt gjort WordPress temaer som ser flott ut og har fantastiske funksjoner. Så hvorfor lære hvordan å lage ditt eget tema fra scratch?, Svaret er at uansett hva temaet du bruker, det kommer til å komme en tid når du ønsker å foreta endringer på nettstedet. Noen av disse endringene kan være i stand til å overnatte ved en enkel plugin eller modulen. Mange ganger, men det er mer fornuftig å forstå hva det er du ønsker å endre, endre det, og unngå å slå din WordPress nettstedet ditt inn i en rot av plugins og add-ons som har blitt uhåndterlig. Med litt foundation level kunnskapen, vil du være trygg på å endre tema, eller ganske enkelt å bygge din egen fra bunnen av., Vil du vite hvilke filer du vil redigere, og hva koden for å legge til eller endre for å få ønsket resultat.

Trinn 1: Opprette en mappe for å holde temaet filer.

Hvis vi kommer til å bygge temaer, trenger vi å vite hvor filene som utgjør en WordPress tema bor i en WordPress Installasjon. Dette er ganske enkelt. Vi vet at en WordPress installasjon vanligvis har en rot-katalog som heter wordpress. Her er hva vår root-katalogen ser ut som i PHP Storm.,

Denne katalogen inneholder følgende filer og mapper:

– Filer

Mapper

• wp-admin
• wp-content
• wp-includes

Den mappen som vi er mest interessert i akkurat nå er wp-content-mappe. Innenfor wp-content-mappe er en mappe som heter temaer. Vet du hva denne mappen er for? Jepp, det stemmer! Det er mappen som inneholder et eller flere temaer som du ønsker å benytte med din WordPress nettstedet., I denne temaer-mappen finner vi tre andre mapper av twentyfifteen, twentysixteen, og twentyseventeen. Disse mappene inneholder tre temaer som WordPress leveres med som standard. Merknad nedenfor at det også er en mappe som heter customtheme. Gå videre og opprette denne mappen så vel i din installasjon som dette er hvor vi vil være å skape vår WordPress tema fra bunnen av.

Trinn 2: Opprette stil.css og stikkordregister.php i de tilpassede temaet mappen

Vi nå vet hvor WordPress tema-filene i filsystemet., Vi har også opprettet en ny mappe som heter customtheme i vår temaer-mappen. Nå kommer vi til å opprette to tomme filer i denne katalogen. Den ene er kalt indeks.php og den andre er kalt stil.css.

La oss nå fylle disse filene med minimum vi trenger å få et nytt tema, som går i WordPress.

stil.css

WordPress faktisk leser kommentarer som du plasserer i stil.css-filen. Dette er hvor du angi spesifikk informasjon om tema du bygning.

stil.,css er et stylesheet (CSS-fil) som kreves for hver WordPress tema. Den styrer presentasjonen (visuell design og layout) av sidene på nettstedet ditt.

I vår utdrag her skal vi bare gi et Tema Navn, Forfatter, Forfatter URI, og versjonsnummeret til vårt tema.,

indeks.,php

I denne filen, vi bare ønsker å sende noe til skjermen for å bevise at vår tilpassede temaet er arbeider.

Flott Jobb! Tro det eller ikke, har du laget din første WordPress Tema.,

Trinn 3: Aktiver tema fra WordPress Dashboard

På dette punktet kan vi besøk vår WordPress Dashboard og gå til Utseende->Temaer og lo og se, vi ser de nye tema vi har skapt.

Vi kan klikke på «Tema Detaljer» til å bore ned på våre tilpasset tema og finne informasjon som vi hadde lagt inn i den stilen.css-filen har fungert. Vi kan se dem har et navn av customtheme, Versjon 1.0, med forfatteren Vegibit, og en link til URI vi hadde forutsatt. Veldig kult.,

Og nå sannhetens øyeblikk! Gå videre og klikk «Aktiver» på den nye customtheme og gå deretter til webområdet. Det kommer ikke til å vinne noen Webby awards, men vi har fått med oss selv en god start på en ny egendefinert tema!

Trinn 4: Legg til Koden til Utgang Tittelen På Innlegget og Innlegget Tekst

Vi har brukt friheten til å fylle et par eksempel innlegg i databasen, slik at vi kan arbeide med data i løpet av denne opplæringen. Akkurat nå, vårt tema bare utganger Tilpasset Tema!, til side når vi besøker nettstedet vårt, uansett hvor mange innlegg som er i databasen. La oss nå flytte for å hente data fra databasen, og gi ut det til side. Spesielt ønsker vi å hente Tittelen på Innlegget og Publisere Innhold av alle innleggene dine og vise dem på hjemmesiden. La oss gi det en sjanse nå. Først la oss se hva vi har for innlegg i WordPress Dashboard.

Utnytte WordPress Loop

Nå kan vi snakke litt om WordPress Loop. WordPress Loop er virkelig motoren som gjør at WordPress kjøre., Det er via denne sløyfen, som tema utviklere sjekk for innlegg og vise dem på den siden som er nødvendig. Hvis følger format som følger. Hvis databasen har innlegg, la oss loop over dem mens det er fortsatt innlegg, ellers vil vi la brukeren vite at det er ingen innlegg. Det ser ut som dette i PHP-kode.,

legg Merke til at Sløyfen gjør bruk av to funksjoner i sin mest grunnleggende form. De er have_posts() og the_post(). Den have_posts () – funksjonen gjør bare en ting. Den forteller deg om det er noen innlegg i databasen til å gå over., Denne funksjonen vil returnere enten true eller false og det er det. Hvis det kommer tilbake true, så er det innlegg som er tilgjengelig til å gå over. Hvis det kommer tilbake false, så er det ingen innlegg til å gå over. Den andre funksjonen, the_post() returnerer ikke noe. Det er jobb å få WordPress klar til å sende innlegg. Spesielt, den henter neste innlegg, setter opp innlegget, angir in_the_loop eiendom til true., Så langt vår side vil fortsatt ikke få noen informasjon om våre blogginnlegg, men vi kan oppdateringen som nå i vår indeks.php-filen.

Ok kule. Vi har nå gjort bruk av ytterligere to WordPress-funksjoner, the_title() og the_content(). Som oftest er disse funksjonene er brukt inne i løkken og hva de gjør er å hente tittelen og innholdet i hvert innlegg som loop-koden over hver og en i databasen. Slik løkken kjører, vil det komme over det første innlegget., På den tiden the_title () – funksjonen, vil output tittelen på innlegget til side og the_content() vil ut av kroppen som legg til side. På neste loop disse funksjonene vil igjen hente neste tittel og innhold og utgang dem til side. Så med disse på plass, vi skal nå se litt informasjon om våre innlegg blir sendt til skjermen. La oss prøve det! Vi besøk http://wordpresstutorial.dev og se at det fungerer!,

Trinn 5: Legg til en Link Til Hvert Innlegg

Hva om kobling til hver enkelt post, slik at vi kan vise et innlegg på sin egen snarere enn som en del av bare hjemmeside. Vi kan gjøre det ganske enkelt, igjen med spesielle funksjoner som WordPress gir. For denne oppgaven, kan vi gjøre bruk av the_permalink () – funksjonen. Vi kan oppdatere våre kode som dette:

Nå, kan vi klikke på hver enkelt post tittel, og gå til en side som har bare det ene innlegget. Veldig kult!,

Trinn 6: Legge til en Topptekst og Bunntekst Til Tilpasset Tema

Tittelen og Publisere Innhold som er sentrale for å skape et godt tema. Nesten like viktig er det å ha et topp-og bunntekst av dine tema. Disse delene vil inneholde innhold som alltid er synlig på alle sidene av nettsiden. Disse delene er over og under legge inn innhold. For å gjøre dette, du gjettet det, vil vi gjøre bruk av spesielle funksjoner som tilbys av WordPress for å få topp-og for å få bunntekst. Ser du et mønster som er i ferd med å utvikle ennå?, Nesten alt du kan gjøre som en temaet utvikler i WordPress allerede har blitt gjort for deg ved hjelp av disse tilpassede funksjoner. Så du vil finne at det lønner seg å huske disse brukte funksjonene i WordPress tema utvikling. La oss gå videre og legge get_header() og get_footer() funksjonene til vårt tema nå.

Vel, ville du ser på det?! Vi ser at vår tilpassede temaet har nå en topp-området, samt en bunntekst-området., I overskriften er navn og slagord av området, mens i bunnteksten vi se de kjente tekst, WordPress Opplæringen er stolt drevet av WordPress. Disse er standard alternativer for topptekst og bunntekst når du bruker disse funksjonene. Hva om når vi ønsker å ha en egendefinert topptekst og bunntekst? Kommer rett opp!

Fra 2 Tema Filer til 4

Så langt i denne opplæringen, vi har to filer som lever i vår customtheme mappe (som i seg selv er i temaer-mappen). Disse filene er stil.css og stikkordregister.php. På dette punktet, vi kommer til å trenge for å legge til flere filer for å komme videre., Gå videre og opprette to nye filer i customtheme mappen. Disse filene vil være en gunstig kalt header.php og bunntekst.php.

Nå hva disse filene vil gjøre, er å overskrive den standard topp-og bunntekst layout leveres som standard når du ringer enten get_header() eller get_footer() funksjoner. Faktisk, hvis vi oppdatere våre nettsider, ser det ut som topp-og bunntekst er borte. Dette er fordi vi ikke har lagt til noen markup til disse filene ennå. Bare for gliser, oppsett filene som så å teste dette ut.

topp.,php

footer.,php

Working with header.,php

Vårt eksempel ovenfor fungerte bra, og det viser oss hvordan denne filen fungerer på sitt mest grunnleggende nivå. Topptekst.php-fil er faktisk ganske viktig imidlertid, så la oss ikke glatte over detaljene av det for fort! Dette er hvor du inkluderer code at alle sidene på nettstedet ditt må ha tilgang til på en eller annen måte. Til å begynne med, alle HTML-sider, vil ha en doctype. Du vil angi at i denne filen. I tillegg, alle sider vil ha en åpning html-tag, en head-delen, og en åpning body-taggen. Alt dette kan gå i overskriften.php-filen., La oss raskt legge til noen av disse tingene som alle web-sider som ville gjøre bruk av. Vi vil gjøre bruk av noen nye WordPress-funksjoner her også. De vil være language_attributes(), bloginfo() og body_class().

topp.php

Hvis vi laste inn siden på nytt og deretter vise kilden til side i nettleseren, kan vi få et inntrykk av hva disse funksjonene gjør. Vi fremheve linjer som har utgang som kom fra de funksjonene som er beskrevet nedenfor:

Igjen, vi kan se svært liberal bruk av WordPress-funksjoner når du utvikler dine egne temaer i WordPress., Faktisk, vi har ikke skrevet noen egendefinert kode i det hele tatt ennå. Vi er rett og slett å lære hva de ulike WordPress-funksjoner kan tilby oss, og deretter sette dem til å arbeide i vår tilpasset tema.

Inkludert wp_head()

wp_head() er slag av en spesiell funksjon når du arbeider med WordPress Temaer. Det er ikke like enkelt som alle de andre vi har sett på så langt. Formålet med denne funksjonen er å sluttføre ut i den <head> – delen av siden.php-filen., Faktum er at det er ment å gå rett før den avsluttende </head> – tag-en. Dette blir viktig når du begynner å legge til diverse plugins til nettstedet ditt. Det skriver skript eller data i head-taggen på fronten. Det er en god vane å alltid inkludere wp_head() i temaer som mange andre plugins kan stole på denne kroken for å legge til stiler, skript, eller meta-elementer i <head> området av nettstedet. Vi vil legge til det som her:

topp.php

Fullført bunntekst.,php

Vi er ferdig med å legge det grunnleggende om hva vi trenger i overskriften.php-filen. La oss nå gå videre og runde ut bunnteksten.php-filen. Det er et par ting vi må gjøre. Husker at i vår overskrift.php-filen vi har åpne html og body-kodene. De må være lukket på enkelte punkt. Bunntekst.php-filen er et perfekt sted for å gjøre det. Slik vil vi legge til avsluttende </html> og </body> – tag-er i tillegg til å gjøre et kall til wp_footer () – funksjonen.
bunntekst.,php

Endre Informasjon om Området I WordPress Dashbordet

Du kanskje lurer på hvorfor vi hadde å gjøre bruk av alle disse fancy funksjoner for å bygge opp vårt tema. For eksempel, når vi ønsket å liste ut navn og slagord av nettstedet vårt, vi har gjort bruk av bloginfo () – funksjonen passerer parametere av navn og beskrivelse., Grunnen til dette er fordi generelt, vil man aldri vanskelig koden disse verdiene inn på nettstedet. Dette er informasjon som kan endre. I tillegg, hvis du gjør ditt tema tilgjengelig for offentligheten, og de vil ha sitt eget navn og slagord for deres nettsted. De bør være i stand til å bare besøke admin dashboard i WordPress og oppdatere sin Generelle Innstillinger for å se disse dataene fylle ut automatisk.

Gjør Området Tittel Link Til Hjemmesiden

de Fleste temaer vil tilby muligheten for å klikke på tittel-tekst på nettstedet, og sende brukeren til hjemmesiden., På denne måten, uansett hvor brukeren kan være på stedet, de kan alltid klikke på denne tittelen tekst og gå rett tilbake til hovedsiden på nettstedet. La oss legge til at linken nå i overskriften.php.

Trinn 7: Legg til funksjoner.php-filen til ditt tema

På dette punktet, vi har fire filer i vår tilpasset tema. De er indeksen.php, stil.css, header.php, og bunntekst.php. Trolig den nest mest viktig-filen vi trenger å gjøre er å ha funksjoner.php-filen.

funksjoner.php-filen i WordPress gjør mange ting for ditt tema. Det er den filen der du plasserer koden for å endre standard virkemåte for WordPress., Du kan nesten tro av funksjoner.php som en form av en plugin for WordPress med et par viktige punkter å huske:

• ikke krever unike Overskrift
• Lagret i den mappen som holder deg i tema-filene
• Kjører bare når du er i for øyeblikket er aktivert tema katalogen
• Gjelder bare for gjeldende tema
• Kan ringe PHP-funksjoner, WordPress funksjoner, eller egendefinerte funksjoner

En ting vi trenger sårt i vårt tema er noen bedre styling! La oss lage en funksjon i våre funksjoner.php-filen inkluderer stil.css-filen til vårt tema., Her er hvordan vi kan oppnå dette målet.

Denne delen av koden vil inkludere, eller gjøre aktiv, stylesheet av våre egne tema. Nå du kanskje lurer på hvorfor vi bruker en egendefinert funksjon, når det virker som vi kunne like gjerne manuelt link til stylesheet oss selv i hodet.php-filen. Vel, dette kommer til å gjøre litt mer arbeid opp foran for en større avkastning på din innsats senere. Som tema får mer komplekse og mer eiendeler er lagt til, vil du være glad for å ha denne funksjonen som kan håndtere alle de tunge løftene for deg.,

Nå er det på tide å gjør ting ser litt mer pen. Først, la oss legge til en pakke <div> med en klasse av beholderen. Åpningen <div> vil være i overskriften.php, mens den avsluttende <div> vil være i bunnteksten.php. Vi vil også bryte post-produksjon i indeksen.php med en <artikkel> – tag-en som har en klasse av innlegget. Dette vil gi oss klasser til mål i vår stil.,css-filen, slik at vi kan stille side bredde blant andre ting. Vi vil også legge til noen bedre styling til stil.css i dette trinnet.

Trinn 8: Legge til Noen Stil Til Ditt Tema

topp.php
Legge til en åpning <div> til overskriften.php-filen.

bunntekst.php
Legge til en avsluttende </div> til bunntekst.php-filen.

indeks.php
Innpakning post utgang med en <artikkel> – taggen

stil.,css
til Slutt, legger vi på noen ulike CSS-stil forbedringer for å gjøre temaet ser litt hyggeligere.

Når vi er på besøk vår test nettstedet nå i nettleseren, kan vi se at WordPress Tema som vi har utviklet trinn for trinn i denne opplæringen er ute ganske bra!

WordPress Tema Utvikling Veiledningen Trinn for Trinn Oppsummering

La oss se på alt det vi har lært i denne grunnleggende trinn for trinn WordPress Tema veiledning for nybegynnere., Vi har lært hvordan å lage vår første custom theme i WordPress ved å lage vår egen mappe på siden av mappen temaer av våre WordPress installasjon. I denne mappen har vi lagt til forskjellige filer som svarer til ulike delene av ditt nettsted. I vår tutorial, vi har begynt med det blotte minimumskrav du burde ha i et WordPress tema. I fremtiden, ville du legge til mange flere filer til denne mappen enn hva vi har dekket. La s gjennomgang hver fil som er opprettet vi i denne opplæringen, og hva de gjorde for oss.

• stil.,css Denne filen er der du vil legge til litt css kommentarer, slik at WordPress vet noen informasjon om ditt egendefinert tema. Det har også den egendefinert css styling som du vil bruke til ditt tema.
• indeks.php Denne filen kontrollerer html og generelle produksjonen av tema. Det er den viktigste filen brukes for å gi ut data på din hjem-side.
• topp.,php Kan du angi et område til å holde viktig informasjon om ditt nettsted i <head> området, så vel som blant annet åpning <html>, <kroppen>, og ,<div class=»beholder»> – tagger.
• bunntekst.php bunnteksten vil lukke alle åpne kodene du anga i toppteksten, i tillegg til å gi deg et sted å ringe wp_footer () – funksjonen.
• funksjoner.,php Kan du ringe funksjoner, både PHP og bygget på WordPress, og å definere dine egne funksjoner for å endre standard oppførsel av WordPress

Så der har du det! Vi var i stand til å lage en fullt fungerende tilpasset WordPress Tema med bare 5-filer. Dette gir oss foundation level kunnskap til å bygge mer avanserte WordPress temaer og funksjoner. Flott Jobb!