Tällä hetkellä useimmat bloggaajista, jotka käyttävät WordPressiä, olisi pitänyt päivittää WordPressin uusimpaan versioon, joka on virallisesti julkaistu versio 3.0.1 .

Yhdessä ydinkehyksen päivitysten kanssa, kun versio 3.0 julkaistiin, WordPress-tiimi lisäsi myös uuden oletusaiheen, korvaa nykyään vanhentuneet Kubrick . Uusi teema, kuten useimmat teistä tietävät, kutsutaan Kaksikymmentä .

Älkää kuulko liian kauhistuttavaksi täällä, mutta ensimmäisestä hetkestä, kun sysin silmät kaksikymmentä kymmeneen, rakastuin sitä. Mutta en puhu teeman visuaalisesta suunnittelusta (joka on melko huono); Puhun etupään koodista, joka on nähnyt useita parannuksia edelliseen oletusaiheeseen verrattuna .

Tässä artikkelissa keskustelen eräistä näistä parannuksista, jotka ovat mielestäni kohtuullinen tarkastelu ja jäljitelmä.

Ja muista, että tämä ei ole keskustelu teeman piirteistä itsessään; tämä on keskustelu HTML: n ja CSS: n rakenteesta ja organisaatiosta ja siitä, miten se tarjoaa erinomaisen mallin, jota noudatetaan front-end-kehittäjille.

Se on HTML5-valmius

Ensimmäinen asia, jonka huomaat, kun tarkastelet Twenty Two -teeman teemaa, on yksinkertaistettu dokktyyppi, mikä tarkoittaa, että se on teknisesti kykenevä käyttämään HTML5: ta. Joten, kun teemassa (kuten ja) ei ole mitään yhteisiä HTML5-elementtejä, HTML5-dokktyyppi on askel oikeaan suuntaan.

Huomaat lähteestä, että on olemassa muutamia muita merkintäavun yksinkertaistuksia: merkkien koodausilmoitus on yksinkertaistettu ja HTML-elementissä ei ole "xlmns" -attribuuttia. Molemmat parannukset perustuvat HTML5-malliin.

Joten vaikka et käytä sivujesi yhteisiä HTML5-elementtejä, voit silti tehdä sivuillesi HTML5-valmiiksi sisällyttämällä uuden yksinkertaistetun doktityypin ja poistamalla joitain muita pian vanhentuneita elementtejä, jolloin esimerkkinä 20-kymmenen kehittäjistä.

H1-tunnisteen asianmukainen käyttö

Tämä on parannus, joka on helpompi tutkia, kun tarkastellaan varsinaisia ​​PHP-tiedostoja, jotka luovat merkinnän, ja se on selkeä parannus Kubrickin parhaan käytännön mukaan SEO, semantiikka ja saavutettavuus .

Kubrickissa jokaisella sivulla ylätason otsikko (

) on verkkosivuston nimi. Tämä sopii hyvin kotisivuille, mutta ei sivuille. Näin ollen yhden artikkelin sivulle Kubrickissa on artikkelin nimi merkitty

elementti. Roger Johanssonin mukaan 456 Berea Street tämä ei ole paras käytäntö .

Tutustu alla olevaan ruutukuvioon, jossa näytetään, kuinka uusi kaksikymmentä teemaa käsittelee tämän ongelman:

PHP-koodi header.php muuttaa merkintää riippuen siitä, mitä sivua katsellaan. Jos kotisivua tarkastellaan, sivun otsikkoa ympäröivä elementti muuttuu

elementti. Millä tahansa muulla sivulla nimi on kääritty a

. Jälkimmäisessä tapauksessa tämä sallii

elementti on merkityksellisempi toissijaisilla sivuilla, mikä edistää SEO: ää ja yleistä saavutettavuutta.

Eric Meyerin CSS-palautus sisältyy

Tunnistamalla CSS-nollauksen hyödyllisyys, Twenty Two teemakehittäjät ovat myös sisällyttäneet vaihtelua Eric Meyerin CSS-nollaus teeman CSS-tiedoston yläosassa, Meyer kommentoituna:

Nollaus voi olla pitkä matka selaimelle sopivien CSS-asettelujen saavuttamiseen . Joten nollauksen sisällyttäminen ei ole yllätys täällä, ja se on toinen tekniikka, jota kaksikymmentä kymmenen kehittäjät käyttävät, jotka ovat kelvottomia.

Sulkemistavat merkitään tunnisteiden ja luokkien merkitsemiseen

Eräässä edellisessä työpaikallani käsittelin paljon perintökoodia, ja osa edellisistä kehittäjistä kärsi divitis , minkä vuoksi on vaikea järjestellä tai kohdistaa elementtejä merkintään. Niinpä uusissa projekteissa aloin lisätä kommentteja vuoden lopussa

elementtejä, jotta tulevassa kunnossapidossa kukaan voisi helposti nähdä, mikä osa päättyi missä. Tämä oli erityisen tärkeä syvä-sisäkkäisille sarjoille

tunnisteita.

Kaksikymmentä kymmenen kehittäjää ovat tunnustaneet kommenttien arvon tunnistaakseen

elementtejä, joten he ovat tehneet jotain vastaavaa, paitsi että he ovat ottaneet sen askeleen pidemmälle:

Heidän kommenttinsa sisältävät paitsi tunnistettavan elementin tunnuksen tai luokan nimen, mutta myös osoittavat, onko nimi luokka tai tunnus. Ensimmäinen kommentti yllä olevassa kuvakaappauksessa on elementille, jolla on tunnus "ensisijainen" (ilmaisu "#primary") ja widget-alueen luokan nimi (ilmaistuna ".widget -alueella").

Joten, vaikka oma konventti on vain nimi elementti luokasta tai ID: stä riippumatta, he ovat sisällyttäneet yhden merkin (hash tai period) tunnistamaan attribuutin, johon nimi perustuu. Tämä on hyvä käytäntö seurata, ja se on vain yksinkertainen tapa parantaa selkeyttä ja ylläpidettävyyttä merkinnän .

CSS: n kommentointi on selkeämpää

Lopuksi, pysytessän kommentoimalla, huomasin selkeän parannuksen CSS: n kommentointiin ja järjestelyyn Kaksikymmentä kymmeneen verrattuna verrattuna Kubrickiin. Tämä on epäilemättä jotain, jota monet front-end-kehittäjät ovat yrittäneet tehdä monta vuotta, ja on hyvä nähdä 20 kymmenen kehittäjää. Alla on kuvakaappaus, joka näyttää erilliset kommentit Twenty Ten: n CSS-tiedostossa, mikä tekee niistä erittäin helppoa, kun skannaat tyylit:

Sitä vastoin Kubrickissa kommentit eivät olleet yhtä helposti nähtävissä skannauksen aikana:

johtopäätös

On selvää, että yksi parhaista tavoista tulla paremmaksi kooderiksi on tutkia muiden työtä . Ja tämä neuvonta koskee varmasti etupään koodia, joka on helposti saatavilla melko paljon jokaisella verkkosivustolla.

Viisi asiaa, joista olen keskustellut tässä artikkelissa, ei välttämättä ole mitään uutta front-end-kehityksessä, mutta uskon, että näiden käytäntöjen toteuttaminen yhdellä projektilla on ainutlaatuinen, joten kaksikymmentä kymmenen kehittäjää (jotka ilmeisesti Matt Thomas ja yritys ) ovat tehneet erinomaista työtä tässä suhteessa tarjoamalla erinomaisia ​​tekniikoita ja esimerkkejä jäljitelmistä.

Tämä viesti kirjoitettiin yksinomaan Webdesigner Depotille, freelance-kirjailija ja web-kehittäjä Louis Lazaris. Louis juoksee Vaikuttavat webs jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa. Sinä pystyt seuraa Louis Twitterissä tai ota yhteyttä hänen verkkosivuillaan.

Oletko huomannut mitään muuta uutta WordPress-teemakoodia, joka on syytä keskustella? Jaa kommenttisi alla.

WordPress koodi etupään koodi 20 kymmentä

• ← Tehokas, virtaviivaistettu CSS
• Tapaus Wireframes koodausta varten →