# 108: Bygg side for individuelle utdrag - CSS-triks

Anonim

Vi begynner med å se på noe av det gruntarbeidet jeg gjorde bak kulissene og utarbeide noen ting som måtte gjøres. Som å legge til resten av wp_list_pages () -anropene for å sende resten av listen over utdrag for hver kategori. Og også legge til i CSS for å endre fargen på linjen som skiller kategoriene og listene med utdrag. Vi endret også svingene i kategoriene for å lette fargene i stedet for den dumme hvite kanten som vi midlertidig hadde der inne. Bokstavelig talt brukte vi lighten()funksjonen i Sass til å gjøre jobben for oss.

Målet i denne skjermsendingen er imidlertid å utforme visningen for et enkelt utdrag. Hvis jeg hadde opprettet dette området av nettstedet mer nylig, kan utdrag være en tilpasset innleggstype (som skjermbilder av enkeltgallerier er), men de eksisterte ikke da jeg begynte å gjøre dette. Som sådan er de bare "Sider", og alle bruker en tilpasset sidemal. Ikke så farlig, egentlig, spesielt nå som det å ha mange sider ikke er et ytelsesanliggende.

Individuelle utdragssider kommer til å ligne mye på blogginnlegg. Standard 2/3 1/3 rutenettstruktur og et normalt sidefelt. Det er imidlertid noen forskjeller. Det er et tydelig hierarki for utdrag, f.eks

Hjem »Kodebiter» Utdragskategori »Utdragnavn

Dette er perfekt for den "svarte linjen" subnavigasjon som utvikler seg på dette nettstedet. Vårt Yoast SEO-plugin gir brødsmulefunksjonalitet, så dette er enkelt - bare å ringe en funksjon.

En annen forskjell er at vi sender ut i the_modified_time()stedet for publiseringsdatoen. På den måten vet folk den siste datoen en kodebit ble oppdatert, noe som er mer relevant enn da den ble publisert. Det gir meg også litt motivasjon for å se på utdrag regelmessig.

Vi fortsetter litt til side og oppdaterer et gammelt snutt bare for moro skyld.

Vi avslutter med å skrive litt JavaScript som får underkategorivisningene til å fungere. Disse visningene ser i hovedsak ut som hjemmesiden vår, bare hvis du er på / snippets / javascript /, vil JavaScript-kodene være synlige som standard og JavaScript-kategorien uthevet. Tro det eller ei, bare noen få linjer med luskede URL-adresser med JavaScript-kode som sannsynligvis burde være en kodebit på seg selv.