Så stil etiketter i WordPress

WordPress låter dig sortera ditt innehåll i taxonomier. Som standard kommer det med kategorier och taggar. Medan kategorier kan användas för att sortera innehållet i olika sektioner kan taggar användas för att sortera innehåll i mer specifika ämnen. Du kan visa taggar som används på din webbplats i ett tagmoln eller i ett listformat. I den här artikeln kommer vi att visa dig hur du stilar taggar i WordPress.

Visar alla etiketter med posträkning i WordPress

Vissa populära webbplatser visar deras populäraste taggar som ämnen på deras arkivsida eller i sidfoten. Så här kan du visa alla dina postkoder, med posträkning, och utan att använda taggmoln.

Det första du behöver göra är att kopiera och klistra in den här koden i ditt temas funktioner.php-fil eller webbplatsspecifika plugin.

 funktion wpb_tags () $ wpbtags = get_tags (); ($ wpbtags as $ tag) $ string. = 'term_id).' "> '$ tag-> namn.' '. $ tag-> count.' '." \ n "; returnera $ string;  add_shortcode ('wpbtags', 'wpb_tags'); 

Denna kod visar helt enkelt alla dina taggar med deras posträkning bredvid dem. Men för att visa den på din arkivsida eller i en widget måste du använda denna kortnummer:

[wpbtags]

Genom att använda den här koden ensam visas bara taglänkar och posträkning bredvid dem. Det kommer inte att göra det ser bra ut. Låt oss lägga till några CSS för att göra det vackert. Kopiera och klistra in den här CSS i temat stilark.

 .tagbox bakgrundsfärg: #eee; gränsen: 1px solid #ccc; marginal: 0px 10px 10px 0px; linjehöjd: 200%; vaddering: 2px 0 2px 2px;  .taglink padding: 2px;  .tagbox a, .tagbox a: visited, .tagbox a: aktiv text-decoration: none;  .tagcount bakgrundsfärg: grön; färg vit; position: relativ; padding: 2px;  

Gärna ändra CSS för att möta dina behov. Så här såg det på vår demo-webbplats:

Styling Taggar i Post Meta Information

Vissa WordPress-teman visar peka taggar under postinformationen med metadata med publiceringsdatum, författare och andra meta-länkar. Men vissa teman kanske inte stile dem alls, eller du kanske vill utforma dem annorlunda.

Låt oss se hur vi kan utforma taggar under ett inlägg i WordPress.

Först måste du ta reda på CSS-klassen som används av ditt WordPress-tema för att visa taggar. För att göra så högerklicka på taggar och välj inspektera element från webbläsarmenyn.

Detta kommer att dela upp webbläsarens skärm för att visa verktyget för verktyget under webbsidan. I utvecklingsverktygslådan kan du se CSS-klassen som används av ditt WordPress-tema för att visa taggar.

I skärmbilden ovan kan du se att temat använder villkor för CSS-klassen. Nu ska vi använda den här klassen i vårt temat eller barntema stilark för att åsidosätta standardtema CSS.

 .termer a, .terms a: visited, .terms a: active background: #eee; gränsen: 1px solid #ccc; border-radius: 5px; text-decoration: none; padding: 3px; marginal: 3px; text-trans: versaler;  .terms a: svävar (bakgrund: # a8281a; färg: #fff;  

Gärna ändra CSS för att matcha ditt temas färger. Så här såg taggarna på vår demo-webbplats:

Du kanske märker skillnaden mellan de två skärmdumparna än CSS-ändringar, vi ändrade också Tags to Tagged och tog bort kommatecken mellan taggar. Hur gjorde vi det här?

Vi modifierade the_tags (); malltaggen i vår single.php-fil så här:

Om du vill begränsa antalet totala taggar som visas för att vi säger 5 eller något annat, hänvisar du till den här artikeln om hur du visar begränsat antal taggar efter inlägg.

Vi hoppas att den här artikeln hjälper dig med taggar i WordPress. Känn dig fri att experimentera med CSS tills du får önskat resultat.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för fler WordPress-videotutorials. Du kan också hitta oss på Google+ och Twitter.