如何在 WordPress 中轻松设置标签样式（附示例）

您想在 WordPress 中设计标签样式，让它们看起来更突出吗？

标签可以帮助您将内容组织成主题。可以帮助用户发现更多内容。

在本文中，我们将向您展示如何在 WordPress 中轻松给标签设定样式，以提高网站的用户参与度和页面浏览量。

如何在 WordPress 中显示标签

WordPress 有两个主要的分类标准，即类别和标签。类别用于内容的主要区域，而标签则允许您将内容分类为更具体的主题。

许多流行的 WordPress 主题默认在文章顶部或底部显示标签。

不过，您也可以在存档页面、页脚、侧边栏以及 WordPress 中的几乎任何地方显示标签。

要在文章、页面和边栏小工具中插入标签云，只需添加 “Tag Cloud “块即可。

标签云会根据帖子数量为每个标签提供不同的字体大小。您还可以选择在每个标签旁边显示帖子数量。

这些只是 WordPress 中的默认选项，但如果您想自定义更多标签呢？我们将为您演示。

让我们来看看如何在 WordPress 中轻松创建标签样式。

在 WordPress 中设计默认标签云的样式

将标签云块添加到帖子或页面后，您可以通过添加自定义 CSS 对其进行自定义。

标签云块会自动包含 WordPress 生成的默认 CSS 类，可用于调整它们的样式。

要为 WordPress 网站添加自定义 CSS，只需进入 “外观”》 ” 自定义 “页面，然后切换到 “附加 CSS “选项卡。

您可以从添加这段自定义 CSS 代码开始。

.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;
}

您可以使用 .tag-link-position 来根据链接的位置调整样式。帖子较多的标签位置较高，帖子较少的标签位置较低。

如果您希望标签云块中的所有标签大小相同，可以使用下面的 CSS 来代替：

.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;
  
}

这就是我们测试网站上的样子：

WordPress 中的文章标签样式

除了为标签云设计样式外，您可能还想为显示在单个博客帖子上的帖子标签设计样式。通常，WordPress 主题会在文章标题或文章内容的顶部或底部显示这些标签。

您可以将鼠标移至标签上并单击右键，使用 “检查 “工具查看 WordPress 主题使用的 CSS class。

然后，你就可以在自定义 CSS 中使用这些 CSS 类。以下是我们测试主题中基于 CSS 类的示例代码：

.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;
}

这就是我们测试网站上的样子。

在 WordPress 中创建自定义标签云

默认的标签云块很容易使用，但一些高级用户可能希望对其进行自定义，以便获得更大的灵活性。

通过这种方法，您可以在标签云周围添加自己的 HTML 和 CSS classe。然后，您就可以根据自己的要求定制标签云的外观。

首先，您需要将这段代码复制并粘贴到主题的 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' );

我们建议使用 WordPress 代码片段插件 WPCode 添加这些代码。它可以让你在 WordPress 中轻松添加自定义代码，而无需编辑主题的 functions.php 文件，因此不会破坏你的网站。

要开始使用，请安装并激活免费的 WPCode 插件。

激活插件后，从 WordPress 面板进入Code Snippets » Add Snippet。

然后，将鼠标悬停在 “Add Your Custom Code (New Snippet)”选项上，点击 “Use snippet”按钮。

在这里，你可以为页面顶部的代码段添加一个标题。标题可以是任何能帮助你记住代码用途的内容。

然后，将上面的代码粘贴到 “Code Preview “框中，并从下拉菜单中选择 “PHP 代码段 “作为代码类型。

之后，只需将开关从 “Inactive “切换到 “Active”，然后点击 “Save Snippet”按钮即可。

Activate and save your custom code snippet

此代码添加了一个简码，可显示您的所有标签，并在标签旁边显示其发布次数。

要在档案页面或 widget 中显示，您需要使用此简码：

[wpbtags]

单独使用这段代码只会显示标签链接和旁边的文章数。让我们添加一些 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;
}

请随意修改 CSS 以满足您的需求。这就是我们的演示网站上的效果：