Under årens lopp har WPBeginner fått många frågor om taggar, bland annat om du bör styla taggar i WordPress för att få dem att se mer framträdande ut.
Tags hjälper dig att organisera ditt content i ämnen. De gillar hashtags för dina blogginlägg i WordPress och hjälper användare att upptäcka mer content. Men vår erfarenhet är att om de inte sticker ut visuellt kan de förbises.
I den här artikeln visar vi dig hur du enkelt kan styla taggar i WordPress för att få mer engagemang från användare och page views på din website.
Så här visar du taggar i WordPress
WordPress levereras med två huvudsakliga taxonomier som anropas kategorier och taggar. Medan kategorier används för större områden av ditt content, allow tags you to sortera innehåll i mer specifika ämnen.
Många populära themes i WordPress visar taggar högst upp eller längst ner i dina posts som standard.
Du kan dock också visa tags på archive pages, footer, sidebars och nästan var du vill i WordPress.
För att infoga ett etikettmoln i dina posts, pages och widgets i sidebar kan du helt enkelt lägga till blocket ”Tag Cloud”.
Ett etikettmoln ger varje tagg en annan fontstorlek baserat på antalet posts. Du kan också välja att visa antalet posts bredvid varje tagged.
Dessa är bara de standard alternativ som finns tillgängliga i WordPress, men tänk om du ville customize dina tags ännu mer? Vi ska visa dig hur du gör.
Låt oss ta en titt på hur du enkelt kan formatera taggar i WordPress.
Styling av standard etikettmoln i WordPress
När du har addat blocket Tag Cloud till en post eller page kan du customize det genom att lägga till custom CSS.
Blocket med etikettmoln innehåller automatiskt standard WordPress-genererade CSS-klasser som kan användas för att utforma dem.
För att add to custom CSS till din WordPress site, gå helt enkelt till Appearance ” Customize page och växla till Additional CSS tabs.
Du kan börja med att lägga till denna anpassade CSS-kod som utgångspunkt.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Som du ser kan du använda .tag-link-position-klassen för att justera stilen baserat på positionen för links. Tags med fler posts är högre i position och tags med färre posts är lägre.
Om du vill att alla tags i ditt block med etikettmoln ska ha samma storlek, kan du använda följande CSS istället:
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Så här såg det ut på vår test site:
Styling av taggar för inlägg i WordPress
Förutom att styla dina etikettmoln kanske du också vill styla inläggstaggar som visas på dina enskilda blogginlägg. Vanligtvis skulle ditt WordPress-tema visa dem högst upp eller längst ner i postens titel eller postens content.
Du kan föra muspekaren över taggarna och högerklicka för att använda Inspektera-verktyget för att view de CSS-klasser som används av ditt WordPress-tema.
Efter det kan du använda dessa CSS-klasser i din customize CSS. Följare är en exempelkod baserad på CSS-klasser på vårt testtema:
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Så här såg det ut på vår test site.
Skapa ett customize etikettmoln i WordPress
Standard taggmoln block är lätt att använda, men vissa avancerade användare kanske vill customize det så att de kan få mer flexibilitet.
Denna metod allow you to add your own HTML and CSS classes surrounding the tag cloud. You can then use it to customize the appearance of etikettmoln to your own requirements.
Det första du behöver göra är att copy and paste den här koden i functions.php-filen i ditt theme eller i ett code snippets plugin:
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Vi rekommenderar att du lägger till den här koden med WPCode, det bästa code snippets-pluginet för WordPress. Det allow you to easily add custom code in WordPress without editing your theme’s functions.php file, so you won’t break your site.
För att komma igång installerar och aktiverar du det gratis pluginet WPCode. Om du behöver hjälp kan du läsa vår tutorial om hur du installerar ett plugin för WordPress.
När pluginet är aktiverat, head to Code Snippets ” Add Snippet från WordPress dashboard.
Håll sedan muspekaren över alternativet ”Add Your Custom Code (New Snippet)” och klicka på knappen ”Use snippet”.
Härifrån kan du add to en rubrik för snippet högst upp på page. Det kan vara vad som helst som hjälper dig att komma ihåg vad koden är till för.
Därefter klistrar du in koden ovan i boxen ”Code Preview” och väljer ”PHP Snippet” som code type från dropdown-menyn.
Efter det är det bara att toggle omkopplaren från ”Activate” till ”Inaktiverad” och clicka på knappen ”Save Snippet”.
Denna kod add to en shortcode som displayed all your tags med deras post count bredvid dem.
För att visa den på din archives page eller i ett widget behöver du använda denna shortcode:
[wpbtags]
Om du bara använder den här koden visas bara links till taggar och antalet inlägg bredvid dem. Låt oss add to lite CSS för att få det att se bättre ut. Bara copy and paste denna customize CSS till din website.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
Känn dig gratis att ändra CSS för att möta dina behov. Så här såg det ut på vår demo site:
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt stylar taggar i WordPress. Du kanske också vill se vår guide om hur du döljer eller stylar dina underkategorier i WordPress eller se den här listan med praktiska WordPress-tips, tricks och hacks.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
When I read this article, I got the urge to create my own tag cloud. I used your snippet but modified the colors and slightly rounded the corners. It worked like magic. It’s nice to have tags in the same color as the theme of the entire website. It may be a small detail, but it’s very pleasant.
Dennis Muthomi
the step-by-step guide and code snippets are really helpful
QUICK QUESTION: If I apply these code snippets to style my tags and later decide to change my WordPress theme, will the tag styling change according to the new theme’s default styles, or will it stick with the customizations I made using these code snippets?
WPBeginner Comments
The CSS you added should remain, but you may still have to edit the CSS depending on how the new theme’s CSS effects the styling, and if there are any conflicts.
Dennis Muthomi
hello, thank you for the helpful clarification!
As long as I can keep the customizations with some minor tweaking, that is very useful to know.
One follow-up question – when switching themes, what would be the best way to check for and resolve any CSS conflicts that affect the tag styling?
WPBeginner Support
We do not have a specific best way we would recommend. It would be something you would need to manually check for.
Jiří Vaněk
Just following up on Dennis’s question. Is it better to add CSS using WP Code or to put it directly into the template? I assume that if I put it into the template, I’ll lose the settings when changing the theme, but if I use WP Code, the styles will remain even after changing the theme. Is that correct?
WPBeginner Comments
Correct. This is similar to using the Additional CSS section in the theme Customizer.
That said, the CSS needed will be different from theme to theme, so the usefulness will vary.
Nikola
Great guide, thanks!
Would it be possible to order the tags by most used and limit the number of tags shown?
WPBeginner Support
At the moment you would need to use a plugin for that or custom code, we do not have a recommended method for that at the moment.
Administratör
Jemma Pollari
Awesome, thanks. This really helped.
WPBeginner Support
Glad our guide could help
Administratör
Joe Smith
This is great! Exactly what I was looking for and very classy. Just one question: If I wanted to add more space between the tags, how would i modify the css? I’ve tried changing several of the settings in the css above but none of them simply add whitespace between the tags.
WPBeginner Support
You would want to increase the padding for what you’re wanting
Administratör
Ibiye Ambille
Hi, i would love to move my post tag to below the featured image
WPBeginner Support
For that, you would want to reach out to your specific theme’s support for assistance as each theme has its own location for the featured image.
Administratör
Trishah
I’m trying to add a CSS class ”current” to tags for a single post. The few solutions I’ve found no longer seem to work. How would I do this?
WPBeginner Support
That would vary based on your specific theme, if you reach out to your theme’s support they should be able to let you know where you can add that class for your tags.
Administratör
uche Peter
My tags are listed serially.. No Border nothing nothing,,, just a text …please how do I give it a border with background color
Kingsolomon
How to i apply the css pls
Hugo
My tag cloud doesn’t come as a cloud but as a list, since after each span a line break is inserted. How can I remove these line breaks?
WPBeginner Support
Hi Hugo,
This article discusses how to style tags in different ways. If you want a tag cloud then you can use the default WordPress tag cloud widget. You can also use the template tag
1-click Use in WordPress
Administratör
bob
I get that you showed another page on how to limit tags to a certain number, but how can I do it with this example included? It doesn’t seem to work using the method linked in combination with this.
Amy Croson
I’m struggling with adding this, and I believe it’s with how my ’Chosen’ Theme is limiting me. I’ve copied & pasted all into my php, & it is giving me errors left and right. I’m currently being told that there is an unknown ”.” in this detail. Is there any way to format this without using the ”.”s before .taglink, .tagbox, & .tagcount?
Val Archer
Hi – I’m looking for a way to list tags on a category-slug.php page. Do you perhaps know where I can find that tutorial?
So far I’ve created a category [sitename]/category/recipes and a category-recipes.php.
I’m tagging the recipes, e.g. Breakfast, Dinner, etc
I’d like the Tags to display in category-recipes.php like this. I don’t know what I’m doing. I’m copying from my category.php file.
Archives for the Category:
Breakfast
now it lists all the posts tagged with Breakfast something like this:
<a href="”>
by / / posted in cat_name . ’ ’;} ?>
Dinner
now it lists all the posts tagged with Dinner something like this:
<a href="”>
by / / posted in cat_name . ’ ’;} ?>
[Then at the end of all the Tags:]
</div
Please do you know where I can get help on this?
thank you! – Val
WPBeginner Support
Have you tried adding:
<?php the_tags('posted in:', '' ,'' ); ?>Administratör
Magistar
Code works fine for a tag cloud. However I would like to apply this to the post tags (meaning the tags associated with a post and their count, instead of the big list).
I tried something with wp_get_post_tags but I did not really got it to work. Any suggestions?
WPBeginner Staff
You can use get_terms instead of get_tags, see this codex page:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
That’s great, I’ve added your code to a site-specific plugin – but is there a possibility, to change it in a way, that the font-size vary on how often the tag is used? Any idea please? Thanks!
WPBeginner Staff
Yes it is possible, in the first piece of code you would need to replace get_tags with wp_tag_cloud function. Like this:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Guest
How do you do the same thing with the custom tag cloud for Categories and Custom Taxonomies?
Terence O'Neill
Hey mate; How do I do the exact same(display with shortcode) for Categories and Custom Taxonomies? Thx for the tutorial btw. Works like a charm.