wordpress外贸建站教程：给Elementor的Tag标签添加样式

继续分享wordpresss外贸建站教程。最近卖出一个YRWP系列模板，有个客户是做SEO的，对网站的标签系统比较在意，所以想给文章和产品详情页添加标签显示。

标签功能本身是自带有的，只是没让它直接显示出来。接下来就分享一下如何显示吧，这里以YRWP006模板为例。

步骤一：添加Post Info调用标签

YRWP系列模板是在Elementor编辑器基础上做的，所以首选打开文章或产品详情页模板，进入Elementor编辑页面，然后添加一个Post Info模块，Type这里选Terms，然后下面选标签（如果是YRWP的产品详情模板，就选all-tags）。

添加之后的默认显示效果如上图所示，比较简单，Post Info模块也只能设置图标的字体大小和颜色。如果想进一步美化标签显示，继续看下一步。

步骤二：添加CSS样式

selector .elementor-post-info__terms-list-item{
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  padding: 3px 8px 3px 8px;
  margin-right: 2px;
  background:#F9F9FA80;
}
selector a:hover{
    color:#000000;
}

这里可以使用上面CSS样式，大家也可以在这个CSS样式基础个修改，比如边框、背景色、圆角、间隔等，最后那个颜色是鼠标的悬停色。

改好CSS样式后，打开详情页模板，选项Post Info模块，打开左边的高级设置，拉到最下面的Custom CSS，把代码粘贴进去就可以看到效果了，如上图所示。

总结

今天的分享就到这里，希望对您有用。