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. TekTea says:

    z大,你右侧的“标签”功能能否给我完整的代码呢?我现在的主题所用的标签在IE6和360浏览器下特效全部失效,唉,我看你的兼容性倒是挺好的。。。方便的话,发给我EMAIL吧,多谢。

    1. zwwooooo says:

      @TekTea
      IE6还是放弃吧,要兼容就hack一下,不知道如何就算了吧,反正IE6不鸟也罢,至于360……这类加壳浏览器无视(当作IE),特别是360,还是别用了。

  2. TekTea says:

    z大,我试了下你这个方法,貌似不管用了哦。。

    1. zwwooooo says:

      @TekTea
      这个需要jQuery,不管用就是没折腾好,认真检查下。

  3. You says:

    目前好像获取后会在出现“个话题”中文字,不知道该如何去掉,希望指导

    1. zwwooooo says:

      @You
      如果你安装我这个折腾成功的话不会出现的,因为里面的 num=$this.attr('title').split(' ')[0] 已经处理掉了

    2. You says:

      @zwwooooo
      但你发现你的了没有,也是同样的效果。span里边包含了“个话题”中文字。博主可以看看自己右侧的 :roll:

    3. zwwooooo says:

      @You
      诶?好像是诶,难道上次修改忘了测试了?不知道是否新版 jQ 库的问题,抽时间看看。

    4. zwwooooo says:

      @You
      OK,原来是WP中文版的翻译改变了,你在
      var num=$(this).attr('title').split(' ')[0]; //获取标签里面的title值
      后面加上:
      var num=num.split('个')[0];
      试试吧,我稍后会修改文章。

    5. zwwooooo says:

      @You
      呃,错了,是加上:
      num=num.split('个')[0];

      那个 var 不需要了。

    6. You says:

      @zwwooooo

      三克油!正常哈 :mrgreen:

  4. helsing says:

    帮你踩老文章...

    1. zwwooooo says:

      @helsing
      谢谢你的一踩,博客突然有了些许生机

回复给 You ¬
取消回复

昵称 *

网址

B em del U Link Code Quote