För närvarande måste de flesta bloggare som använder WordPress ha uppgraderat till den senaste versionen av WordPress som officiellt finns på version 3.0.1 .

Tillsammans med uppdateringar till kärnramen, när version 3.0 släpptes, lägger WordPress-teamet också till ett nytt standardtema, som ersätter den nu föråldrade Kubrick . Det nya temat, som de flesta är säkert medvetna om, heter Tjugohundratio .

För att inte låta för corny här, men från det första ögonblicket lade jag ögonen på tjugo tio, blev jag kär i den. Men jag pratar inte om temas visuella design (vilket är ganska humdrum); Jag pratar om front-end-koden, som har sett ett antal förbättringar jämfört med tidigare standardtema .

I den här artikeln ska jag diskutera några av dessa förbättringar som jag tycker är värdiga att undersöka och imitera.

Och kom ihåg att det här inte är en diskussion om egenskaperna i själva temat; Det här är en diskussion om strukturen och organisationen av HTML och CSS och hur det ger en utmärkt modell att följa för utvecklare i fronten.

Det är HTML5 Ready

Det första du märker när du tittar på källan till tjugo tio-temat är den förenklade doktypen, vilket innebär att det är tekniskt kapabelt att använda HTML5. Så, medan det inte finns några vanliga HTML5-element i temat (som och), är HTML5-doktypen ett steg i rätt riktning.

Du märker i källan att det finns några andra markupförenklingar: Teckenkodningsdeklarationen förenklas, och HTML-elementet har inte attributet "xlmns". Båda dessa förbättringar är baserade på HTML5-specifikationen.

Så även om du inte använder någon av de vanliga HTML5-elementen i dina sidor kan du fortfarande göra dina sidor HTML5-klara genom att inkludera den nya förenklade doktypen och ta bort några av de andra snart föråldrade elementen, Följande exempel på utvecklarna av tjugo tio.

Korrekt användning av h1-taggen

Det här är en förbättring som är lättare att undersöka när man tittar på de faktiska PHP-filerna som skapar markeringen, och utgör en bestämd förbättring jämfört med Kubrick för bästa praxis SEO, semantik och tillgänglighet .

I Kubrick, på varje sida toppnivån (

) är webbplatsens titel. Det här är bra för hemsidan, men inte andra sidor. Således har en enda artikelsida i Kubrick artikelns titel markerad med

element. Enligt Roger Johansson av Berea Street 456 Det här är inte bästa praxis .

Ta en titt på skärmen nedan och visa hur det nya Twenty Ten-temaet hanterar detta problem:

PHP-koden i header.php ändrar markeringen beroende på vilken sida som visas. Om startsidan visas ses elementet som omger sidtiteln

element. På någon annan sida är titeln insvept i en

. I det senare fallet tillåter detta

element för att vara mer meningsfullt på sekundära sidor, bidra till SEO och övergripande tillgänglighet.

Eric Meyers CSS återställs inkluderat

Med tanke på användbarheten av en CSS-återställning har de tjugo tio-utvecklarna också inkluderat en variation av Eric Meyers CSS Reset längst upp i tematets CSS-fil, som krediterar Meyer i en kommentar:

En återställning kan gå långt för att uppnå kompatibla CSS-layouter som är kompatibla med webbläsare . Så införandet av återställningen är ingen överraskning här och är en annan teknik som används av de tjugo tio utvecklarna som är värdig imitation.

Avslutande etiketter är kommenterade att visa ID och klasser

Vid ett av mina tidigare jobb arbetade jag på mycket arvet kod, och några av de tidigare utvecklarna led av divitis , vilket gör det svårt att omorganisera eller rikta in element i markeringen. Så i nya projekt började jag lägga till kommentarer i slutet av

element, för att säkerställa att under det kommande underhållet kunde någon lätt se vilket element som slutade där. Detta var särskilt viktigt för djupt nestade uppsättningar av

taggar.

De tjugo tio utvecklarna har erkänt värdet av kommentarer för att identifiera namnen på

element, så de har gjort något liknande, förutom att de har tagit det ett steg längre:

Deras kommentarer innehåller inte bara id eller klassnamn på det element de identifierar, men anger även om namnet är en klass eller ett ID. Den första kommentaren i skärmdumpen ovan är för ett element som har ett "primärt" ID (indikerat av "#primary") och ett klassnamn för "widget-område" (indikerat av ".widget-area").

Så, medan min egen konvention är att bara namnge elementet, oavsett klass eller ID, har de inkluderat en enda karaktär (hash eller period) för att identifiera attributet som namnet är baserat på. Det här är en bra övning att följa, och det är bara ett enkelt sätt att förbättra klarheten och underhållet av din uppställning .

CSS kommenteras mer tydligt

Slutligen har jag lagt märke till en tydlig förbättring av hur CSS kommenteras och organiseras i tjugo tio, jämfört med Kubrick. Det här är utan tvekan något som många front-end-utvecklare har försökt göra under ett antal år, och det är bra att se de tjugo tio utvecklarna som följer med. Nedan visas en skärmdump som visar de tydliga kommentarerna i tjugo tio CSS-filer, vilket gör dem väldigt lätta att hitta när man söker igenom stilar:

Däremot var inte kommentarer i Kubrick lika lätt att hitta när du skannade filen:

Slutsats

Det är underförstått att ett av de bästa sätten att bli en bättre kodare är att studera andras arbete . Och det här rådet gäller säkert för front-end-kod som är lättåtkomligt på nästan alla webbplatser.

De fem saker som jag har diskuterat i den här artikeln är inte nödvändigtvis något nytt i front-end-utvecklingen, men jag tror att se dessa metoder som implementeras på ett enda projekt är unikt, och så de tjugo tio utvecklarna (som är uppenbarligen Matt Thomas och företag ) har gjort ett bra jobb i detta avseende, vilket ger några utmärkta tekniker och exempel som är värdiga för imitation.

Detta inlägg skrevs uteslutande för Webdesigner Depot av Louis Lazaris, en frilansskribent och webbutvecklare. Louis körs Imponerande Webs där han postar artiklar och handledning om webbdesign. Du kan följ Louis på Twitter eller ta kontakt med honom via hans hemsida.

Har du märkt något annat om det nya standard-WordPress-temat kod som är värd att diskutera? Vänligen dela dina kommentarer nedan.

wordpress koda frontändkod tjugohundratio

• ← Utveckla effektiv, strömlinjeformad CSS
• Ett fall för kodning av dina trådramar →