jQuery实现: 标签云显示每标签的文章数

这是西门需要的功能,西门目前是通过修改WordPress源文件实现的,但他希望用WordPress函数的钩子来实现,不过今天下午我看了下标签云(标签列表)源代码,木有适合的钩子来改变输出数据(我看了源码后觉得是这样,或许有其它办法),函数只提供了2个钩子,一个是标签类别,一个是整个函数钩子……

不过,在讨论+测试过程中我发现标签云列表本身就有“鼠标悬停显示当前标签的文章数”,所以是可以用 jQuery 来解决的。于是我就用到我博客侧边栏的标签云了,效果如下图:(也可以点击侧边栏的“签”查看效果)

标签云显示每标签的文章数

标签云显示每标签的文章数

怎么样?很蛋疼吧……

下面是实现方法,当然显示效果不是和我一样,我只是提供简单 jQuery 代码,具体的样式自行写 css

  1. 假如你的标签云调用代码如下:
<div class="widget">
    <h3>标签云</h3>
    <div id="tag_cloud"><?php wp_tag_cloud('unit=px&smallest=12&largest=12&number=50'); ?></div>
</div>
  1. 然后是 jQuery 代码,当然前提是先挂 jQuery 库
jQuery(document).ready(function($){
    ////////TAG Cloud里面显示“每标签的文章数” by zwwooooo
    $('#tag_cloud a').each(function(){
        var num=$(this).attr('title').split(' ')[0]; //获取标签里面的title值
        num=num.split('个')[0]; //WP3.6的翻译改变需要加上此
        var a=$(this).html()+' <span class="tag_num">('+num+')</span>'; //然后是标签的名插入此标签的文章数
        $(this).html(a); //最后是改变标签名
    });
})

文章数的样式可以通过 tag_num 这个class定义

好吧,很简单,是不?对,就是这么简单,高手忽略吧。

文囧,稍微记录一些碰到的、问到的问题及解决方法也可。

zww
or
oooo

“jQuery实现: 标签云显示每标签的文章数”有106条评论

  1. zoe says:

    :mrgreen: 这功能不算。CP了。。
    对了,zww. zBench这个主题个别文件更改为UTF-8编码后,前台就会报错.不改吧,又会有乱码.
    那个Pot文档能提供下吗?

    1. zwwooooo says:

      @zoe
      Po文档你直接下载zBench就有了啊。你说的问题貌似是最近WP官方导致的问题。

    2. zoe says:

      @zwwooooo
      呃..有.po文件,但不能增加新词条呢..

    3. zwwooooo says:

      @zoe
      新词条是自动搜索主题php文件里的 _e('xx','zbench')/__('xx','zbench')函数的,而不是你手动添加的,你先了解一下po文件在WP主题下的工作模式吧。

    4. zoe says:

      @zwwooooo
      嘿嘿,眼拙,没看到从源获取那个选项。。

  2. zoe says:

    :arrow: 说错了,是这功能不错。

  3. Veezy says:

    黑压压的一片...

    1. zwwooooo says:

      @Veezy
      对啊,就像一坨牛屎 ^_^

  4. 秦天SEO says:

    谢谢zww,学习了!

  5. Leo.N says:

    其实我想到的是一个相对2B的方法,就是把源文件中的函数wp_tag_cloud和wp_generate_tag_cloud复制到主题的function.php内,然后把函数名修改,同时也把sidebar.php中的修改,然后想怎么定义输出都行了。。

    1. zwwooooo says:

      @Leo.N
      这个方法对于一般的函数是可以的,但这个函数不行,有些参数你移到functions.php就失效了,主要关系到数据库一些函数,具体不知,反正简单移动是不能工作的,我测试过了。

  6. 胡一刀 says:

    单栏主题的人免疫了 哈哈~

    1. zwwooooo says:

      @胡一刀
      无需tag云的就不用折腾了,跟主题单不单栏无关吧

    2. 胡一刀 says:

      @zwwooooo
      没有边栏就不折腾tag云了呀 :lol:

    3. zwwooooo says:

      @胡一刀
      很多单栏的标签云在底部,哈

    4. 胡一刀 says:

      @zwwooooo
      俺研究研究~

  7. Byncc says:

    这个效果对提高PR有一定帮助。

    1. zwwooooo says:

      @Byncc
      有吗?应该没多大关系

  8. 还好,emlog直接有这样的功能,标签是显示所属日志数量的,不用这么纠结

    1. zwwooooo says:

      @sprityaoyao
      emlog很多功能其实就是直接数据库语句,不方便。

  9. wmtimes says:

    显示这个后面到是可以试下。

    1. zwwooooo says:

      @wmtimes
      能给人清晰的热门度

  10. 奚少 says:

    介个东西也就是无聊了折腾一下啦 :razz:

    1. zwwooooo says:

      @奚少
      对啊,我就很无聊的加上了,哈

  11. suN says:

    围观技术博客!!!

    1. zwwooooo says:

      @suN
      谢谢围观。

  12. CONEY says:

    显得有点乱了,呵呵~

    1. zwwooooo says:

      @CONEY
      本来就是一坨……

    2. CONEY says:

      @zwwooooo
      好好归置一下吧。。。

  13. Mr. Lau says:

    额。。一直都觉得标签云影响美观。。一堆一堆滴。。

    不过想考虑换一个形式。。

    1. zwwooooo says:

      @Mr. Lau
      有时找东东还是有点作用的

  14. 晨光 says:

    这功能挺不错的

    1. zwwooooo says:

      @晨光
      可以尝试一下

  15. 河河 says:

    又是一篇技术

    1. zwwooooo says:

      @河河
      谢谢你的鉴定,呵呵

  16. 郑永 says:

    这个貌似不错,呵呵,查询数据库的次数会不会多出来了?

    1. zwwooooo says:

      @郑永
      这里只是jQuery把本来就有的东西移一下位置而已

  17. 无冷 says:

    过来抄袭你的tags页面来了 :mrgreen: :mrgreen:

    1. zwwooooo says:

      @无冷
      哈哈,不是奶要吧,奶的主题又换了 - -

  18. 小邪 says:

    Mysql表示鸭梨很大,在角落里哭泣 ( ̄▽ ̄)

    1. zwwooooo says:

      @小邪
      小邪好像现在学数据库了?能否对wp的调用写几篇优化方面的文章?哈。

    2. 小邪 says:

      @zwwooooo
      嘿嘿,你这样做木有关系啦,前面咱是开玩笑的,因为WP在显示标签云的时候已经从数据里把每个标签的文章数取出来然后拿来控制字体大小了。
      我还木有开始学数据库啦,现在课程是从基础html开始的,毕竟照顾到那些啥都不懂的人。
      优化的话,查询代码优化、MYSQL自身的优化、缓存基本上应该就这三样了。要是查询数量大的话挂个缓存就OK咯,再不行的话要调整索引,数据表结构有些程序也有问题,再优化要根据需要换数据库程序了 ( ̄▽ ̄),扯远了。
      不过感觉咱关于数据库方面的知识还不够深入,木有办法写给力的文章呢。因为WP本身数据库结构是不变的,能优化的应该只能从查询语句和缓存下手了。所以如果要写文章的话就只能建议用缓存插件神马的,查询语句要看需要查啥,有时间倒是可以写篇文章讲讲联合查询。

    3. zwwooooo says:

      @小邪
      WP的很多函数本身已经是有缓存效果的了,所以一般我会尽量用WP自身函数实现需要的功能,如果是自己另外写的(如用sql语句)就要考虑了。

  19. A.shun says:

    挺实用的
    样式增强下就好了

  20. 行,是行,但CSS巨不好写啊,尤其哪个屁股。。

    1. zwwooooo says:

      @yesureadmin
      哈哈,学一下就好写了。

发表评论

昵称 *

网址

B em del U Link Code Quote