Share
Klar til å lære hvordan du lager ditt første WordPress-tema? Denne opplæringsserien vil ta en trinnvis tilnærming, ved hjelp av et "lærende tema" kjærlig kjent som WordPress treningshjul, å bidra til å undervise i emnet. Denne serien vil ta den absolutte WordPress nybegynner gjennom de grunnleggende trinnene som er nødvendige for å konvertere hvilken som helst HTML-mal til et fullt funksjonelt WordPress-tema.
Da jeg begynte å bruke WordPress tilbake i 2006, var det ikke så mange opplæringsprogrammer rundt igjen da på hvor å begynne med Theme Development.
Jeg lærte den vanskelige måten, gjennom prøving og feil, gruvedrift av WordPress-kodeksen, så vel som fra de få tuttene som hadde eksistert da. I de siste 2 - 3 årene har jeg lært grunnleggende WordPress tema utvikling av og på, og jeg har lagt merke til at for de som ikke er ekstremt kjent med Content Management Systems, er de fleste opplæringsprogrammene som eksisterer for å lære utvikling fra grunnen altfor kompliserte.
Så jeg har utviklet en trinnvis tilnærming, og benytter seg av et "lærende tema" kjærlig kjent som WordPress treningshjul, som vil ta hele WordPress nybegynner gjennom de grunnleggende trinnene som er nødvendige for å konvertere en hvilken som helst HTML-mal til et fullt funksjonelt WordPress-tema. Vi skal begynne sakte skjønt, spesielt for de som ikke har luksusen til tidligere erfaring som arbeider med CMS-kode eller PHP for den saks skyld. Dermed navnet "trening hjul". Hardcore coders går til side, vi er i ferd med å rydde rasebanen!
Vårt fokus vil være hovedsakelig på WordPress-koden, ikke design. Så malen er hensiktsmessig forenklet med litt lys styling, slik at du ikke sykler av en klippe uten kjedsomhet.
For en virkelig god intro til webutvikling ved hjelp av HTML & CSS, sjekk ut Net Tuts opplæringsserien - Webutvikling fra grunnen
WordPress Temaer er i hovedsak Vanlige HTML-maler, med små biter av WordPress-spesifikke PHP-koder kastet inn i områder der dynamisk innhold må lastes fra databasen. Av denne grunn vil en god forståelse av HTML være nødvendig for å følge gjennom med denne serien.
WordPress-temaer, selv om de hovedsakelig består av HTML, kan ikke vises som standard i nettleseren din på grunn av PHP som de inneholder, noe som forandrer måten de fungerer på. De må kjøre gjennom en server som kan tolke PHP-kode, og derfor er det viktig å jobbe på en PHP-kompatibel webserver når man utvikler WordPress-temaer.
Vi hopper over installasjonsprosessen for WordPress for nå, da fokuset vårt kommer til å være rent på Theme Development. Jeg har koblet til en utmerket videoopplæring om å installere WordPress på en live-server. Tonnevisere kan bli funnet online for både Live og Virtual Servere.
"En virtuell server er i hovedsak en server som kjører på din lokale stasjonære maskin, og kan settes opp med MAMP (mac), XAMPP (mac og windows) eller WAMP (windows)."
For å lære å installere WordPress lokalt på en virtuell server, sjekk ut følgende video.
De kaller det ikke den berømte 5-minutters installasjonen for ingenting. Faktisk, hvis du har gjort det nok, tar det mindre enn 5 minutter.
Sjekk ut www.freecss templates.org for massevis av maler som er perfekte for å komme i gang og er allerede rettet mot å bli brukt som WordPress-temaer.
Når du har testinstallasjonen din av WordPress kjører, trenger du en grunnleggende HTML-mal (index.html) med et stilark (style.css). Jeg vil oppfordre alle som lærer HTML til WordPress-konverteringsprosessen til å praktisere ved å laste ned enkle, gratis HTML- og CSS-maler og konvertere noen til praksis.
Jeg skal bruke WordPress Training Wheels Theme i løpet av denne opplæringsserien, og jeg oppfordrer deg til å gjøre det samme, slik at vi ikke går i forskjellige retninger til å begynne med. Treningshjulet temaet er en bare beinmal, ingenting racy eller prangende, men inneholder alle kjente komponenter i et typisk WordPress Theme, ie.e? Overskrift, Meny, Sidebar, Innholds kolonne og bunntekst. Temaet vil bli navngitt opplærings-hjul-0.0 i begynnelsen, og navnet vil stadig endre seg ettersom vi legger til mer kode og fremgang er mot å være et fullverdig tema. På slutten av denne leksjonen vil navnet bli endret til opplærings-hjul-0.1
Ta en titt på den grunnleggende HTML-strukturen nedenfor. Veldig enkelt.
Hvis startfilene dine ikke blir navngitt i henhold til måten som er nevnt ovenfor, må du endre navn på dem. WordPress Krever filer med disse navnene som det minste minimum for et tema som skal fungere. I tillegg har vi en bildemappe for å holde noen bilder pent utelukket.
Filen index.html, som vil være grunnstrukturen for temaet, må omdøpes til index.php. Jeg anbefaler alltid å holde en kopi av index.html på siden, men hvis noe går wonky som det er bundet til å skje. Tenk på det som et ekstra dekk i tilfelle du opplever en dekkbarning. Bekjennelse: Selv etter år med temautvikling, gjør jeg fortsatt veldig dumme ting, spesielt etter midnatt, når hjernen min ikke lenger kan fungere, men kaffen holder meg i gang.
Vi ender opp med følgende. Mine er plassert i mappen kalt treningshjul-0.0
Hvis du noen gang har prøvd å legge til en vanlig HTML-mal i WordPress-temaer-katalogen, vil du legge merke til at den ikke vises i alternativene for å aktivere temaer. Med eldre versjoner av WordPress vil du også oppdage at hvis stilarket ikke inneholdt stilarkkommentaren nedenfor, vises en feilmelding. Dette skyldes at WordPress brukte CSS-kommentarseddelen nedenfor for å registrere temaet ditt som et gyldig WordPress-tema. For øyeblikket er det ikke lenger nødvendig å ha denne kommentaren for temaet ditt å registrere, men temaet ditt vil vises uten noen andre detaljer enn mappenavnet som vist under.
Koden under skal endres for å inneholde dine egne unike detaljer, samt unik informasjon om temaet du lager.
/ * Tema Navn: Tema URI: Beskrivelse: Versjon: Forfatter: Forfatter URI: * /
Med detaljer fra treningshjulet med temaet, vil det se slik ut:
/ * Tema navn: Treningshjul Tema URI: http://www.wpbedouine.com Beskrivelse: Et tema for å lære WordPress Theme Development from Scratch Versjon: 0.1 Forfatter: Nur Ahmad Furlong Forfatter URI: http: //www.nomad-one .com * /
Det er noen ekstra parametere som kan legges til, spesielt hvis du vurderer å slippe temaet ditt til offentligheten, selge det eller laste det inn på den offisielle wordpress.org-temakatalogen.
Et eksempel på en mer fleshed ut stilark kommentar for å gi så mye detaljer som mulig om temaet er å finne i de tjue elleve standard tema. Som du kan se noen tilleggsinformasjon for å hjelpe brukerne når de søker etter bestemte typer temaer via dashbordet, er tema søk eller på temaer katalogen tilstede. En detaljert beskrivelse samt noen få tema lisensieringsinformasjon er inkludert. Vi vil ignorere disse for denne øvelsen.
/ * Tema navn: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Forfatter: WordPress team Forfatter URI: http://wordpress.org/ Beskrivelse: 2011-temaet for WordPress er sofistikert, lett , og tilpasningsdyktig. Gjør det ditt med en egendefinert meny, topptekst og bakgrunn - gå videre med tilgjengelige temaalternativer for lys eller mørk fargeskjema, egendefinerte lenkefarger og tre layoutvalg. Tjuefem er utstyrt med en Showcase-sidemal som forvandler forsiden din til et showcase for å vise frem ditt beste innhold, widgetstøtte i massevis (sidebar, tre fotfeltområder og et Utstillingsside-widget-område) og en egendefinert "Ephemera" -grensesnitt til vis ditt side om side, lenke, sitat eller status. Inkludert er stiler for utskrift og for adminredaktøren, støtte for kjente bilder (som egendefinerte topptekstbilder på innlegg og sider og like store bilder på "kladdete" innlegg) og spesielle stiler for seks forskjellige innleggformater. Versjon: 1.2 Lisens: GNU General Public License Lisens URI: license.txt Tags: mørk, lys, hvit, svart, grå, en kolonne, to kolonner, venstre sidebar, høyre sidebar, fast bredde, fleksibel bredde , egendefinert bakgrunn, egendefinerte farger, egendefinert header, egendefinert meny, editor-stil, kjennetegnet-bilde-header, funksjoner-bilder, full bredde-mal, mikroformater, postformater, rtl-språkstøtte, klebrig -post, tema-alternativer, oversettelsesklare * /
Når du har fått stilarkene dine på plass, er temaet nå klart for å bli aktivert via WordPress Administrasjonspanel, under Utseende "Temaer
For å hjelpe deg selv og andre brukere av temaet for raskt å gjenkjenne temaet i temaer installasjonsområdet på dashbordet, har det blitt gjort bestemmelse om at et screenshot.png-bilde automatisk vises hvis det finnes i roten av temaets mappe.
Ideelt sett vil du ha et skjermbilde som gir en god fremstilling av hvordan temaet ser ut. Jeg finner mange tema designere inkluderer en logo her, noe som ikke alltid hjelper slutbrukeren å identifisere temaet de leter etter, spesielt i tilfelle hvor brukeren har tonnevis av temaer allerede installert, ganske vanlig forekomst jeg tror.
Skjermbildet.png skal være 240px X 180px, som er størrelsen som brukes til miniatyrbildet i dashbordet. Du kan sette inn en annen størrelse, men bildet vil bli endret for å passe inn i disse dimensjonene. Best å holde fast med riktig størrelse første gang for optimal visning og sidebelastning.
Før vi går videre, må vi orientere oss litt med strukturen i PHP-utviklingsspråket, og enda viktigere strukturen i WordPress-spesifikke PHP. PHP som brukes i WordPress-temaer stort sett, er tilpasset spesielt for å fungere i WordPress-miljøet. Vi starter med den inneholdende strukturen til en hvilken som helst PHP-kode, som med HTML som har brakene alene, er PHP-kode innpakket i.
Inne i Brackets er hvor all funksjonalitet finner sted, med kode vi generelt refererer til på PHP-funksjoner. Sørg alltid for at det er mellomrom mellom den inneholdende taggen og den indre PHP-koden. Den enkleste av disse funksjonene vi skal håndtere, er bloginfo (); funksjon. Legg merke til at etter funksjonens navn har vi 2 avrundede parenteser, åpning og lukking, med en halv kolon på slutten, slår av funksjonen og er i mange tilfeller avgjørende. De avrundede parentesene vil noen ganger ende opp med å inneholde noen ekstra parametere, for å fortelle bloginfoen (); funksjon, spesielt hva den trenger å gjøre.
Noen WordPress-funksjoner trenger ikke parametere innenfor de avrundede parentesene for å utføre en funksjon, selv om de kanskje har noen til å gjøre funksjonen mer spesifikk. Bloginfo (); parameteren trenger imidlertid en bare for å fungere i det hele tatt. Vi kommer til noen av de tilleggsfunksjonene som fungerer uten parametre etter hvert som tiden går.
Legg merke til hvordan ordetavnet, er skrevet med enkelt anførselstegn rundt det i avrundede parenteser.
er koden vi bruker i stedet for navnet på nettstedet, uansett hvor vi vil at navnet skal vises i vår mal. For eksempel, hvor jeg har skrevet "WordPress Training Wheels", kunne jeg bare erstatte den teksten med den funksjonen.
Vær nøye med strukturen i denne funksjonen, ettersom resten av WordPress-koden følger en lignende struktur gjennom. Hvis du forlater en viktig del, som de avrundede parentesene, semikolonet etter de avrundede parentesene, eller mellomrommet mellom php og ordet bloginfo, vil det føre til at koden ikke fungerer riktig. I noen tilfeller kan dette drepe hele siden din. Jeg vet, det er en smerte å være så forsiktig, men å utvikle gode vaner hjelper tidlig. Overhold veiereglene og reisen din vil være mye mindre humpete.
Når WordPress-nettstedet kjører denne funksjonen, laster WordPress databasen og finner navnet du har satt inn i Blog Name-feltet under Innstillinger "Generelt.
Det er også navnet du legger inn i begynnelsen når du kjører installasjonen for å sette opp WordPress første gang. Hvis du endrer dette navnet i de generelle innstillingene, vil det føre til at malen gjenspeiler denne endringen umiddelbart. Dette er i hovedsak hvordan WordPress, eller noe annet Content Management System for den saks skyld fungerer. Dynamiske koder erstatter statisk innhold slik at innholdet kan administreres via administrasjonsgrensesnittet i stedet for direkte redigering av malene.
Temaet ditt er fortsatt ikke helt klart for å bli registrert i WordPress. Det mangler et viktig skritt som gjør at WordPress kan vise temaet ditt riktig.
Noen få skritt tilbake vår index.html kunne enkelt lenke til det tilhørende stilarket, fordi de er plassert i samme mappe, og bare å sette inn navnet på stilarkfilen i stilarket-lenken, vil det være tilstrekkelig. Dette er ikke lenger tilfelle skjønt. WordPress-temaer bor ikke på rotenivået på nettstedet, ettersom de er installert i wp-innhold "temaer mappe i WordPress-programvaren.
Som du kan se nedenfor når du aktiverer temaet for øyeblikket, ser vi fremdeles ikke hele bildet. Selv om HTML-strukturen laster, er stilarket ikke koblet, noe som resulterer i en ustabil side.
Uten å forklare for mye detalj om hvordan WordPress handler om å ringe malene fra disse mappene, må vi være oppmerksomme nå at filer ikke lenger kan kobles til like enkelt som vi koblet til dem på enkle HTML-nettsteder. Vi må bruke noen ekstra WordPress-funksjoner for å fylle trinnene mellom rotkatalogen og mappen for det aktuelle aktiverte temaet. Vi gjør dette ved hjelp av en annen bloginfo (); funksjon, denne gangen oppdager nettadressen til det aktuelt aktiverte temaets stilark. Uansett hva navnet på temamappen, vil WordPress nå fylle ut blanke og sette banen til style.css filen.
Denne funksjonen er satt inn i stilarket-linketiketten
som nå blir
Hvis du inspiserer kildekoden din ved hjelp av visningskilden eller med noe som firebug, ser du at WordPress inneholder hele banen fra roten til nettstedet helt til stilarket. Rotenmappen til mitt eksempelnettsted ligger på http://www.wpbedouine.com/training-wheels/. WordPress genererer derfor:
Det samme stylesheet_url funksjonen vil automatisk sette banen inn i et aktuelt aktivert tema på samme måte, uten at noen kildekode blir redigert. Du ser et mønster som dukker opp, med biter av hardkodet innhold som erstattes av dynamiske funksjoner som trekker data fra databasen i fly.
Føler du at luften rushing gjennom håret nå? Ikke bekymre deg, treningshjulene kommer snart av! Jeg lover.
Plasser index.php og style.css filene i sin egen mappe, navngitt basert på hva du vil at temaet skal bli navngitt og deretter lastet opp til din wp-innhold "temaer mappe i din live eller virtuelle vertsversjon av WordPress-installasjonen som vist nedenfor.
Og uten videre, gå til Utseende "Temaer og klikk Aktiver under det nylig opprettede temaet. For resten av leserne på dette nettstedet, kan disse trinnene ha vært irriterende enkelt, men jeg kjenner følelsen av å endelig klikke med denne prosessen og har mitt aller første tema aktivert innen WordPress. Det er uvurderlig for nybegynneren.
Før vi avslutter, la oss bruke noen ekstra, veldig enkle bloginfo (); Fungerer for å fylle ut dynamisk innhold. Vi har allerede introdusert bloginfo ( 'navn'); og bloginfo ( 'stylesheet_url');. Nedenfor har vi den opprinnelige HTML for topptekst av temaet vårt.
WordPress treningshjul
En liten hjelp for å få deg fri wheeling med WordPress
Vi erstatter innholdet av H1-linken href-attributtet, som for øyeblikket bare har et hash-symbol og vil vanligvis se ut som href = "home.html", med bloginfo ( 'url'); funksjon.
">
I tillegg erstatter vi h2-taglinjen under nettstednavnet med:
så vår kodestykke ser nå mye mer wordpressish ut.
">
Et siste problem å løse er koblingen til innholdsbildet i den midterste kolonnen i malen. I likhet med problemet med å koble stilarket, må vi bruke et annet bloginfo (); funksjon for å fylle inn bildebanen som bilder / imagename.jpg vil ikke lenger fungere.
Treningshjul Leksjon 1
For å løse dette problemet bruker vi følgende kode før du ringer bildekatalogen
Så vil vi ende opp med følgende.
Treningshjul Leksjon 1
Vær forsiktig med forsinkelsen like etter sluttbraketten og før navnet på bildemappen!
bloginfo ( 'navn');
bloginfo ( 'url');
bloginfo ( 'beskrivelse');
bloginfo ( 'template_directory');
Bloginfo (); funksjonen har mange bruksområder for å generere ulike innholdstyper fra ditt nettsted.
For en mer omfattende liste over parametere for bloginfo (); sjekk ut WordPress Codex-dokumentasjonen på denne funksjonen - http://codex.wordpress.org/Function_Reference/bloginfo.
En annen utmerket ressurs for de mange WordPress-funksjonene er DBS Interactive WordPress Tag Reference, som i hovedsak er en mer nøyaktig og mer ordentlig presentasjon av koden som er oppført i WordPress Codex.
Jeg har lagt til utdrag av koden som er dekket i denne leksjonen til min snipplr-konto.
Gratis wheeling med WordPress snart å følge. Jeg hører de trening hjulene rattling å komme av :)
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )