为wordpress热门标签加个小图标

知更鸟
知更鸟
站长
2322
文章
0
粉丝
WordPress317,177阅读模式

分类可以加个性图标,那么标签是不是也可以加上图标?当然可以!官网Codex已为我们提供了现成的代码:

http://codex.wordpress.org/Function_Reference/get_the_tags

  1. <?php
  2. $posttags = get_the_tags();
  3. if ($posttags) {
  4.   foreach($posttags as $tag) {
  5.     echo '<img src="http://example.com/images/' . $tag->term_id . '.jpg"
  6. alt="' . $tag->name . '" />';
  7.   }
  8. }
  9. ?>

官网原代码中的标签无链接,小图标地址是绝对路径,简单修改一下:

  1. <?php
  2. $posttags = get_the_tags();
  3. if ($posttags) {
  4.   foreach($posttags as $tag) {
  5.     echo '<a href="'.get_tag_link($tag).'"><img src=" '.get_bloginfo('template_directory').'/image/' . $tag->term_id . '.jpg" />'. $tag->name .'</a>';
  6.   }
  7. }
  8. ?>

小图标地址改为相对路径,可以将小图标放到当前主题 image 目录中,默认小图标名称以相应的标签ID命名。

可以修改其中的:$tag->term_id$tag->name,这样图标可以直接用标签名称命名。

用上述代码替换主题默认的标签函数:

  1. <?php the_tags(); ?>

如果主题无类似的标签调用函数,可以加到模板主循环适当的位置。

最后,用CSS样式美化一下,即可。

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  31  访客  28  作者  2
    • 爱的就是你
      爱的就是你 4

      没想到我占到沙发了~~~最爱鸟哥的主题了,鸟哥问个问题,百度页面优化建议,有很多合并JS,合并CSS,使用Css Sprite等等这样的建议,能不能优化下呢??

      • 老虎
        老虎 6

        tag加图标有什么意义呢?不知道有没有例子看看

          • 知更鸟
            知更鸟

            @ 老虎 呵呵,与问文章加缩略图有什么意义相同

          • 奶茶加盟
            奶茶加盟 3

            不知道效果是怎么样的,博主加个截图之类的在文中不是更直观些呢?

            • PHP空间
              PHP空间 3

              还好吧。。不是很实用

              • yangkl0909
                yangkl0909 0

                看起来不错也,有空试验一下

                • Louis Han
                  Louis Han 6

                  呵呵 总会有人喜欢这样的小功能

                  • 网商资讯
                    网商资讯 1

                    恩,应该不错

                    • wmtimes
                      wmtimes 7

                      要是能用背景就好了。要不然这图片还真不少。

                      • 都督府
                        都督府 0

                        博主,这个效果在哪里该?要把边栏最上方“最新文章”改成广告。
                        [img]http://img.aalun.com/di/U2SR/ad.jpg[/img]

                        • 中国板报网
                          中国板报网 1

                          呵呵 这个不错 我觉得用符号替代更好

                          • www.tonitech.com的站长
                            www.tonitech.com的站长 0

                            这个加了干嘛的啊?我觉得没什么用啊。。。多了一层隐喻用户会很奇怪的。。。

                            • M-swain
                              M-swain 2

                              这功能对某些主题可能好一点,但标签太多也麻烦

                              • kity
                                kity 0

                                感觉意义不大,不过适合折腾的人,哈!

                                • 宏岳
                                  宏岳 0

                                  鸟哥,想跟你咨询个问题,我想从我们公司的OA平台直接设置一个链接,点击自动登录到我的wordpress,我想知道wordpress受理用户名密码的地方是哪里

                                  • 每日精华帖
                                    每日精华帖 3

                                    鸟哥,我的摘要显示有乱码,怎么回事?还有,点击最下面的公告,老是提示没有该页面,可是公告我有啊。
                                    这是为什么啊,跪求鸟哥解答。
                                    可以进站看下,非常感谢http://www.zhuwit.com

                                    • 每日精华帖
                                      每日精华帖 3

                                      鸟哥,我的摘要显示有乱码,怎么回事?还有,点击最下面的公告,老是提示没有该页面,可是公告我有啊。
                                      这是为什么啊,跪求鸟哥解答。我插入一张图片,您看下,鸟哥。

                                      • 每日精华帖
                                        每日精华帖 3

                                        点击公告,出现的是这个。看图。

                                        • 每日精华帖
                                          每日精华帖 3

                                          第一张图片,没显示完整,图片地址是:http://www.zhuwit.com/wp-content/uploads/2012/09/zhigengniao.jpg
                                          跪求鸟哥解答!

                                          • 贼逗
                                            贼逗 0

                                            学习了

                                            • iisimpler
                                              iisimpler 1

                                              鸟哥,问两个关于图片的问题:

                                              第一:插入到文章中的分辨率比较大的图片如何使其能够根据版面自动缩放(这个默认主题可以),并且点击后使暗箱效果是根据窗口自动缩放的;

                                              第二:相册中分辨率比较大的图片在暗箱中如何根据窗口自适应。

                                              现在的主题中,比较大的图片在文章中只能显示一部分,而在暗箱中的时候,不管是文章中的图片放大还是相册中的都只能显示一部分,望指教!

                                              • 二七豆冠
                                                二七豆冠 0

                                                鸟哥,有没有演示?想看看效果~

                                                • 好软件精选
                                                  好软件精选 1

                                                  受教了

                                                  • 风轻云淡
                                                    风轻云淡 0

                                                    能搞个演示效果最好了

                                                    • AVX钽电容
                                                      AVX钽电容 1

                                                      不懂弄呀。。。

                                                      • 深圳画册设计
                                                        深圳画册设计 0

                                                        有空试验一下

                                                        • sindbad
                                                          sindbad 1

                                                          收到,有空尝试一下

                                                          • wpblog博客
                                                            wpblog博客 1

                                                            谢谢,收藏了

                                                            • wawdmlq
                                                              wawdmlq 0

                                                              终于寻到了,我正需要。

                                                            匿名

                                                            发表评论

                                                            匿名网友
                                                            :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                            拖动滑块以完成验证