Hvordan stilemerker i WordPress

WordPress lar deg sortere innholdet ditt i taksonomier. Som standard kommer det med kategorier og koder. Mens kategorier kan brukes til å sortere innholdet i forskjellige seksjoner, kan merker brukes til å sortere innhold i mer spesifikke emner. Du kan vise tagger som brukes på nettstedet ditt i en taggsky eller i et listformat. I denne artikkelen vil vi vise deg hvordan du stiler tagger i WordPress.

Viser alle merker med posttelling i WordPress

Noen populære nettsteder viser deres mest populære tagger som emner på arkivsiden eller i bunntekstområdet. Slik viser du alle postetikettene dine, med posttelling, og uten å bruke tagskyen.

Første du må gjøre er å kopiere og lime inn denne koden i temaets funksjoner.php-fil eller nettstedspesifikke plugin.

 funksjon wpb_tags () $ wpbtags = get_tags (); $ string. = 'term_id).' "> '$ tag-> navn.' '. $ tag-> count.' '." \ n "; returner $ string;  add_shortcode ('wpbtags', 'wpb_tags'); 

Denne koden viser bare alle dine koder med posttellingen ved siden av dem. Men for å vise den på arkivsiden eller i en widget må du bruke denne shortcode:

[wpbtags]

Bruk av denne koden alene vil bare vise tagkoblinger og posttelling ved siden av dem. Det vil ikke gjøre det ser pent ut. Lar legge til noe CSS for å gjøre det pent. Kopier og lim inn dette CSS i temaets stilark.

 .tagbox bakgrunnsfarge: #eee; grense: 1px solid #ccc; margin: 0px 10px 10px 0px; linjehøyde: 200%; polstring: 2px 0 2px 2px;  .taglink polstring: 2px;  .tagbox a, .tagbox a: besøkt, .tagbox a: aktiv text-decoration: none;  .tagcount bakgrunnsfarge: grønn; Farge: hvit; stilling: relativ; padding: 2 piksler;  

Du er velkommen til å endre CSS for å dekke dine behov. Slik så det på vårt demo-nettsted:

Styling Tags i Post Meta Information

Noen WordPress-temaer viser pent koder under innleggets metadatainformasjon med publiseringsdato, forfatter og andre metakoblinger. Men noen temaer kan ikke style dem i det hele tatt, eller du vil kanskje stil dem annerledes.

Lar se hvordan vi kan style tagkoblinger under et innlegg i WordPress.

Først må du finne ut CSS-klassen som brukes av WordPress-temaet ditt for å vise koder. For å gjøre det, høyreklikk på tagger og velg inspiser element fra nettlesermenyen.

Dette vil dele nettleserskjermen for å vise verktøylinjen for utvikler under websiden. I verktøylinjen for utvikler kan du se CSS-klassen som brukes av WordPress-temaet ditt for å vise koder.

I skjermbildet ovenfor kan du se at temaet bruker vilkår for CSS klasse. Nå skal vi bruke denne klassen i vårt tema eller barn tema stilark for å overstyre standard tema CSS.

 .termer a, .terms a: besøkt, .terms a: aktiv bakgrunn: #eee; grense: 1px solid #ccc; border-radius: 5 px; text-decoration: none; padding: 3px; margin: 3px; text-transform: store bokstaver;  .terms a: svever bakgrunn: # a8281a; farge: #fff;  

Du er velkommen til å endre CSS for å matche temaets farger. Slik ser merkene på vårt demo-nettsted:

Du kan merke forskjellen mellom de to skjermbildene, bortsett fra CSS-endringene, vi endret også Merker til Tagged og fjernet kommaene mellom koder. Hvordan gjorde vi dette?

Vi endret the_tags (); mal tag i vår single.php fil som denne:

Hvis du vil begrense antall totale koder som vises for å si 5 eller noe annet, kan du se denne artikkelen om hvordan du viser begrenset antall koder etter innlegg.

Vi håper denne artikkelen hjalp deg med stilkoder i WordPress. Du er velkommen til å eksperimentere med CSS til du får det ønskede resultatet.

Hvis du likte denne artikkelen, abonnerer du på vår YouTube-kanal for flere WordPress-videoopplæringsprogrammer. Du kan også finne oss på Google+ og Twitter.