Ønsker du å legge til odde og jevne klasser til artikler om emnet ditt WordPress blog ? Hvis du legger til en klasse, kan du vise en bestemt stil for hver artikkel.
I denne opplæringen vil vi vise deg hvordan du kan vise jevnlige eller rare klasser på WordPress.
Hvorfor legge til klasser? parene "Eller" odd » på temaet ditt WordPress blog ?
mange WordPress-temaer bruk en gammel eller samme klasse for WordPress-kommentarer. Det lar brukere se hvor en kommentar slutter og en annen begynner.
På samme måte kan du bruke denne teknikken til artiklene dine. Det ser estetisk ut å la brukere raskt skanne sider som er store. Dette er spesielt nyttig for hjemmesiden til avis- eller magasinsider.
Når det er sagt, vil vi se hvordan du legger til en klasse i artiklene til din WordPress blog.
Slik legger du til en jevn / merkelig klasse på WordPress
WordPress genererer standard CSS-klasser og legger dem til forskjellige artikler på nettstedet ditt. Disse CSS-klassene hjelper plugins og temautviklere å legge til sine egne stiler i hver forskjellige artikkel.
WordPress tilbyr også en funksjon som heter " post_class Som brukes av temautviklere for å legge til klasser i artikler.
Funksjonen post_class Er også et filter, som betyr at du kan manipulere det med. Det er nøyaktig hva vi skal gjøre her.
Bare legg til denne koden i functions.php-filen din. WordPress tema.
funksjon oddeven_post_class ($ klasser) {global $ current_class; $ klasser [] = $ current_class; $ current_class = ($ current_class == 'odd')? 'jevn': 'merkelig'; returner $ klasser; } add_filter ('post_class', 'oddeven_post_class'); global $ current_class; $ current_class = 'odd';
Denne funksjonen legger ganske enkelt til en klasse til merkelige og like elementer.
Du vil finne rare og jevne klasser i kildekoden til nettstedet ditt. Bare ta musen til tittelen på en artikkel, og høyreklikk deretter for å inspisere varen.
Nå som du har lagt til de rare og jevne klassene i artiklene dine. Det neste trinnet er å gi dem en unik stil med CSS. Du kan legge til din tilpassede CSS-kode på barnetemaet ditt, eller ved å bruke et enkelt CSS-plugin.
Her er et eksempel på CSS-kode som du kan bruke som utgangspunkt:
.even {bakgrunn: #f0f8ff; } .odd {bakgrunn: #f4f4fb; }
Slik kan resultatet bli:
Du trenger litt øvelse for å oppnå gode resultater, men for dette må du mestre CSS eller bare bruke et verktøy som CSS Hero.
Det er så enkelt som det. Jeg håper denne opplæringen vil være til stor hjelp for deg. Still oss spørsmål eller del denne opplæringen med vennene dine på dine favoritt sosiale nettverk.
