, wordpress emneudvikling støttehjul: første dag,,,,, 5,,,,,,,,, 39,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, klar til at lære at lave din første wordpress tema?denne pædagogiske serie vil tage en trinvis tilgang, der gør brug af en "læring tema" kærligt kendt som, wordpress støttehjul, til at lære det.denne serie vil tage den absolutte wordpress nybegynder gennem de grundlæggende foranstaltninger, som er nødvendige for at omdanne en html model til et fuldt funktionsdygtigt wordpress tema.,,,, serie indførelse.da jeg begyndte at bruge wordpress tilbage i 2006, der var ikke mange tutorials omkring dengang, hvor de skal starte med temaet udvikling. jeg lærte på den hårde måde, gennem forsøg og fejltagelser, af wordpress codex, samt fra de få tuts, der havde eksisteret dengang.de sidste 2 - 3 år har jeg lært grundlæggende wordpress tema, udvikling af og til, og konstaterer, at de ikke yderst bekendt med indholdet forvaltningssystemer, de fleste af de tutorials, der findes for at lære udvikling fra bunden er alt for kompliceret, så jeg har udviklet en trinvis tilgang, og at der anvendes en "læring tema" kærligt kendt som, wordpress støttehjul, det vil tage hele wordpress nybegynder gennem de grundlæggende foranstaltninger, som er nødvendige for at omdanne en html model i et fuldt funktionsdygtigt wordpress tema.vi begynder langsomt, især for dem, der ikke har den luksus af tidligere erfaring med cms - kode eller php, for den sags skyld.deraf navnet "støttehjul."- coders, træd til side, vi rydder banen igen!,,,, se indledende spørgsmål, som vi skal bygge videre på den serie.det er ikke meningen, at det skal være visuelt fantastisk, det er ment til at være både fantastisk!bare rolig - - når vi er færdige, så vil du være til større og bedre temaer på ingen tid.vores fokus er hovedsagelig på wordpress kode, ikke design.- modellen er bevidst enkle med lys - - så du kan ikke cykle ud fra en klippe af kedsomhed., for en virkelig god intro til web - udvikling ved hjælp af html & css, tjek nettet tuts tutorielle serie - web udvikling fra bunden, forudsætninger:,, aldrig kodet en wordpress tema før, html & css viden, viden om wordpress administration, forvaltning, kendskab til installation af wordpress enten virtuelt eller levende server, seneste browser (for at undgå gamle browser insekter), tekst eller kode redaktør, browser kildekode inspektør som ildflue, vilje til at lære.(væsentlige), yderligere oplysninger, wordpress temaer i det væsentlige er klart html skabeloner, med små stykker wordpress specifikke php tags smidt i områder, hvor dynamisk indhold skal indlæses i databasen.derfor er en god forståelse af html ville være nødvendige til at gennemføre denne serie.,, trin 1 - installere wordpress, wordpress temaer, men primært består af html, ikke er i stand til at vise ved misligholdelse i din browser på grund af folkesundhedsprogrammet, som de indeholder, som ændrer den måde, hvorpå de fungerer.de er nødt til at løbe gennem en server, som er i stand til at fortolke php kode, hvilket er grunden til, at det er vigtigt at arbejde på et php i stand til web - server ved udviklingen af wordpress emner. vi ryger over anlægget proces for wordpress for som vores fokus skal være baseret på temaet udvikling.jeg har forbundet med en fremragende video - forelæsning om at installere wordpress på en levende server.tons mere, kan findes online for både levende og virtuelle servere.,, "en virtuel server er hovedsagelig en server på dit lokale desktop - maskine og kan være her ved hjælp af mamp (mac), xampp (mac & vinduer) eller wamp (windows).", og lære at installere wordpress lokalt på en virtuel server se følgende video., anlægget proces hovedsageligt indebærer:,, at skabe en database samt en database, bruger - og det er associeret kodeord, sender den wordpress filer downloades fra wordpress. org, redigere wp-config.php fil, så det indeholder databasen navn, brugernavn, kodeord, og mysql server oplysninger, at anlægget manuskript fandt på www.yoursite.com/wp-admin/install.php, de kalder det ikke den berømte 5 minut installere feller noget.faktisk, hvis du har gjort det mange gange, det tager mindre end 5 minutter.,, trin 2 - klargøring af filer, tjek www.freecss templates.org for mange modeller, der er perfekt til at komme i gang og er allerede rettet mod bruges som wordpress temaer.,, når du har din test installation af wordpress drift du får brug for en grundlæggende skabelon (http: //index.html) med en stylesheet (stil. css).jeg vil opfordre nogen lære html til wordpress omstilling til praksis ved at downloade simpelt fri html & css skabeloner og omdannelse af et par i praksis. jeg vil være med wordpress støttehjul tema for varigheden af denne lektion i serier, og jeg opfordrer dem til at gøre det samme, så vi er ikke sælger i forskellige anvisninger til at begynde med.bremsen tema er skelettet skabelon, intet vovet eller prangende, men indeholder alle de kendte bestanddele af en typisk wordpress tema, dvs.- en menu, sidebars, indhold, kolonne & fod.emnet vil blive udnævnt, training-wheels-0.0 i begyndelsen, og det navn vil stadig ændring, som vi tilføje mere kode og fremskridt i retning af at være en fuldgyldig tema.i slutningen af denne lektion navn vil ændre sig, training-wheels-0.1,, se http: //den grundlæggende struktur nedenfor.meget simpelt.,, at din første filer, bør deres første sager ikke blive navngivet efter den måde, nævnt ovenfor, skal du kalde dem.wordpress kræver filer med disse navne som minimum til et tema til at være funktionel.desuden vil vi have en billeder mappe at holde nogen billeder godt gemt af vejen.,, home.html » index.html, mystyles.css » style.css, ændrer fil forlængelser, filen., hvilket vil være basen struktur for tema trænger til at blive omdøbt til index.php.jeg anbefaler, at beholde en kopi af. på den anden side, hvis noget går galt, som kommer til at ske.tænk på det som et reservehjul, hvis du oplever et dæk op.en tilståelse: selv efter mange års tema udvikling gør jeg stadig virkelig dumme ting, især efter midnat, da min hjerne kan ikke længere fungere, men kaffen er at holde mig hen, ender vi med følgende.min er anbragt i den mappe, kaldet training-wheels-0.0, trin 3 - stylesheet header bemærkninger, hvis du nogensinde har forsøgt at tilføje en almindelig: model til wordpress temaer fortegnelse, du ville lægge mærke til, at det ikke dukker op i mulighederne for at aktivere temaer.med ældre versioner af wordpress du ville også finde det, hvis din stylesheet ikke indeholder stylesheet bemærkning nedenfor, en fejlmeddelelse forekommer.det er, fordi wordpress anvendes css bemærkning snippet fundet neden for at registrere deres tema som en gyldig wordpress tema.i øjeblikket er det ikke længere nødvendigt at have denne bemærkning til temaet til at registrere, men temaet tilsyneladende uden nogen andre oplysninger end den mappe navn som vist nedenfor.,, personliggøre temaet med stylesheet bemærkning, kode under bør ændres for at indeholde din egen, unikke oplysninger samt entydige oplysninger om temaet du skaber./* tema navn: tema uri: beskrivelse: version: forfatter: forfatter uri: * /med oplysninger fra min støttehjul tema er medtaget, ville det se sådan ud: /* tema navn: støttehjul tema uri: http://www.wpbedouine.com beskrivelse: et tema for at lære wordpress tema udvikling fra bunden version: 0,1 forfatter: nur ahmad furlong forfatter uri: http://www.nomad-one.com * /, er der nogle supplerende parametre, der kan tilføjes, især hvis du overvejer at temaet for offentligheden, at sælge den, eller den lastes på de officielle wordpress.org temaer fortegnelse. 20 11 tema stylesheet bemærkninger, er et eksempel på en mere konkret stylesheet kommentar til at give så præcist som muligt om det.eme kan findes i 20 11 misligholdelse tema.som du kan se nogle supplerende mærke, oplysninger til brugere, når leder efter bestemte typer af emner via instrumentbrættet tema søgning eller om temaer adresseregister er til stede.en detaljeret beskrivelse og nogle tema certifikatoplysninger, er omfattet.vi vil, at det i denne forbindelse, /* tema navn: 20 11 tema uri: http://wordpress.org/extend/themes/twentyeleven forfatter: wordpress team forfatter uri: http://wordpress.org/beskrivelse: 2011 - tema for wordpress er sofistikeret, let og fleksibel.gør det dig med en speciel menu, header image og baggrund - - så gå videre med tilgængelige tema muligheder for lys eller mørk farve, sædvane forbindelse farver, og tre indretning valg.20 11, er udstyret med et udstillingsvindue side skabelon, der forvandler din forside i et udstillingsvindue for at vise dine bedste indhold, dims støtte gaiore (tager tre meter områder, og et udstillingsvindue side widget område), og en speciel "døgnfluer" dims til at vise din side, link, citat, eller status stillinger.omfattet er styles for fingeraftryk og for admin redaktør, støtte til taget billeder (som skik header billeder på stillinger og sider, og som store billeder på spillet "klæbrige" stillinger), og særlige former for seks forskellige post - formater.version: 1.2 kørekort: nationale samlingsregering generelle offentlige kørekort kørekort uri: license.txt mærker: mørke, lys, hvide, sorte, grå, en kolonne, to kolonner, venstre sidebar, ikke tager fast bredde, fleksible bredde, sædvane baggrund, sædvane farver, sædvane header, sædvane menu, redaktør stil, var image header, vises billeder fuld bredde skabelon, microformats, post - formater, rtl sproglig støtte, klistrede post, tema muligheder, oversættelse klar * /, når du har din stylesheet bemærkninger på plads, temaet er nu klar til at blive aktiveret via wordpress administration instrumentbræt, under udseende » temaer, trin 4 - at skabe et skærmbillede, for for at hjælpe sig selv, og andre brugere af temaet til hurtigt at anerkende dette tema i de temaer, installation del af instrumentbrættet, er der foretaget en screenshot.png image skal automatisk vises, hvis fandt i roden af temaet er mappe, helst, du ville have en skærmbillede, som giver en god repræsentation af, hvilket emne ser ud.jeg finder mange tema designere, omfatter et logo, som ikke altid hjælper slutbrugeren identificere tema, de leder efter, især i de tilfælde, hvor brugeren har tonsvis af temaer, der allerede er installeret, meget ofte tror jeg, screenshot.png bør være 240px x 180px, som er den størrelse, der anvendes til virksomhed beskrevet under instrumentbrættet.du kan sætte en anden størrelse, men det billede vil blive ændret for at passe ind i de dimensioner.bedst at holde sig til den rigtige størrelse, første gang for en optimal display og side belastning erfaring.,, trin 5 - - din første php øremærke, før vi går videre, vi er nødt til at orientere os lidt med strukturen i folkesundhedsprogrammet udvikling sprog og især strukturen i wordpress specifikke folkesundhedsprogrammet.folkesundhedsprogrammet, der anvendes i wordpress temaer i det store og hele er designet specifikt for at arbejde inden for wordpress miljø.vi starter med, der indeholder struktur af folkesundhedsprogrammet kode, som med html med parentes alene under folkesundhedsprogrammet kode er indhyllet i. <?php?> i parentes, hvor alle de funktioner, finder sted med kode vi generelt henvise til folkesundhedsprogrammet funktioner.altid sikre, at rummet er mellem med - og den indre php kode.det enkleste af disse opgaver, vi står overfor, er, bloginfo();, funktion.bemærker, at efter navnet på den opgave, vi har 2 afrundet parentes, åbning og lukning af et semikolon i slutningen, lukker ud af funktion, og i mange tilfælde er af afgørende betydning.de afrundede parentes vil undertiden ender med nogle supplerende parametre, at fortælle bloginfo(); funktion, især det, der skal gøres.nogle wordpress funktioner behøver ikke parametre i afrundede parentes for at udføre en opgave, om de eventuelt kan have noget at gøre med deres funktion mere specifikke.den bloginfo(); parameter skal imidlertid kun fungere overhovedet.vi får nogle af de supplerende funktioner, som arbejder uden parametre, som tiden går, lokalitetens betegnelse, <?folkesundhedsprogrammet aspektet bloginfo ('name)?>,, hvor ordet navn, er skrevet med enkelt citat mærker rundt i afrundede), er den kode, som vi bruger i stedet for navnet på det sted, hvor vi kan lide det navn optræder i vores model.for eksempel, hvor jeg har skrevet "wordpress støttehjul" kunne jeg blot erstatter teksten med den funktion, være opmærksom på strukturen af denne funktion, som resten af wordpress kode følger samme struktur i.uden en væsentlig del, som den runde parenteser, semikolon efter afrundet parentes eller rummet mellem folkesundhedsprogrammet og det ord, bloginfo, vil resultere i din kode virker ikke korrekt.i nogle tilfælde kan dræbe hele din side.jeg ved, det er en smerte for at være forsigtig, men at udvikle gode vaner tidligt hjælper.overholde færdselsreglerne og deres rejse vil være langt mindre ujævn. når wordpress sted styrer denne funktion belastninger, wordpress forespørgsler databasen og finder det navn, som du har indføjet i blog hedder område under, indstillinger » generelle,.,, det er også dit navn indsættes i begyndelsen, da du - anlægget for at oprette wordpress første gang.en ændring af denne betegnelse i den almindelige indstillinger vil resultere i din model, der afspejler, at ændre straks.det er i bund og grund, hvor wordpress eller enhver anden content management system for den sags skyld fungerer.dynamisk tags erstatte statisk indhold, således at indholdet kan forvaltes via administrationen grænseflade i stedet for direkte redigering skabelonerne. temaet er stadig ikke helt klar til at blive registreret i wordpress.det mangler et vigtigt skridt, der gør det muligt at vise wordpress temaet korrekt.,, trin 6 - mellem deres vigtigste css med wordpress, et par skridt tilbage. nemt at forbindelse til det, der ikke er stylesheet, fordi de er beliggende i den samme mappe og blot, at navnet på den stylesheet dossier inden for den stylesheet link, er tilstrækkeligt.dette er ikke længere tilfældet.wordpress temaer ikke opholde sig ved roden af lokaliteten, som de er anbragt i, wp indhold » temaer, folder inden for wordpress software. som du kan se nedenfor, når aktivering af temaet i øjeblikket, er vi stadig ikke det fulde billede.om: struktur belastninger, stylesheet ikke er forbundet, som resulterer i en unstyled side, uden at forklare, for meget i detaljer om, hvordan wordpress går med at modellerne fra disse mapper, skal vi være klar over, at sager ikke længere kan være forbundet med lige så let, som vi sammen med dem i et enkelt: lokaliteter.vi skal bruge nogle ekstra wordpress funktioner til at udfylde de skridt, mellem de grundlæggende register og i øjeblikket aktivt tema er mappe.vi gør dette ved hjælp af en anden bloginfo(); funktion, denne gang af adressen til den nuværende aktiveret tema er stylesheet.uanset hvad det hedder temaet mappe, wordpress nu vil udfylde hullerne og indsæt den vej til style.css fil. <?folkesundhedsprogrammet aspektet bloginfo ('stylesheet_url)?> denne funktion er indsat i stylesheet link - < forbindelse href = "stil. css" rel = "stylesheet" type = "tekst /css" />, som nu bliver < forbindelse href = "<?folkesundhedsprogrammet aspektet bloginfo ('stylesheet_url)?> "rel =" stylesheet "type =" tekst /css "/> hvis du inspicere deres kildekode med betragtning kilde eller med noget som ildflue, vil du se wordpress omfatter hele vejen fra roden af lokaliteten, hele vejen til stylesheet.roden folder med mit eksempel område befinder sig ihttp: //////////////////////www.wpbedouine. kom støttehjul.wordpress derfor skaber:, < forbindelse href = "http://www.wpbedouine.com/training-wheels/wp-content/themes/training-wheels-0.1/style.css" rel = "stylesheet" type = "tekst /css" /> det samme, stylesheet_url, funktion vil auto - indsæt den vej, for i øjeblikket aktivt tema på samme måde uden nogen kildekode er udeladt.vil du se et mønster, med bits af hårde kodet indhold bliver erstattet af dynamiske funktioner, som trækker data fra databasen om flyve., føler, at luften strømme gennem dit hår?bare rolig, bremsen vil komme væk hurtigt!jeg lover,.,, trin 7 - tilføje dine filer til wordpress, din index.php og style.css filer i deres egen folder, der hedder baseret på hvad du vil temaet navngives og uploadede til din, wp indhold » temaer, folder inden for deres levende eller virtuelle vært version af din wordpress anlæg som vist nedenfor., trin 8 - aktivering af temaet, og uden tøven gå, udseende » temaer, og klik aktiver under deres nyoprettede tema.for resten af læserne på dette sted, disse skridt har været irriterende simpelt, men jeg kender følelsen af endelig at klikke med denne proces og under min første tema aktiver inden for wordpress.det er uvurderligt for nybegynder.,, trin 9 - et par ekstra dynamiske dele af indholdet, før vi afslutter, lad os bruge et par ekstra, meget simpelt bloginfo(); funktioner til at udfylde dynamisk indhold.vi har allerede indført, bloginfo ('name "), og bloginfo ('stylesheet_url").i det følgende indledende html til header div af vores tema. < div id = "hoved" > <!- header begynder her... > < h1 > < en href = "#" > wordpress støttehjul < /a > < /h1 > < h2 > hjælp til at få dig friløb med wordpress < /h2 > < /div > vi vil erstatte indholdet af h1 forbindelse href attribut, der i øjeblikket er en hash - symbol og normalt ville ligne href = "hjem. html" med, bloginfo ('url), fungerer., < h1 > < en href = "<?folkesundhedsprogrammet aspektet bloginfo ('url)?> "> <?folkesundhedsprogrammet aspektet bloginfo ('name)?> < /a > < /h1 > endvidere vil vi erstatte h2 tema under lokalitetens betegnelse:, <?folkesundhedsprogrammet aspektet bloginfo ('description)?>, så vores kode snippet ser nu meget mere wordpressish. < div id = "hoved" > <!- header begynder her... > < h1 > < en href = "<?folkesundhedsprogrammet aspektet bloginfo ('url)?> "> <?folkesundhedsprogrammet aspektet bloginfo ('name)?> < /a > < /h1 > < h2 > <?folkesundhedsprogrammet aspektet bloginfo ('description)?> < /h2 > < /div > et sidste spørgsmål at løse, er forbindelsen til indholdet image i den midterste kolonne i skemaet.svarende til at knytte de stylesheet, vi skal bruge en bloginfo(); funktion at udfylde i billedet metaboliseringsvej som billeder /imagename.jpg vil ikke længere arbejde. < div id = "midterste kolonne" > <!- vigtigste indhold begynder her... > < h3 > støttehjul lektion 1 < /h3 > < p > < img src = "billeder /støttehjul. jpg" bredde = 426 "højde =" 142 "alat =" støttehjul "/> < /p > < /div >, til at løse dette problem, vi anvender følgende kode før kalder de billeder, fortegnelse, <?folkesundhedsprogrammet aspektet bloginfo ('template_directory)?>, så ender vi med følgende. < div id = "midterste kolonne" > <!- vigtigste indhold begynder her... > < h3 > støttehjul lektion 1 < /h3 > < p > < img src = "<?folkesundhedsprogrammet aspektet bloginfo ('template_directory)?> /images /støttehjul. jpg "bredde = 426" højde = "142" alat = "støttehjul" /> < /p > < /div >,, være opmærksomme på den forwardslash lige efter den sidste kategori, og før de navn billederne mappe.,, trin 10 - en pakke af den proces, vi er omfattet, installere wordpress på lokale eller levende server, forberede din html filer ved at omdøbe dem, omfatter og klippe i dit stylesheet brevhoved bemærkning, at skabe en screenshot.png forpremiere på temaet, tage fat på de grundlæggende wordpress php kode struktur, der forbinder dine stylesheet den wordpress med bloginfo ('stylesheet_url "), at dine filer til wp indhold > emner mappe, aktivering af temaet i instrumentbrættet under udseende > emner, at tilføje et par ekstra bloginfo funktioner for dynamisk indhold.,, bloginfo ('name), bloginfo ('url), bloginfo ('description), bloginfo ('template_directory);,,, bloginfo(); funktion har en masse bruger til at skabe forskellige stykker af indholdet i deres sted, til en mere omfattende liste over parametre for bloginfo(); se wordpress codex dokumentation om denne funktion - http: //codex. wordpress. org /function_reference /bloginfo. en fremragende mulighed for mange wordpress funktioner er dbs - interaktive wordpress mærke, der hovedsageligt er et bedre og mere velordnet fremlæggelse af den kode, der er anført i wordpress codex, har jeg tilføjet. stumper af den kode, der er omfattet af denne lektion til min snipplr konto.,, friløb med wordpress snart trop.jeg hører dem støttehjul rasle ud:),