网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

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

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/06/30

本文主要为广大网友提供“WordPress 标签添加个性化图标的方法”,希望对需要WordPress 标签添加个性化图标的方法网友有所帮助,学习一下!

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

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

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

第一步:在wordpress循环中加入以下php代码:

$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo ''<a class="tag-link tag-link-'' . $tag->term_id . ''" href="''.get_tag_link($tag).''">''. $tag->name .''</a>'';
}
}

第二步:在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),完事儿。

WordPress v3.5.2 简体中文版下载

界面预览

  • 软件大小:6.28MB
  • 软件类别:国外软件 | 博客系统
  • 软件语言:简体中文
  • 运行环境:PHP/Mysql
  • 软件授权:免费版
  • 更新时间:2013-7-24 16:05:30
  • 相关链接:Home Page

  本文转自:大前端 » wordpress 标签添加个性化图标的方法

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号