Share
I del 1 i denne opplæringen lærte du hvordan du oppretter en malfil for en egendefinert innleggstype for å vise uthevede bilder og titler for hvert innlegg. Du registrerte en egendefinert posttype "dyr" og opprettet en fil som heter arkiv-animal.php å vise et arkiv av dyr.
I denne opplæringen lærer du CSS som kreves for å legge til et rutenettoppsett til bildene og overlegg posttitler over bildene. Deretter lærer du hvordan du legger til en svingeffekt, så navnet på dyret vises bare når brukeren svinger musen over hvert bilde.
Denne opplæringen bruker et barn tema med Twenty Twelve tema som sin forelder. Du trenger en WordPress installasjon satt opp med dette temaet installert (det skal installeres som standard). Hvis du er usikker på hvordan du oppretter et barntema, kan du se instruksjonene på WordPress Codex.
Du trenger også en kodeditor med FTP-tilgang til nettstedet ditt, med mindre du utvikler deg lokalt, i så fall trenger du ikke FTP.
Du trenger barntemaet opprettet i del 1 i denne opplæringen, med arkiv-animal.php malfil.
Du kan laste ned kodesamlingen, inkludert barnets temafiler, ved hjelp av nedlastingslinken ovenfor.
Arkivsiden du starter med viser bildet og tittelen til hvert innlegg som vist på skjermbildet. I denne delen av opplæringen trenger du ikke å redigere arkivsiden i det hele tatt, bare stilarket for temaet.
For å legge bildene ut i et rutenett må du bruke flyter. Åpne temaets stilark og legg til følgende:
.post-type-arkiv-dyr artikkel.entry-innhold posisjon: relativ; flyte: venstre; klare: ingen; margin: 10px;
Denne CSS er rettet mot dyrarkivet ved å bruke .post-type-arkiv-dyr, en klasse som WordPress gjelder for kropp element fordi Twenty Twelve-temaet bruker body_class () funksjon for å tildele klasser til dette elementet.
Det fjerner eventuelle klare innstillinger for artikkel element og legger til en float og en margin for layout.
Du vil nå ha dine postoppføringer i et rutenett:
Det neste trinnet er å plassere tittelen på hvert innlegg slik at det overlappes over bildet, og legg til en semi-opak bakgrunn for å forbedre lesbarheten.
Under CSS du allerede har lagt til, legg til følgende:
/ * styling for å legge til bildeoverlegg og ugjennomsiktig bakgrunn * / .post-type-arkiv-dyr .entry-innhold img posisjon: relative; overløp: skjult; bakgrunn: gjennomsiktig; flyte: venstre; .post-type-arkiv-dyr .archive-title posisjon: absolutt; tekst-align: center; venstre: 0; bunn: 0; bredde: 140px; høyde: 70px; bakgrunn: rgba (255, 255, 255, 0,5); polstring: 50px 5px 30px 5px; filter: alfa (opasitet = 50);
Dette gjør noen ting. For det første, på .inngangsinnhold img elementet legger til stilling: relativ slik at absolutt posisjonering vil fungere for .arkiv-tittelen element inneholdt i det, samt legge til en float som sikrer at layoutet fungerer riktig.
Neste, for .arkiv-tittelen elementet legger til absolutt posisjonering og setter det opp ved hjelp av venstre og Ikke sant verdier. Det legger til bredde, høyde og polstring som legger opptil 150px med 150px, størrelsen på miniatyrbildene i dette temaet. Til slutt legger det til en semi-opak bakgrunn ved hjelp av RGBA, med en tilbakebetaling for IE bruker filter: alfa (opasitet = 50).
Bildene har nå teksten overlaid med en semi-opak bakgrunn:
Du kan bestemme at du er fornøyd med arkivsiden som den er. I noen tilfeller er det foretrukket at titlene blir konstant synlige. Men hvis du vil at bildene skal ha større prioritet og være synlige uten tekst eller en bakgrunn som skjuler dem når siden først lastes, kan du legge til en svingeffekt, skjule teksten til brukeren henger musen over et bilde.
For å gjøre dette må du redigere stylingen for .arkiv-tittelen klassen og legg til litt ekstra styling for :sveve angi som følger:
/ * styling for å legge sveveffekten * / .post-type-arkiv-dyr .archive-title posisjon: absolute; tekst-align: center; venstre: 0; bunn: 0; bredde: 140px; høyde: 70px; opasitet: 0; polstring: 50px 5px 30px 5px; .post-type-arkiv-dyr .archive-title: svever, .post-type-arkiv-dyr .archive-title a: hover display: block; bakgrunn: rgba (255, 255, 255, 0,5); -moz-opacity: 0,7; filter: alfa (opasitet = 50); opasitet: 1;
Dette gir en litt annen versjon av stylingen til .arkiv-tittelen element med opasitet satt til 0. Posisjonering, polstring og bredde er nøyaktig det samme som tidligere lagt til for overleggseffekten.
Det målretter deretter tittelen og koblingene i den i hover-tilstanden, og legger til en bakgrunn og opacitet til disse. Disse innstillingene ligner de som du la til tidligere når du legger til en semi-opak bakgrunn til titlene, men nå er bakgrunnen (og selve tittelen) bare oppstått når brukeren hevder musen over et bilde.
Når arkivsiden er lastet inn, vises bildene uten tekst overlaid:
Når brukeren svinger musen over et av bildene, vises tittelen:
Du har nå en fin arkivside ved hjelp av et rutenett med bilder med svingeffekt for tekst.
I disse to veiledningene har du lært hvordan du gjør følgende:
Koden som kreves for å gjøre dette, er relativt enkel og kompatibel med store nettlesere, inkludert eldre versjoner av IE.
Codex sider:
Accentsconagua
the_post_thumbnailGuider:
CSS Ressurser:
