Gör det perfekta WordPress-temat Hur kodar du väl

I den föregående delen av denna serie; Vi gick igenom olika WordPress API som vi bör lära oss om, pratade om vikten av att göra ett tematranslation (eller ännu bättre, släppa dem redan översatt till andra språk) och förstod begreppet licensiering av teman och använda licensierade produkter med teman.

I den här artikeln kommer vi att fokusera på kod: Vi får se hur du kodar med WordPress-kodningsstandarder, hur du korrekt kommenterar vår kod och hur du validerar och testar temat.

WordPress kodningsstandarder

Ja, jag vet, du har din egen föredragna kodstorlek: du gillar att komprimera en stor funktion med en enda rad kod, du gillar inte så mycket rymden - Ah, jag var en gång bara så.

Men om du ska utveckla för andra människor och bokstavligen Sälj din kod, Du måste göra din kod förståelig. Och medan du kanske tror att din kod är "tillräckligt klar" finns det universella standarder för kodning för att hjälpa alla att koda med samma stil och alla seriösa temamarknader och nedladdningscenter (från WordPress.org till ThemeForest) fordra du kodar med standarder.

Det finns fyra huvudprogrammering och markup språk som behövs för att utveckla WordPress-teman: HTML, CSS, JavaScript och naturligtvis PHP. Låt oss ta en titt på var och en:

HTML-standarder

Det finns relativt enkla regler för att skriva standarder som är kompatibla med HTML:

Bekräfta din kod med W3C. Alltid. Vi kommer senare till det.
Var försiktig med självstängande element: Du måste avsluta elementet med ett mellanslag, ett snedstreck och signalen "större än".
När du skriver attributvärden skriver du dem alla i små bokstäver - såvida det inte är för människor.
Vik alltid dina attributvärden med citat. Både enkla och dubbla citat är acceptabla.
Inryckningen måste vara logisk och läsbar. PHP-kod blandad i HTML-filen borde inte vara ett undantag.

Kolla in WordPress HTML-standardsidan på Gör WordPress för mer information.

CSS-standarder

Listan är lite längre, men igen finns det enkla regler för korrekt CSS-kodning:

Egenskaper ska vara indragna med flikar.
Du kan gruppera väljare men varje väljare måste ha sin egen linje för läsbarhet.
Namnge alla dina klass och id selektorer med små bokstäver och glöm inte att skilja ord med bindestreck.
Använd läsbara väljare. .c6 är inte ett bra namn - namnge det .kolonn sjättedel!
Ingen överkvalificering. div.column är meningslöst när du bara kan använda .kolumn.
Egenskaper och deras värden bör också vara små, förutom typsnitt och leverantörsspecifika egenskaper.
Beställa för egenskaperna måste vara "display, positionering, boxmodell, färger, typografi och annat".
Du bör också beställa leverantörs prefix från längsta (-webkit-) till kortast (inget prefix).
Håll dina mediafrågor längst ner i ditt stilark.
Kommentera din CSS-kod när du kommenterar i PHP. Mer om det senare.

Se WordPress CSS Standards-sidan på Gör WordPress för en mer detaljerad förklaring.

JavaScript-standarder

Eftersom JavaScript för närvarande blir avgörande för många WordPress-teman, behöver vi standarder och regler för det också:

Hängslen kan inte öppna och stänga inom samma linje.
Föredra enkla citat över dubbla citat, såvida inte en sträng innehåller enkla citat.
Du är fri att använda blankutrymme som du vill ha i din kod - använd inte blankutrymme på tomma linjer. Och glöm inte att du använder whitespace för läsbarhet - inte för skojs skull.
Namnge dina funktioner och variabler med Camelcase, not_with_underscores. Konstruktörer borde vara i TitleCase.
Du kan deklarera flera variabler på en enda rad; men om du ska tilldela värden behöver du separata linjer.
De ny Array () och nytt objekt () noteringar är "nej nej" s. Använd stenografiekvivalenter ([] och ) istället.
Behandla conditionals och loopar mycket delikat - de är vanligtvis det enklaste att missvisa. Använda hängslen och vitt utrymme är nyckeln till detta.
Om du ska använda jQuery; definiera en anonym funktion och skicka jQuery som argumentet innan du gör något annat. Kontrollera exemplet för att vara säker.

WordPress JavaScript Standards-sidan på Make WordPress har mer information, bokmärke den här sidan och använd den.

PHP Standarder:

Detta är den svårare delen. Det finns massor av regler att tänka på:

Namnkonventioner
Enkla och dubbla citat
Whitespace-användning
Vanliga uttryck
"Yoda villkor"
Särskild gäststjärna SQL och formatering av databasfrågor

Om du inte vet vad de är, så kanske din bästa kurs är att trösta lätt.

Det finns två fantastiska resurser för dig att lära dig, men:

WordPress PHP Standards sida på Gör WordPress
Wptuts + -serien heter "The WordPress Coding Standards" av Tom McFarlin

Korrekt kommenterar din kod

För att låta andra utvecklare förstå hur du skapade ditt tema måste du göra din temakod klar och läsbar - och det krävs att du kommenterar din kod.

Den bästa praxis för PHP är att använda PHPDoc, dokumentationsstilen för phpDocumentor. Det används ofta mellan WordPress-utvecklare och rekommenderas på sidan PHP Documentation Standards på Make WordPress. Det ger en ren dokumentationsstil för din PHP-kod.

När det gäller CSS rekommenderar WordPress CSS Standards-sidan på Make WordPress att du gör det som PHPDoc, tillsammans med ett par andra förslag.

När det gäller din HTML- och JavaScript-kod verkar det som om det inte finns något rekommenderat eller nödvändigt sätt att kommentera din kod, men det betyder inte att du inte behöver göra någonting: Försök att vara så tydlig som möjligt med din kod och tillhandahålla lite bitar av information genom att kommentera var som helst du finner nödvändigt.

Validera och testa teman

Temat kan fungera som en snygg webbplats i ditt huvud, men förhoppningsvis kommer det att finnas hundratals (kanske tusentals) människor som kommer att få använda ditt tema och vara säker på att de kommer att försöka skapa webbplatser som du inte kan tänka dig av. Dessutom finns det krav på temamarknader och tematekster för att du ska kunna dra ditt tema tillsammans.

Det är därför du måste testa ditt tema och validera din kod. Jag har tre idéer för det:

Bekräfta din HTML & CSS med W3C Validators

Det första du behöver göra är att validera din kod med W3C-valideringen. Både HTML Markup Validator och CSS Validator tjänster används och utvecklas i åratal och de är de bästa validerings tjänsterna tillgängliga.

När du har gjort två saker nedan, kolla bara demosidorna med dessa två tjänster för att se till att det inte finns några fel eller varningar.

Använd verktyget "Developer" för att korrigera ditt tema

Utvecklare är en gratis plugin utvecklad av Automattic som, i sina ord, Hjälp WordPress utvecklare utvecklas. Det är egentligen bara en plugin installer: Huvudsyftet med plugin är att tillhandahålla de nödvändiga plugins för din utvecklingsmiljö.

Utvecklaren föreslår 16 olika plugins. Medan vissa av dem gör din utvecklingsprocess mycket enklare (som användarväxling och tematestdrivning), hjälper vissa av dem dig att felsöka ditt tema (som Log Utdaterade meddelanden och temakontroll).

De som jag tycker är mest användbara är temakontroll, tematestdrivning och debugbar men alla 16 plugins ger bra funktioner. Jag föreslår att du installerar dem alla för att testa heck ur ditt tema.

Testa ditt tema med testdata

Du kan inte bara koda temat och säga att det är klart - du måste testa det med lite innehåll. Du kan skapa ditt eget innehåll, men du bör överväga att testa med vissa "testdata":

Använd WordPress 'provdata. Denna provdata innehåller några av de mest använda innehållstyperna och hjälper dig att märka ditt temas brister mot innehåll som du glömde att överväga.
Använd mer uttömmande testdata. WPTest.io är en liten hemsida med a skrämmande samling av provet WordPress-innehåll. Jag skojar inte: Från menyalternativ som går på 10 nivåer djupa och Amazon Store, är detta den mest uttömmande testdata jag någonsin har sett. Jag har aldrig testat ett tema med detta provinnehåll, men om du lyckas få ditt tema att fungera med dessa data behöver du nog inte oroa dig för att ditt tema ser tråkigt ut i något scenario.

Den enda nackdelen med dessa två test är att du inte kommer att kunna testa ditt innehåll med kortnummer eller typen av specifikt innehåll som du hade i åtanke när du utvecklade temat. Jag föreslår att du testar temat med åtminstone WordPress 'provdata och skapar sedan ditt eget innehåll. När allt kommer omkring behöver du solidt innehåll när du skapar demowebbplatsen för ditt tema.

Avslutar

I den här artikeln; vi gick igenom processerna för korrekt kodning och kommenterar med några standarder, så vi såg hur vi validerar vår kod och testar vårt tema. I nästa del av serien ser vi på några dåliga rutiner.

Håll dig stillad och glöm inte att dela artikeln om du gillade det!

Koda