# 108: Bygga enskilda utdragssida - CSS-tricks

Anonim

Vi börjar med att titta på några av det gruntarbete jag gjorde bakom kulisserna och presenterade några saker som behövdes göras. Som att lägga till i resten av wp_list_pages () -anropen för att mata ut resten av listan med utdrag för varje kategori. Och lägger också till i CSS för att ändra färg på fältet som skiljer kategorierna och listorna med utdrag. Vi ändrade också svävarna i kategorierna för att göra färgerna ljusare istället för den dumma vita kanten som vi tillfälligt hade där inne. Bokstavligen använde vi lighten()funktionen i Sass för att göra jobbet för oss.

Målet i denna screencast är dock att utforma vyn för ett enda utdrag. Om jag hade skapat det här området på webbplatsen nyligen kan utdrag vara en anpassad inläggstyp (som skärmdumpar för enstaka gallerier är), men de fanns inte när jag började göra detta. Som sådan är de bara "Sidor" och alla använder en anpassad sidmall. Inte en stor sak, egentligen, särskilt nu att det inte är en prestationsproblem att ha många sidor.

Enskilda utdragssidor kommer att likna mycket på blogginlägg. Standard 2/3 1/3 nätstruktur och ett normalt sidofält. Det finns dock några skillnader. Det finns en tydlig hierarki för utdrag, t.ex.

Hem »Kodavsnitt» Utdragskategori »Utdragnamn

Detta är perfekt för den ”svarta stapeln” undernavigering som utvecklas på denna webbplats. Vårt Yoast SEO-plugin erbjuder funktion för brödsmulor så det är enkelt - bara en fråga om att ringa en funktion.

En annan skillnad är att vi levererar the_modified_time()istället för publiceringsdatum. På det sättet vet folk det senaste datumet då en kod uppdaterades, vilket är mer relevant än när det publicerades. Det ger mig också en viss motivation att regelbundet se över utdrag.

Vi fortsätter lite åt sidan och uppdaterar ett gammalt utdrag bara för skojs skull.

Vi avslutar med att skriva lite JavaScript som får våra underkategorivisningar att fungera. Dessa vyer ser i princip ut precis som vår utdragssida, bara om du är på / snippets / javascript /, kommer JavaScript-utdragen att visas som standard och JavaScript-kategorin markerad. Tro det eller inte, bara några rader med lömsk URL som toppar JavaScript-kod som förmodligen borde vara ett utdrag på sig själv.