Nå har de fleste bloggere som bruker WordPress, oppgradert til den nyeste versjonen av WordPress som er offisielt på versjon 3.0.1 .

Sammen med oppdateringer til kjernevirksomheten, da versjon 3.0 ble utgitt, lagde WordPress-teamet også et nytt standardtema, som erstattet den nå foreldede Kubrick . Det nye temaet, som de fleste av dere er sannsynligvis klar over, kalles Tjue ti .

For ikke å høre for kornaktig her, men fra det første øyeblikk jeg la øynene på tjue ti, ble jeg forelsket i det. Men jeg snakker ikke om temaets visuelle design (som er ganske humdrum); Jeg snakker om front-end-koden, som har sett en rekke forbedringer i forhold til det forrige standardtemaet .

I denne artikkelen vil jeg diskutere noen av disse forbedringene som jeg føler er verdig til eksamen og imitasjon.

Og husk at dette ikke er en diskusjon av egenskapene til selve temaet; Dette er en diskusjon av strukturen og organisasjonen av HTML og CSS, og hvordan den gir en utmerket modell å følge for utviklere i fremtiden.

Det er HTML5 Klar

Det første du vil merke når du ser kilden til temaet tjue ti er den forenklede doktypen, som betyr at den er teknisk i stand til å bruke HTML5. Så, mens det ikke er noen av de vanlige HTML5-elementene i temaet (som og), er HTML5-doktypen et skritt i riktig retning.

Du vil legge merke til i kilden at det er noen andre oppmerkingsforenklinger: tegnkodningsdeklarasjonen forenkles, og HTML-elementet har ikke "xlmns" -attributtet. Begge disse forbedringene er basert på HTML5-spesifikasjonen.

Så selv om du ikke bruker noen av de vanlige HTML5-elementene i sidene dine, kan du likevel gjøre sidene dine HTML5-klare ved å inkludere den nye forenklede doktypen , og fjerne noen av de andre snart utgåtte elementene, og dermed følge eksemplet til utviklerne av tjue ti.

Korrekt bruk av h1-merket

Dette er en forbedring som er enklere å undersøke når man ser på de faktiske PHP-filene som lager oppslaget, og utgjør en konkret forbedring over Kubrick for best practices SEO, semantikk og tilgjengelighet .

I Kubrick, på hver side toppnivån (

) er nettstedets tittel. Dette er bra for hjemmesiden, men ikke sekundære sider. Således har en enkelt artikkel side i Kubrick artikkelen tittel merket opp med

element. Ifølge Roger Johansson av Berea Street 456 dette er ikke best praksis .

Ta en titt på skjermbildet nedenfor for å vise hvordan det nye Twenty Ten-temaet håndterer dette problemet:

PHP-koden i header.php endrer merkingen avhengig av hvilken side som vises. Hvis hjemmesiden blir vist, blir elementet som omgir sidetittelen, den

element. På en annen side er tittelen pakket inn i en

. I sistnevnte tilfelle tillater dette

element for å være mer meningsfylt på sekundære sider, bidra til SEO og generell tilgjengelighet.

Eric Meyers CSS Tilbakestill inkludert

Å erkjenne nytten av en CSS reset har de tjue ti tema utviklere også inkludert en variant av Eric Meyers CSS Reset øverst på temaets CSS-fil, som krediterer Meyer i en kommentar:

En tilbakestilling kan gå langt i retning av å oppnå kompatible CSS-oppsett på tvers av nettleseren . Så inkluderingen av tilbakestillingen er ingen overraskelse her, og er en annen teknikk som brukes av de tjue ti utviklerne som er verdig til imitasjon.

Lukkemerker er kommentert til å angi ID og klasser

På en av mine tidligere jobber jobbet jeg med mye arvelig kode, og noen av de tidligere utviklerne led av divitis , noe som gjør det vanskelig å omorganisere eller målrette elementer i oppslaget. Så i nye prosjekter begynte jeg å legge til kommentarer på slutten av

elementer, for å sikre at under fremtidig vedlikehold kunne noen enkelt se hvilket element som endte der. Dette var spesielt viktig for dype nestede sett av

tags.

De tjue ti utviklerne har anerkjent verdien av kommentarer for å identifisere navnene på

elementer, så de har gjort noe lignende, bortsett fra at de har tatt det et skritt videre:

Deres kommentarer omfatter ikke bare ID eller klassenavn til elementet de identifiserer, men angir også om navnet er en klasse eller ID. Den første kommentaren i skjermbildet ovenfor er for et element som har en ID for "primær" (angitt med "#primary") og et klassenavn for "widget-område" (angitt av ".widget-området").

Så, mens min egen konvensjon er å bare nevne elementet, uavhengig av klasse eller ID, har de tatt med en enkelt karakter (hash eller periode) for å identifisere attributten som navnet er basert på. Dette er en god praksis å følge, og er bare en enkel måte å forbedre klarheten og vedlikeholdet av ditt oppslag .

CSS er kommentert mer tydelig

Til slutt holdt jeg på temaet for å kommentere, jeg la merke til en klar forbedring i måten CSS kommenteres og organisert på tjue ti sammenlignet med Kubrick. Dette er uten tvil noe som mange front-end-utviklere har forsøkt å gjøre i flere år, og det er godt å se de tjue ti utviklerne som følger med. Nedenfor er et skjermbilde som viser de distinkte kommentarene i Twenty Tens CSS-fil, noe som gjør dem veldig enkle å finne når man skanner gjennom stilene:

I kontrast, i Kubrick var kommentarene ikke så enkle å få øye på når du skannet filen:

Konklusjon

Det er forstått at en av de beste måtene å bli en bedre koder er å studere andres arbeid . Og det rådet gjelder sikkert for front-end-kode som er lett tilgjengelig på stort sett hvert nettsted.

De fem tingene jeg har diskutert i denne artikkelen er ikke nødvendigvis noe nytt i front-end-utviklingen, men jeg tror at å se disse praksisene implementert på et enkelt prosjekt er unikt, og så de tjuefem utviklerne (som tydeligvis er Matt Thomas og selskap ) har gjort en god jobb i denne forbindelse, og gir noen gode teknikker og eksempler verdig imitasjon.

Dette innlegget ble skrevet utelukkende for Webdesigner Depot av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs hvor han legger inn artikler og opplæringsprogrammer på webdesign. Du kan følg Louis på Twitter eller ta kontakt med ham gjennom nettstedet hans.

Har du lagt merke til noe annet om det nye standard WordPress-temaets kode som er verdig til diskusjon? Vennligst del dine kommentarer nedenfor.

wordpress frontend-kode kode tjue ti

• ← Utvikle effektiv, strømlinjeformet CSS
• Et tilfelle for koding av wireframes →