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

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

这个展示是大前端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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WordPress主题MX互动展示型主题以资源分享与会员互动为主,营造基于交流形式的的气氛。为发掘和推广网站资源不遗余力,助力有爱的站长和用户们走上正确的道路。 这是一款以互动分享为主的主题,其强大的功能与简洁的界面,在 WordPoi (INN STUDIO 专用)基础上得以实现,可谓是 INN STUDIO 创立以来至 2015 春季精心之作。 界面以 PoiCSS 框架(INN STUDIO 专用)架构,追求简单一目了然的风格。各种操作快速响应,无拖泥带水之感。 在实现了众多的功能,主题的运行效率依然非常高。根据多次测试,在单核 1G 硬件上,不使用静态文件缓存,执行一次只需 50ms (使用 WordPoi 版本)。使用 PoiCache (静态文件缓存)后仅需 3 ms,效率之高令人印象深刻。 基于 HTML5 开发,使用现代 DOM 操作接口;基于 PoiCSS 框架(INN STUDIO 专用)开发,响应式设计在 PC 与移动设备都有良好的体验;使用模块化开发,使用 Webpack 管理,载速度十分快;多种幻灯片风格;强大的会员系统;独特的评论系统;完善的投稿系统;丰富的积分系统;实用的兑奖系统;简洁的勋章系统;有趣的“聚光灯”系统;个性化十足的“文章打分”功能;集成 QQ 与 渣浪 第三方登录;自动输出标签集与分类索引页面;精心优化过的投稿系统;会员积分排行的小工具;文章排行的小工具;内置可使用图标的菜单;高效的运作代码;多彩配色……等将近 百款功能。 WordPress主题MX互动展示型主题截图 相关阅读 同类推荐:博客/个人网站

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值