# 108: Yksittäisten katkelmien rakentaminen - CSS-temppuja

Anonim

Aloitamme tarkastelemalla joitain murheellisia töitä, joita tein kulissien takana, tarkentamalla joitain asioita, jotka oli tehtävä. Kuten lisäämällä loput wp_list_pages () -kutsut tuottaaksesi lopun kappaleluettelon kullekin luokalle. Ja myös lisäämällä CSS: ään, jotta voit muuttaa luokkien ja katkelmaluetteloiden erottavan palkin väriä. Muutimme myös luokkien hiiriä vaalentaaksemme värejä tyhmän valkoisen reunan sijaan, joka meillä oli väliaikaisesti siellä. Kirjaimellisesti käytimme lighten()Sassin toimintoa tekemään työtä puolestamme.

Tavoitteena tässä näyttöruudussa on kuitenkin tyylin korostaminen yhdelle katkelmalle. Jos olisin luonut tämän alueen sivustolle äskettäin, katkelmat voivat olla mukautettuja postityyppejä (kuten yksittäisen gallerian kuvakaappaukset ovat), mutta niitä ei ollut olemassa, kun aloitin tämän tekemisen. Sellaiset ovat vain "Sivut" ja kaikki käyttävät mukautettua sivumallia. Ei oikeastaan ​​iso juttu, varsinkin nyt, kun monien sivujen käyttäminen ei ole suorituskykyongelma.

Yksittäiset katkelmasivut ovat paljon kuin blogiviestit. Normaali 2/3 1/3 ristikkorakenne ja normaali sivupalkki. Joitakin eroja on kuitenkin. Katkelmille on selkeä hierarkia, esim

Etusivu »Koodinpätkät» Katkelmaluokka »Katkelman nimi

Tämä sopii täydellisesti “mustan palkin” alisuuntaukseen, joka kehittyy tällä sivustolla. Yoast SEO -laajennuksemme tarjoaa leivänmurskaustoiminnot, joten tämä on helppoa - vain funktion kutsuminen.

Toinen ero on, että tuotamme the_modified_time()julkaisupäivän sijaan. Tällä tavalla ihmiset tietävät, että katkelma päivitettiin viimeksi, mikä on tärkeämpää kuin julkaisupäivänä. Se antaa minulle myös motivaatiota tarkastella katkelmia säännöllisesti.

Jatkamme hieman sivuun päivittämällä vanhan katkelman vain huvin vuoksi.

Viimeistelemme kirjoittamalla vähän JavaScriptiä, joka saa alaryhmänäkymämme toimimaan. Nämä näkymät näyttävät olennaisilta osin samanlaisilta kuin Snippets-kotisivumme, vain jos olet osoitteessa / snippets / javascript /, JavaScript-katkelmat näkyvät oletuksena ja JavaScript-luokka korostetaan. Uskokaa tai älkää, vain muutama rivi harhaanjohtavaa URL-osoitetta, joka ylittää JavaScript-koodin, jonka pitäisi todennäköisesti olla katkelma itselleen.