如何给文章添加热门、新、推荐、特价的标签图标？-FUNION数字营销

大家好，我是FUNION数字营销实战派飞小优，不久前出过一篇关于《wordpress第三方主题中原生文章后台的置顶和前端显示文章置顶为什么是不一样的？如何实现通过勾选后台置顶后前台文章也显示置顶小图标？》，今天也同样跟大家介绍如何实现给文章添加热门、新、推荐、特价的标签图标，先看下具体的前端DEMO。

解决方案

整体来讲，实现该功能不难，只需要依赖ACF插件，创建一个自定义字段即可搞定，考虑到很多人都是小白，我将实现步骤介绍给大家。

具体实现步骤

先安装ACF插件，后台可以搜索关键词然后直接安装，具体安装步骤省略。

创建自定义字段

创建自定义字段后，点击自定义字段-编辑，如下：

点击这个服务标签后，进入到具体编辑页面，按照下方的提示配置好。

选择文章类型

上述步骤完成后，还需要进一步选择关联到你的文章类型，这个是决定了你文章页面后台能出现这个配置窗口

然后再回到文章页面，你就可以看到这个配置显示后台，如下

修改前端代码输出到指定位置

上面的两个步骤走完后，前端依然是看不到该标签的，因为在前端渲染模板中并未输出这个代码，因为没有这个字段值，所以需要再次进一步进行代码编写，构造代码。

找到这个模板代码位置，具体取决于你实际的文章模板。如下：

<?php if ($badges = get_field('service_badges')) : ?>
     <div class="service-badges-container">
          <?php foreach ($badges as $badge) : ?>
               <?php 
               $badge_class = '';
               $badge_text = '';
               switch($badge) {
                   case 'hot':
                      $badge_class = 'badge-hot';
                      $badge_text = '热门';
                      break;
                   case 'new':
                      $badge_class = 'badge-new';
                      $badge_text = '新上架';
                      break;
                   case 'recommend':
                      $badge_class = 'badge-recommend';
                      $badge_text = '推荐';
                      break;
                   case 'limited':
                      $badge_class = 'badge-limited';
                      $badge_text = '限时优惠';
                      break;
               }
?>

最后就是输出css代码，如下：

.service-badges-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.service-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    border-radius: 3px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.badge-hot {
    background-color: #ff5722;
}
.badge-new {
    background-color: #4caf50;
}
.badge-recommend {
    background-color: #2196f3;
}
.badge-limited {
    background-color: #ff9800;
}

然后将css代码粘贴到你的样式表中即可完成整个部署。