Ønsker du at tilføje ulige og lige klasser til artikler om emnet din WordPress blog ? Tilføjelse af en klasse giver dig mulighed for at vise en bestemt stil til hver artikel.
I denne tutorial vil vi vise dig, hvordan du viser jævne eller ulige klasser på WordPress.
Hvorfor tilføje klasser? par "Eller" ulige » om temaet for din WordPress blog ?
mange WordPress-temaer brug en gammel eller samme klasse til WordPress-kommentarer. Det giver brugerne mulighed for at se, hvor en kommentar slutter, og en anden begynder.
På samme måde kan du bruge denne teknik til dine artikler. Det ser æstetisk ud at lade brugerne hurtigt scanne sider, der er store. Dette er især nyttigt for hjemmesiden til avis- eller magasinsider.
Når det er sagt, vil vi se, hvordan du tilføjer en klasse i artiklerne i din WordPress blog.
Sådan tilføjes en lige / ulige klasse på WordPress
WordPress genererer standard CSS-klasser og tilføjer dem til forskellige artikler på dit websted undervejs. Disse CSS klasser hjælper plugins og temaudviklere tilføje deres egne stilarter til hver forskellige artikel.
WordPress tilbyder også en funktion kaldet " post_class Hvilket bruges af temaudviklere til at føje klasser til artikler.
Funktionen post_class Er også et filter, hvilket betyder, at du kan manipulere det med. Det er præcis, hvad vi skal gøre her.
Du skal blot tilføje denne kode til din functions.php-fil. WordPress tema.
funktion oddeven_post_class ($ klasser) {global $ current_class; $ klasser [] = $ current_class; $ current_class = ($ current_class == 'ulige')? 'selv': 'ulige'; returnere $ klasser; } add_filter ('post_class', 'oddeven_post_class'); global $ current_class; $ current_class = 'ulige';
Denne funktion tilføjer blot en klasse til ulige og lige poster.
Du finder ulige og lige klasser i kildekoden på dit websted. Bare tag musen til titlen på en artikel, og højreklik derefter for at inspicere elementet.
Nu hvor du har føjet de ulige og lige klasser til dine artikler. Det næste trin er at give dem en unik stil med CSS. Du kan tilføje din tilpassede CSS-kode på dit barnetema eller ved hjælp af et simpelt CSS-plugin.
Her er et eksempel på CSS-kode, som du kan bruge som udgangspunkt:
.even {baggrund: #f0f8ff; } .odd {baggrund: #f4f4fb; }
Sådan kan resultatet være:
Du skal bruge lidt øvelse for at opnå gode resultater, men til dette skal du mestre CSS eller bare bruge et værktøj som CSS Hero.
Det er så simpelt som det. Jeg håber, at denne tutorial vil være til stor hjælp for dig. Du er velkommen til at stille os spørgsmål eller dele denne tutorial med dine venner på dine foretrukne sociale netværk.
