WordPress allows you to sort your content in taxonomies. By default it comes with categories and tags. While categories can be used to sort your content into different sections, tags can be used to sort content into more specific topics. You can display tags used on your site in a tag cloud or in a list format. In this article, we will show you how to style tags in WordPress.
WordPress允许你在你的内容进行分类的分类法 。 默认情况下，它带有类别和标签 。 虽然类别可用于将内容分类为不同的部分，但标签可用于将内容分类为更具体的主题。 您可以标签云或列表格式显示网站上使用的标签。 在本文中，我们将向您展示如何在WordPress中设置标签样式。
Some popular websites display their most popular tags as topics on their archives page or in the footer area. Here is how you can display all your post tags, with post count, and without using the tag cloud.
一些受欢迎的网站在其存档页面或页脚区域中将最受欢迎的标签显示为主题。 这是不使用标签云即可显示所有帖子标签以及帖子数的方法。
First thing you need to do is copy and paste this code in your theme’s functions.php file or site-specific plugin.
您需要做的第一件事是将此代码复制并粘贴到主题的functions.php文件或特定于站点的插件中。
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' );This code simply displays all your tags with their post count next to them. However, to display it on your archives page or in a widget you need to use this shortcode:
这段代码仅显示所有标签及其旁边的帖子数。 但是，要在存档页面或小部件中显示它，您需要使用以下短代码：
[wpbtags]
[wpbtags]
Using this code alone will just show tag links and post count next to them. It will not make it look pretty. Lets add some CSS to make it pretty. Copy and paste this CSS into your theme’s stylesheet.
仅使用此代码将仅在其旁边显示标签链接并发布数量。 它不会使它看起来很漂亮。 让我们添加一些CSS使其漂亮。 将此CSS复制并粘贴到主题的样式表中。
.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;
}Feel free to modify the CSS to meet your needs. This is how it looked on our demo site:
随意修改CSS以满足您的需求。 这是在我们的演示站点上的样子：
Some WordPress themes nicely display tags under the post meta data information with publishing date, author and other meta links. However some themes may not style them at all, or you may want to style them differently.
一些WordPress主题很好地在发布元数据信息下显示带有发布日期，作者和其他元链接的标签。 但是，某些主题可能根本无法设置样式，或者您可能想要不同地设置样式。
Lets see how we can style tag links below a post in WordPress.
让我们看看如何在WordPress中的帖子下方标记标签链接的样式。
First you need to find out the CSS class used by your WordPress theme to display tags. To do that right click on tags and select inspect element from the browser menu.
首先，您需要找出WordPress主题用于显示标签CSS类。 为此，请右键单击标签，然后从浏览器菜单中选择检查元素。
This will split the browser screen to display developer tool box below the webpage. In the developer toolbox, you can see the CSS class used by your WordPress theme to display tags.
这将拆分浏览器屏幕，以在网页下方显示开发人员工具框。 在开发人员工具箱中，您可以看到WordPress主题用来显示标签CSS类。
In the screenshot above you can see that the theme is using terms for CSS class. Now we will use this class in our theme or child theme’s stylesheet to override the default theme CSS.
在上面的屏幕截图中，您可以看到主题正在使用CSS类的terms 。 现在，我们将在主题或子主题的样式表中使用此类，以覆盖默认主题CSS。
.terms a, .terms a:visited, .terms a:active {
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}
.terms a:hover {
background:#a8281a;
color:#FFF;
}Feel free to modify CSS to match your theme’s colors. This is how the tags looked on our demo site:
随意修改CSS以匹配主题的颜色。 标签在我们的演示站点上的外观如下：
You may notice the difference between the two screenshots other than the CSS changes, we also changed Tags to Tagged and removed the commas between tags. How did we do this?
您可能会注意到，除了CSS更改之外，这两个屏幕截图之间的区别是，我们还将“标签”更改为“已标记”，并删除了标签之间的逗号。 我们是如何做到的？
We modified the_tags(); template tag in our single.php file like this:
我们修改了the_tags(); 我们的single.php文件中的模板标签如下：
<?php the_tags('Tagged:', '' ,'' ); ?>If you want to limit the number of total tags displayed to let’s say 5 or something else, then refer to this article on how to show limited number of tags after post.
如果您希望将显示的标签总数限制为5个或其他，请参考这篇文章， 了解如何在post之后显示有限数量的标签 。
We hope this article helped you style tags in WordPress. Feel free to experiment with the CSS until you get the desired result.
我们希望本文能帮助您在WordPress中设置标签样式。 随意尝试CSS，直到获得所需的结果。
If you liked this article, then subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Google+ and Twitter.
如果您喜欢本文，请订阅我们的YouTube频道，以获取更多WordPress视频教程。 您也可以在Google+和Twitter上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-style-tags-in-wordpress/
