Å lage det perfekte WordPress-temaet Slik kodes du godt

I den forrige delen av denne serien; Vi gikk gjennom ulike WordPress APIer som vi skulle lære om, snakket om betydningen av å gjøre et tema oversettbart (eller enda bedre, slippe dem allerede oversatt til andre språk) og forsto konseptet om lisensiering av temaer og bruk av lisensierte produkter med temaene.

I denne artikkelen skal vi fokusere på kode: Vi ser hvordan du kodes med WordPress-kodingsstandarder, hvordan du korrekt kommenterer koden vår og hvordan du kan validere og teste temaet.

---

WordPress-kodingsstandarder

Ja, jeg vet at du har din egen foretrukne kodestil: Du liker å komprimere en stor funksjon med en enkelt linje med kode, du liker ikke hvite plass så mye - Ah, jeg var en gang akkurat slik.

Men hvis du skal utvikle for andre mennesker og bokstavelig talt selg koden din, du må gjøre koden din forståelig. Og mens du kanskje tror at koden din er "klar nok", er det universelle standarder for koding for å hjelpe alle med samme stil og alle seriøse temamarkeder og nedlastingssentre (fra WordPress.org til ThemeForest) krever du skal kode med standarder.

Det er fire hovedprogrammering og opprettingspråk som trengs for å utvikle WordPress-temaer: HTML, CSS, JavaScript og selvfølgelig PHP. La oss ta en titt på hver:

HTML-standarder

Det er relativt enkle regler for å skrive standard-kompatibel HTML-kode:

• Bekreft koden din med W3C. Alltid. Vi kommer til det senere.
• Vær forsiktig med selvlukkende elementer: Du må avslutte elementet med et mellomrom, et skråstrek og "større enn" -tegnet.
• Når du skriver attributtverdier, skriv dem alle i små bokstaver - med mindre det er for mennesker.
• Vri alltid attributtverdiene dine med anførselstegn. Både enkelt og dobbelt anførselstegn er akseptabelt.
• Innrykk skal være logisk og lesbar. PHP-kode blandet i HTML-en, bør ikke være et unntak.

Ta en titt på WordPress HTML Standards-siden ved å lage WordPress for mer informasjon.

CSS standarder

Listen er litt lengre, men igjen er det enkle regler for riktig CSS-koding:

• Egenskaper skal være innrykket med faner.
• Du kan gruppere selectors, men hver velger må ha sin egen linje for lesbarhet.
• Navn alle dine klasse og id selektorer med små bokstaver og ikke glem å skille ord med bindestreker.
• Bruk lesbare selektorer. .c6 er ikke et godt navn - navn det .kolonne sjettedel!
• Ingen overkvalifisering. div.column er meningsløst når du bare kan bruke .kolonne.
• Egenskaper og deres verdier bør også være små, unntatt fontnavn og leverandørspesifikke egenskaper.
• Bestilling for egenskapene må være "display, posisjonering, boks modell, farger, typografi og annet".
• Du bør også bestille leverandørens prefikser fra lengst (-webkit-) til korteste (ingen prefiks).
• Hold mediene dine på bunnen av stilarket ditt.
• Kommentar CSS-koden din som du kommenterer i PHP. Mer om det senere.

Se WordPress CSS Standards-siden på Lag WordPress for en mer detaljert forklaring.

JavaScript-standarder

Siden i dag JavaScript blir viktig for mange WordPress-temaer, trenger vi også standarder og regler for det:

• Braces kan ikke Åpne og lukk innenfor samme linje.
• Foretrekker enkelt anførselstegn over dobbelt anførselstegn, med mindre en streng inneholder enkle anførselstegn.
• Du er fri til å bruke hvitt plass som du vil i koden din - bruk ikke hvitt plass på tomme linjer, skjønt. Og ikke glem at du bruker hvitt plass for lesbarhet - ikke for moro skyld.
• Navngi dine funksjoner og variabler med Camelcase, not_with_underscores. Byggerne skal være i TitleCase.
• Du kan erklære flere variabler på en enkelt linje; men hvis du skal tilordne verdier, trenger du separate linjer.
• De Ny Array () og nytt objekt () notater er "nei nei" s. Bruk stenografiekvivalenter ([] og ) i stedet.
• Behandle conditionals og sløyfer veldig delikat - de er vanligvis det enkleste å misforstå. Bruk av seler og hvite plass er nøkkelen til dette.
• Hvis du skal bruke jQuery; definer en anonym funksjon, og send jQuery som argumentet før du gjør noe annet. Sjekk eksemplet for å være sikker på.

WordPress JavaScript Standards-siden på Lag WordPress har mer informasjon, bokmerke denne siden og bruk den.

PHP standarder:

Dette er den vanskeligste delen. Det er tonnevis av regler å vurdere:

• Naming conventions
• Enkelt og dobbelt anførselstegn
• Whitespace bruk
• Vanlig uttrykk
• "Yoda betingelser"
• Spesiell gjestestjerne SQL og formatering av databasespørsmål

Hvis du ikke vet hva de er, er det kanskje ditt beste kurs å tråkke lett.

Det er to fantastiske ressurser for deg å lære det, skjønt:

1. WordPress PHP Standards-siden på Lag WordPress
2. Wptuts + -serien kalt "The WordPress Coding Standards" av Tom McFarlin

Riktig kommentere koden din

For å la andre utviklere forstå hvordan du har laget temaet ditt, må du gjøre tema koden klar og lesbar - og dette krever å kommentere koden din.

Den beste praksis for PHP er å bruke PHPDoc, dokumentasjonsstilen til phpDocumentor. Det er mye brukt mellom WordPress-utviklere og anbefalt i PHP Documentation Standards-siden på Lag WordPress. Den gir en ren dokumentasjonsstil for PHP-koden din.

Når det gjelder CSS, vil WordPress CSS Standards-siden på Make WordPress anbefale deg å gjøre det som PHPDoc, sammen med et par andre forslag.

Når det gjelder HTML- og JavaScript-koden, ser det ut til at det ikke er anbefalt eller nødvendig måte å kommentere koden på, men dette betyr ikke at du ikke trenger å gjøre noe: Prøv å være så tydelig som mulig med koden din og gi små biter av informasjon ved å kommentere hvor som helst du finner nødvendig.

---

Validere og teste temaet

Temaet kan fungere som et pent nettsted i hodet ditt, men forhåpentligvis vil det være hundrevis (kanskje tusenvis) av folk som kommer til å bruke temaet ditt og være sikker på at de vil prøve å lage nettsteder som du kanskje ikke kan tenke av. I tillegg er det krav til temamarkeder og temakataloger for å trekke temaet sammen.

Det er derfor du må teste temaet ditt og validere koden din. Jeg har tre ideer for det:

Bekreft HTML og CSS med W3C Validators

Det første du må gjøre er å validere koden din med valideringstjenestene til W3C. Både HTML Markup Validator og CSS Validator-tjenestene blir brukt og utviklet i mange år, og de er de beste valideringstjenestene som er tilgjengelige..

Etter at du har gjort de to tingene nedenfor, må du bare sjekke demo sidene med disse to tjenestene for å sikre at det ikke er noen feil eller advarsler.

Bruk "Utvikler" -pluggen for å korrigere temaet ditt

Utvikler er en gratis plugin utviklet av Automattic som, i sine ord, Hjelp WordPress utviklere utvikle. Det er faktisk bare en plugin installer: Hovedformålet med plugin er å gi de nødvendige pluginene for ditt utviklingsmiljø.

Utvikler foreslår 16 forskjellige plugins. Mens noen av dem gjør utviklingsprosessen mye enklere (som User Switching og Theme Test Drive), hjelper noen av dem med å feilsøke temaet ditt (for eksempel Log Utdatert Merknader og Tema Kontroll).

De som jeg finner mest nyttige er Theme Check, Theme Test Drive og Debug Bar, men alle 16 plugins gir flotte funksjoner. Jeg foreslår at du installerer dem alle for å teste hælen ut av temaet ditt.

Test ditt tema med testdata

Du kan ikke bare kode temaet og si at det er fullført - du må teste det med litt innhold. Du kan lage ditt eget innhold, men du bør vurdere å teste med noen "testdata":

• Bruk WordPress 'eksempeldata. Denne eksempeldata inneholder noen av de mest brukte innholdstypene, og vil hjelpe deg med å legge merke til mangler i temaet ditt mot innhold du glemte å vurdere.
• Bruk mer uttømmende testdata. WPTest.io er et lite nettsted med en skummelt samling av sample WordPress innhold. Jeg tuller ikke: Fra menyelementer som går på 10 nivåer dype og Amazon Store, er dette den mest uttømmende testdata jeg noensinne har sett. Jeg har aldri testet et tema med dette utvalgsinnholdet, men hvis du lykkes med å gjøre temaet ditt arbeid med disse dataene, trenger du sannsynligvis ikke å bekymre deg for at temaet ser kjedelig ut i et hvilket som helst scenario.

Den eneste ulempen ved disse to testene er at du ikke vil kunne teste innholdet ditt med kortkoder eller typen spesifikt innhold du hadde i tankene mens du utviklet temaet. Jeg foreslår at du tester temaet med minst WordPress 'eksempeldata, og opprett deretter ditt eget innhold. Tross alt, du trenger solid innhold når du oppretter demo-nettsiden for temaet ditt.

---

Wrapping Up

I denne artikkelen; Vi gikk gjennom prosessene for korrekt koding og kommentere med noen standarder, så vi så hvordan vi kan validere vår kode og teste vårt tema. I neste del av serien ser vi på noen dårlig praksis.

Hold deg innstilt og ikke glem å dele artikkelen, hvis du likte det!