php添加标签图标,WordPress 标签添加个性化图标的方法

本文介绍了一种在WordPress中为标签添加图标的简单方法。通过在循环中加入特定PHP代码及CSS样式设定,即可实现标签图标展示,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不少同学问到一个同样的问题,如何给标签添加一个图标。

这个展示是大前端D5主题才出现的,也是借鉴国外的一个网站的展示方式,如下图:

b96ed17afd4a7a6314bebb98174b6d7c.png

是不是很好看呢?方法很简单。

第一步:在wordpress循环中加入以下php代码:$posttags = get_the_tags();

if ($posttags) {

foreach($posttags as $tag) {

echo ''. $tag->name .'';

}

}

第二步:在css文件中设置背景图:.tag-link{color:#888;border:solid 1px #d6d6d6;border-radius:2px;box-shadow:0 1px 1px #eee;padding:2px 6px;margin-right:4px;display:inline-block;}

.tag-link:hover{background-color: #fbfbfb;border-color:#bbb;color: #444;box-shadow:0 1px 1px #ddd}

.tag-link-101,.tag-link-23{background-image:url(../img/tag.png);background-repeat:no-repeat;padding-left:25px}

.tag-link-101{background-position:4px 3px}

.tag-link-23{background-position:4px -17px}

给少数同学讲解一下吧!

php中设置了tag的链接,并给与每个链接加上一个公共class="tag-link"和一个私有class="tag-link-tag的ID",css中先给公共class定义tag的公共样式,然后在私有class上写图标(这里一般指的是定位:background-position),完事儿。

软件大小:6.28MB

软件类别:国外软件 | 博客系统

软件语言:简体中文

运行环境:PHP/Mysql

软件授权:免费版

更新时间:2013-7-24 16:05:30

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值