# 108: üksikute juppide ehitamine - CSS-trikid

Anonim

Alustuseks vaatame mõnda nurisevat tööd, mida ma kulisside taga tegin, täpsustades mõningaid vajaminevaid asju. Nagu lisades ülejäänud kõnedesse wp_list_pages (), väljastatakse ülejäänud kategooriate juppide loend. Ja lisades CSS-i ka kategooriaid ja juppide loendeid eraldava riba värvi muutmiseks. Muutsime ka kategooriate hõljukeid värvide heledamaks muutmiseks selle tumma valge ääre asemel, mis meil seal ajutiselt oli. Sõna otseses mõttes kasutasime lighten()Sassis seda funktsiooni meie jaoks töö tegemiseks.

Selle ekraanikuva ülekande eesmärk on aga kujundada vaade ühe jupi jaoks. Kui oleksin selle saidi ala hiljuti loonud, võivad koodilõigud olla kohandatud postitüübid (nagu ühe galerii ekraanipildid on), kuid neid ei olnud, kui seda tegema hakkasin. Sellisena on need lihtsalt lehed ja kõik kasutavad kohandatud lehemalli. Tegelikult pole see suurem asi, eriti nüüd, kui paljude lehtede omamine pole jõudlusega seotud probleem.

Üksikud juppide lehed sarnanevad palju blogipostitustega. Standardne 2/3 1/3 võrgustruktuur ja tavaline külgriba. Siiski on mõned erinevused. Juppidel on selge hierarhia, nt

Avaleht »Koodilõigud» Katkendi kategooria »Katkendi nimi

See sobib suurepäraselt sellel saidil areneva alamnavigatsiooni „must riba“ jaoks. Meie Yoast SEO pistikprogramm pakub riivsaia funktsionaalsust, nii et see on lihtne - piisab vaid funktsiooni kutsumisest.

Teine erinevus on see the_modified_time(), et avaldamiskuupäeva asemel väljastame. Nii teavad inimesed, et koodilõik värskendati viimati, mis on asjakohasem kui selle avaldamise ajal. See annab mulle ka motivatsiooni juppide regulaarseks uuesti vaatamiseks.

Jätkame veidi lõbu huvides vana jupi värskendamist.

Lõpetuseks kirjutame natuke JavaScripti, mis paneb meie alamkategooria vaated toimima. Need vaated näevad põhimõtteliselt välja nagu meie sisulõigete avaleht, ainult siis, kui olete aadressil / snippets / javascript /, kuvatakse JavaScripti jupid vaikimisi ja JavaScripti kategooria on esile tõstetud. Uskuge või mitte, vaid mõni rida varjatud URL-i, mis tippib JavaScripti koodi, mis peaks ilmselt olema jupp iseendale.