Har du noen gang kommet over et nettsted som tilbyr en annen stil for hvert element? Noen nettsteder har forskjellige artikler « frem Fremhevet mens andre har hver kategori med forskjellige farger, noen ganger kan noen til og med ha et veldig unikt perspektiv.

Vel, det er akkurat det vi skal dekke i denne opplæringen. Vi vil dele med deg de forskjellige metodene du kan bruke for å gi en unik stil til artiklene dine på WordPress.

Så hva skal vi bruke? Vi vil bruke en funksjon som heter " post_class ". Denne funksjonen skriver ut forskjellige klasser på artikkelbeholdere (HTML-tag), vanligvis i index.php, single.php og andre filer som viser en " løkke av artikler "(Med henvisning til" WordPress Loop ").

Note: Denne opplæringen krever at du er kjent med utformingen av WordPress tema og mestre litt HTML/CSS.

Når du åpner filen "index.php" eller en annen fil som har en sløyfe, vil du normalt se " div "Med klasser" post- {id} ", men sannsynligvis også bruk av funksjonen" post_class ".

" >

Legge til denne funksjonen i en tag " div », Hver av artiklene dine vil ha følgende klasser, lagt til av WordPress. Følgende klasser legges til som standard:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom mikroformat sider)
  • .category ID
  • .category-navn
  • .tag-navn

Her er et eksempel på en tag med klasser.


Så hvis du åpner filen "style.css" og legger til "kategoridans" -klassen, vil du kunne tilpasse visningen av artikler i kategorien "dans".

.kategori-dansende {bakgrunn: #97c3e1; grense: 1px solid #84aac4;}

Ovenfor vil artikler i kategorien "dans" ha en blå bakgrunn. Du kan fortsette ved å legge til en annen klasse for "kategori-dans" -klassen osv. Du kan bruke den samme teknikken for å gi et unikt utseende til varer som har en bestemt etikett.

Men for noen som virkelig ønsker å tilpasse utseendet til nettstedet deres, kan de trenge noen ekstra kontroller når det gjelder klasser. Vel, du kan spesifisere klassene du vil bruke som følger:


Men hvordan vil det fungere på en dynamisk plattform som WordPress? Så la oss se på noen eksempler på hvordan du legger til klasser til artiklene dine på WordPress.

Stil ifølge forfattere

Ofte vil du legge merke til at noen blogger bruker en annen stil, avhengig av forfatterne. For disse bloggene er det en god ide å gi hver artikkel en unik stil ifølge forfatterne. Så i dette eksemplet skal vi gi hvert innlegg sin egen stil basert på forfatterens navn. Så i "index.php" -filen eller en annen fil (archive.php / category.php etc), vil vi hente navnet på forfatteren av artikkelen:


Koden ovenfor henter det "viste" navnet på en forfatter, og den tildeler variabelen $ author. Nå som vi har en verdi, kan vi legge den til i postklassekoden vår slik:


Merk: Du trenger ikke å beholde klasse 1 og klasse 2. Det er bare hvis du vil legge til statiske klasser.

Eksempelet vårt skal se slik ut:


Navnet vil være forskjellig på hver artikkel avhengig av variabelen til det offentlige navnet til en forfatter. Du kan deretter legge til stilen du ønsker slik:

.Herve {border: 1px solid # 000;} .Tierry {border: 1px solid # d88b3d;} .Franklin {border: 1px solid # 4781a8;}

Da vil hvert element i løkka ha en annen klasse og derfor bli brukt en annen stil.

Stil i henhold til antall kommentarer

Du har sett nettsteder med populære artikler i en widget, som hovedsakelig er basert på antall kommentarer. Vel, i dette eksemplet skal vi vise deg hvordan stilen på innleggene varierer avhengig av antall kommentarer. Det første vi må gjøre er å få antall kommentarer og knytte en klasse til det. For å få antall kommentarer trenger vi følgende kode i løkken:

godkjent; hvis ($ my_comment_count <10) {$ my_comment_count = 'ny'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>

I koden over legger vi til klasser i henhold til en bestemt skala. Hvis en artikkel er mindre enn 10 kommentarer, vil klassen " nytt Vil bli lagt til. Hvis artikkelen har mer enn 10 kommentarer og mindre enn 20 kommentarer, er klassen "ermergingVil bli lagt til. Hvis artikkelen har mer enn 20 kommentarer, så klassen 'Populær' vil bli lagt til. Du kan endre denne skalaen basert på nettstedets gjennomsnittlige gjennomsnittsomtale.

Så artikkelskoden vil være lik denne:


Forsikre deg om at du stikker koden over i løkken. Deretter vil du legge til variabelen $ custom_values ​​til post_class-funksjonen.

.new {kant: fast 1px #FFFF00;} .emerging {kant: stiplede 1px #FF9933;} .popular {kant: stiplede 1px #CC0000;}

Dette er den desidert beste måten å tilpasse stilen til artikler på WordPress. Men noen ganger vil du ha mer kontroll. CSS klasser gir deg muligheten til å redigere forhåndsvisningen, men ikke å endre strukturen.

Det er det for denne opplæringen. Jeg håper du klarer å lage spesifikke stiler for artikler på WordPress.