Good Mood

Dette vil være en sjov tutorial, hvor vi undersøger hvordan at oprette din egen WordPress Theme fra bunden. Faktisk begynder vi med absolut nul filer og nul linjer kode. Den eneste måde at forstå, hvordan Themesordpress-temaer fungerer, er virkelig at hoppe ind på et lavt niveau og gøre hver eneste ting selv. Ja, det er fristende at undgå dette, fordi du kan få .ordpress til at gøre alt for dig uden nogen forståelse af den kode, der driver det., Dette kan være PHP, JavaScript, CSS eller endda den grundlæggende HTML. Ved udgangen af denne trin for trin tutordpress Theme tutorial, vil du forstå, hvordan alt passer sammen, og hvordan man kan bøje .ordpress til din vilje med lethed.

Der er så mange gratis temaer tilgængelige for dig, når du kører et .ordpress-websiteebsted. Ud over de gratis temaer kan du også vælge at betale en præmie for professionelt fremstillede themesordpress-temaer, der ser godt ud og har fantastiske funktioner. Så hvorfor lære at oprette dit eget tema fra bunden?, Svaret er, at uanset hvilket tema du bruger, vil der komme et tidspunkt, hvor du vil foretage enkle ændringer på dit websiteebsted. Nogle af disse ændringer kan være i stand til at blive imødekommet af en simpel plugin eller wididget. Mange gange er det dog mere fornuftigt at forstå, hvad det er, du vil ændre, hvordan du ændrer det, og undgå at omdanne dit .ordpress-websiteebsted til et rod af plugins og tilføjelser, der bliver uhåndterlige. Med bare en smule fundament niveau viden, vil du være sikker på at ændre dit tema, eller blot bygge din egen fra bunden., Du ved, hvilken fil der skal redigeres, og hvilken kode du skal tilføje eller ændre for at oprette det ønskede resultat.

Trin 1: Opret en mappe til at holde dine temafiler.

hvis vi skal bygge temaer, skal vi vide, hvor de filer, der udgør et themeordpress-tema, bor i en Installationordpress-Installation. Det er ret nemt. Vi ved, at en installationordpress-installation typisk har en rodmappe med navnet wordpress. Her er, hvad vores rodmappe ser ud i PHP Storm.,

Denne mappe indeholder følgende filer og mapper:

Filer

Mapper

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

Den mappe, som vi er mest interesseret i lige nu er wp-content mappe. I mappen contentp-indhold er en mappe med navnet temaer. Ved du, hvad denne mappe er til? Ja, det er rigtigt! Det er den mappe, der indeholder et eller flere temaer, som du gerne vil bruge til dit .ordpress-websiteebsted., I denne temamappe finder vi yderligere tre mapper med T .entyfifteen, t .entysi .teen og T .entyseventeen. Disse mapper indeholder de tre temaer, som .ordpress leveres med som standard. Bemærk nedenfor, at der også er en mappe med navnet customtheme. Gå videre og oprette denne mappe samt i din installation, da det er her, vi vil skabe vores .ordpress tema fra bunden.

Trin 2: Opret stil.css og indeks.php i din brugerdefinerede tema mappe

Vi ved nu, hvor themeordpress tema filer er i filsystemet., Vi har også oprettet en ny mappe med navnet customtheme i vores temaer mappe. Vi skal nu oprette to tomme filer i denne mappe. Den ene hedder indeks.php og den anden kaldes stil.css.

lad os nu udfylde disse filer med det blotte minimum, vi har brug for at få et nyt tema går i .ordpress.

stil.css

readsordpress læser faktisk de kommentarer, du placerer i stilen.css-fil. Det er her, du angiver specifikke oplysninger om det tema, du bygger.

stilen.,css er en stylesheet (CSS) fil, der kræves for hver .ordpress tema. Det styrer præsentationen (visuelt design og layout) af hjemmesiden sider.

i vores Uddrag her tildeler vi blot et temanavn, forfatteren, forfatteren URI og versionsnummeret på vores tema.,

indeks.,php

i denne fil vil vi bare sende noget til skærmen for at bevise, at vores brugerdefinerede tema virker.

Great Job! Tro det eller ej, har du oprettet din første .ordpress tema.,

Trin 3: Aktivering af dit tema fra WordPress Dashboard

På dette punkt kan vi besøge vores WordPress Dashboard, og naviger til Udseende->Temaer, og lo og se, vi kan se det nye tema har vi skabt.

Vi kan klikke på “Temadetaljer” for at bore ned på vores brugerdefinerede tema og finde ud af, at de oplysninger, vi havde indgået i stilen.css-filen har fungeret. Vi kan se dem har et navn på customtheme, Med Version 1.0, af forfatteren Vegibit, og et link til URI vi havde givet. Meget cool.,

og nu sandhedens øjeblik! Gå videre og klik på “Aktiver” på den nye brugerdefineretema og derefter besøge theebstedet. Det kommer ikke til at vinde nogen awardsebby a !ards, men vi har fået vores selv en god start på en ny brugerdefineret tema!

Trin 4: Tilføj Kode til at sende Indlæg, Titel og Post-Tekst

Vi har tager mig den frihed at udfylde et par eksempel stillinger i databasen, så vi kan arbejde med, at data i denne tutorial. Lige nu, vores tema bare udgange brugerdefinerede tema!, til siden, når vi besøger vores hjemmeside, uanset hvor mange indlæg der er i databasen. Lad os nu gå til at hente nogle data fra databasen og udsende dem til siden. Specifikt ønsker vi at hente posttitel og Postindhold for alle indlæg og se dem på hjemmesiden. Lad os prøve det nu. Lad os først se, hvad vi har til indlæg i Dashordpress-instrumentbrættet.

Udnytte WordPress Loop

Nu kan vi snakke lidt om WordPress Loop. Loopordpress-løkken er virkelig den motor, der får .ordpress til at køre., Det er via denne løkke, at temaudviklere tjekker for indlæg og viser dem på siden efter behov. Hvis følger formatet som følger. Hvis databasen har indlæg, lad os sløjfe over dem, mens der stadig er indlæg, ellers vil vi lade brugeren vide, at der ikke er nogen indlæg. Det ser sådan ud i PHP-kode.,

Bemærk, at Løkken gør brug af to funktioner i den mest basale form. Det er have_posts() og the_post (). Funktionen have_posts () gør kun .n ting. Det fortæller dig, om der er nogen indlæg i databasen til loop over., Denne funktion returnerer enten true eller false og det er det. Hvis det returnerer true, så er der indlæg til rådighed for loop over. Hvis det returnerer false, så er der ingen indlæg at sløjfe over. Den anden funktion, the_post() returnerer ikke noget. Det er jobbet er at få readyordpress klar til output indlæg. Specifikt henter den det næste indlæg, indstiller indlægget, indstiller in_the_loop ejendom til true., Indtil videre vil vores side stadig ikke udsende nogen oplysninger om vores blogindlæg, men vi kan opdatere det nu i vores indeks.php-fil.

Ok cool. Vi har nu gjort brug af to ekstra functionsordpress funktioner, the_title() og the_content(). Oftest bruges disse funktioner inde i løkken, og hvad de gør er at hente titlen og indholdet af hvert indlæg, når løkken gentager sig over hver enkelt i databasen. Så når løkken løber, kommer den på tværs af det første indlæg., På det tidspunkt vil funktionen the_title() udsende titlen på indlægget til siden, og the_content() udsender kroppen af det indlæg til siden. På den næste løkke disse funktioner vil igen hente den næste titel og indhold og output dem til siden. Så med disse på plads, vi skulle nu se nogle oplysninger om vores indlæg bliver sendt til skærmen. Lad os prøve det! Vi besøger http://wordpresstutorial.dev og se det virker!,

Trin 5: Tilføj et Link Til Hver Post

Hvad med at linke til hvert enkelt indlæg, så vi kan se et indlæg på sin egen snarere end som en del af netop den hjemmeside. Vi kan gøre det ganske let, igen med specielle funktioner, som .ordpress leverer. Til denne opgave kan vi gøre brug af funktionen the_permalink (). Vi kan opdatere vores kode som sådan:

nu kan vi klikke på hver enkelt posttitel og navigere til en side, der har netop det ene indlæg. Meget cool!,

Trin 6: Tilføj en overskrift og sidefod til det brugerdefinerede tema

titlen og Postindholdet er centrale for at skabe et godt tema. Næsten lige så vigtigt er at have en sidehoved og sidefod sektion af dit tema. Disse afsnit vil indeholde det indhold, der altid er synligt på alle sider på hjemmesiden. Disse afsnit er over og under indlægets indhold. For at gøre dette, gættede du det, vi vil gøre brug af specielle funktioner leveret af .ordpress for at få overskriften og for at få sidefoden. Ser du et mønster, der begynder at udvikle sig endnu?, Næsten alt, hvad du kan gøre som et tema udvikler i .ordpress er allerede blevet gjort for dig ved hjælp af disse brugerdefinerede funktioner. Så du vil opdage, at det betaler sig at huske disse almindeligt anvendte funktioner i developmentordpress tema udvikling. Lad os gå videre og tilføje get_header() og get_footer() funktioner til vores tema fil nu.

Nå vil du se på det?! Vi kan se, at vores brugerdefinerede tema nu har et overskriftsområde såvel som et sidefodsområde., I overskriften er navnet og tagline på siteebstedet, mens vi i sidefoden ser den velkendte tekst, poweredordpress Tutorial er stolt drevet af .ordpress. Disse er standard header og footer muligheder, når du bruger disse funktioner. Hvad med når vi vil have en brugerdefineret overskrift og sidefod? Kommer lige op!

fra 2 Temafiler til 4

indtil videre i denne tutorial har vi to filer, der bor i vores customtheme-mappe (som i sig selv er i mappen Temaer). Disse filer er stil.css og indeks.php. På dette tidspunkt bliver vi nødt til at tilføje flere filer for at komme videre., Gå videre og opret to nye filer i mappen customtheme. Disse filer vil blive bekvemt kaldes header.php og sidefod.php.

Nu, hvad disse filer vil gøre, er at overskrive standardsidehoved og en standardsidefod, layout, der leveres som standard, når du ringer enten get_header() eller get_footer () – funktioner. Faktisk, hvis vi opdaterer vores hjemmeside, ser det ud til, at overskriften og sidefoden er væk. Dette skyldes, at vi endnu ikke har tilføjet nogen markering til disse filer. Bare for grin, Opsæt filerne som sådan for at teste dette ud.

header.,php

footer.,php

Working with header.,php

vores eksempel ovenfor fungerede godt, og det viser os, hvordan denne fil fungerer på det mest basale niveau. Header.php-fil er faktisk ganske vigtigt dog, så lad os ikke glans over detaljerne i det for hurtigt! Det er her du inkluderer kode, som alle sider på dit .ebsted skal have adgang til på en eller anden måde. Til at begynde med vil alle HTML-sider have en doctype. Du vil angive, at i denne fil. Derudover vil alle sider har en åbning html-tag, et hoved sektion, og en åbning krop tag. Alt dette kan gå i overskriften.php-fil., Lad os hurtigt tilføje nogle af disse ting, som alle webebsider ville gøre brug af. Vi vil også gøre brug af et par nye functionsordpress-funktioner her. Disse vil være language_attributes (), bloginfo () og body_class ().

header.php

Hvis vi genindlæser siden og derefter ser kilden til siden i vores bro .ser, kan vi få en ID.om, hvad disse funktioner gør. Vi fremhæver de linjer, der har output, der kom fra disse funktioner nedenfor:

igen kan vi se den meget liberale brug af functionsordpress-funktioner, når du udvikler dine egne temaer i .ordpress., Faktisk har vi ikke skrevet nogen brugerdefineret kode overhovedet endnu. Vi er simpelthen at lære, hvad de forskellige functionsordpress funktioner kan tilbyde os, og derefter sætte dem til at arbejde i vores brugerdefinerede tema.

inklusive _head ()

wp_head() er en slags speciel funktion, når du arbejder med .ordpress-temaer. Det er ikke helt så enkelt som alle de andre, vi har set på indtil videre. Formålet med denne funktion er at afslutte output i afsnittet <head> i din overskrift.php-fil., Faktisk er det meningen at gå lige før lukningen </head> tag. Dette bliver vigtigt, når du begynder at tilføje forskellige plugins til dit .ebsted. Det udskriver scripts eller data i hovedet tag på den forreste ende. Det er en god idé altid at omfatte wp_head() i din temaer, som mange andre plugins kan stole på denne krog for at tilføje stilarter, scripts, eller meta-elementer i <chef> område af hjemmesiden. Vi tilføjer det som sådan her:

header.PHP

færdiggørelse af sidefod.,php

Vi er færdige med at tilføje det grundlæggende om, hvad vi har brug for i overskriften.php-fil. Lad os nu gå videre og runde ud sidefoden.php-fil. Det er et par ting, vi skal gøre. Husk det i vores overskrift.php fil vi har åbning html og krop tags. De skal lukkes på et tidspunkt. Sidefod.php-fil er et perfekt sted at gøre det. Så vil vi tilføje closing </html> og </enhed> tags ud over at foretage et opkald til den wp_footer() funktion.
sidefod.,php

Ændring af Oplysninger I WordPress Instrumentbrættet

Du kan være undrende, hvorfor vi var nødt til at gøre brug af alle disse smarte funktioner til at opbygge vores tema. For eksempel, når vi ønskede at liste ud navn og tagline af vores hjemmeside, vi gjort brug af bloginfo() funktion passerer parametre for navn og beskrivelse., Grunden til dette er fordi generelt, du aldrig ønsker at hårdt kode disse værdier i dit .ebsted. Dette er oplysninger, der kan ændre sig. Derudover, hvis du gør dit tema tilgængeligt for offentligheden, vil de have deres eget navn og tagline til deres hjemmeside. De skal være i stand til blot at besøge admin dashboard i .ordpress og opdatere deres generelle indstillinger for at se disse data udfyldes automatisk.

oprettelse af linket til Siteebstedets Titel til hjemmesiden

de fleste temaer giver mulighed for at klikke på titelteksten på websiteebstedet og dirigere brugeren til siteebstedets hjemmeside., Denne måde, uanset hvor brugeren kan være på sitet, de kan altid klikke på denne titel tekst og gå helt tilbage til hovedsiden af hjemmesiden. Lad os tilføje det link nu i overskriften.php.

Trin 7: Tilføj en Funktioner.php fil til dit tema

På dette tidspunkt har vi fire filer i vores brugerdefinerede tema. Det er indeks.php, stil.css, header.php, og sidefod.php. Sandsynligvis er den næste vigtigste fil, vi skal have, funktionerne.php-fil.

funktionerne.php-fil i phordpress gør mange ting for dit tema. Det er den fil, hvor du placerer kode for at ændre standardadfærden for .ordpress., Du kan næsten tænke på funktionerne.php som en form af et plugin til WordPress, med et par vigtige punkter at huske på:

• ikke kræver unikke Header tekst
• der er Gemt i mappen, der holder din tema-filer
• Udfører kun når den aktuelt aktive tema mappe
• Gælder kun for det aktuelle tema
• Kan ringe til PHP-funktioner, WordPress funktioner, eller brugerdefinerede funktioner

En ting, vi har brug for dårligt i vores tema er nogle bedre styling! Lad os oprette en funktion i vores funktioner.php fil til at omfatte den stil.css-fil i vores tema., Her er hvordan vi kan nå dette mål.

dette stykke kode vil omfatte, eller gøre aktiv, stylesheet af vores brugerdefinerede tema. Nu Kan du undre dig over, hvorfor vi bruger en brugerdefineret funktion, når det ser ud til, at vi lige så let manuelt kunne linke til stylesheet selv i overskriften.php-fil. Nå, det kommer til at gøre lidt mere arbejde foran for et større afkast af din indsats senere. Efterhånden som temaer bliver mere komplekse og flere aktiver tilføjes, vil du være glad for at have denne ene funktion, der kan håndtere al den tunge løft for dig.,

nu er det tid til at få tingene til at se lidt mere smukke ud. Lad os først tilføje en indpakning <div> med en klasse af beholder. Åbningen <div> vil være i overskrift.php, mens lukningen <div> vil være i sidefod.php. Vi vil også pakke post output i indeks.php med en <artikel> tag, der har en klasse af indlæg. Dette vil give os klasser til at målrette i vores stil.,CSS-fil, så vi kan indstille sidebredde blandt andet. Vi vil også tilføje nogle bedre styling til stil.css i dette trin.

Trin 8: Tilføj nogle stil til dit tema

header.PHP
tilføjelse af en åbning <div> til overskriften.php-fil.

sidefod.PHP
tilføjelse af en lukning </div> til sidefoden.php-fil.

indeks.php
Indpakning indlæg output med en <artikel> tag

style.,CSS
endelig tilføjer vi nogle forskellige forbedringer af CSS-stil for at få temaet til at se lidt pænere ud.

Når vi besøger vores test er hjemmesiden nu i browseren, kan vi se, at WordPress Tema, som vi har udviklet trin for trin i denne tutorial ser ret godt ud!

WordPress Tema Udvikling Tutorial Trin for Trin Resumé

Lad os gennemgå alt det, vi har lært i dette grundlæggende trin for trin WordPress Tema selvstudium for begyndere., Vi har lært at oprette vores første brugerdefinerede tema i .ordpress ved at lave vores egen mappe i siden af temamappen i vores installationordpress-installation. I denne mappe tilføjede vi forskellige filer, der svarer til forskellige sektioner på dit websiteebsted. I vores tutorial, har vi startet med de nøgne minimumsbeløb, du skal have i en .ordpress tema. I fremtiden vil du tilføje mange flere filer til denne mappe end hvad vi har dækket. Lad os gennemgå hver fil, vi oprettede i denne tutorial, og hvad de gjorde for os.

• stil.,css denne fil er, hvor du tilføjer nogle CSS kommentarer, så .ordpress kender nogle oplysninger om din brugerdefinerede tema. Det holder også den brugerdefinerede css styling, som du vil anvende til dit tema.
• indeks.php denne fil styrer html og generelle output af dit tema. Det er den vigtigste fil, der bruges til at udsende data på din startside.
• header.,php Giver dig mulighed for at angive et område, til at holde vigtige oplysninger om dit websted i <chef> område samt herunder åbning af <html> <body> og ,<div class=”container”> tags.
• sidefod.php sidefoden lukker alle åbningskoder, du har angivet i overskriftsområdet, ud over at give dig et sted at ringe til functionp_footer () – funktionen.
• funktioner.,php giver dig mulighed for at ringe til funktioner, både PHP og indbygget PHORDPRESS, og definere dine egne funktioner for at ændre standardadfærden for rdpress

så der har du det! Vi var i stand til at skabe en fuldt fungerende brugerdefineret customordpress tema med kun 5 filer. Dette giver os fundamentet niveau viden til at bygge mere avancerede themesordpress temaer og funktioner. Godt Arbejde!