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

    沙发~~

  2. Timothy says:

    可以把这功能集成到我的皮肤中,嘿嘿

    1. zwwooooo says:

      @Timothy
      霍霍,也不错

  3. 林木木 says:

    嗯嗯,小功能~不错不错

  4. Dick_Wu says:

    有时间把这个功能爬走!

  5. phoetry says:

    good, 后台实现那是相当的麻烦

    1. 西门 says:

      @phoetry
      实现很简单,修改源代码即可。但就是影响升级,升级程序就会覆盖了。 :cry:

    2. zwwooooo says:

      @phoetry
      是的,没有钩子就很麻烦了

    3. zwwooooo says:

      @西门
      你这个不叫“后台实现”,哈。

  6. 无冷 says:

    输出到title了 :evil:

  7. Sivan says:

    好功能 :mrgreen:

    1. zwwooooo says:

      @Sivan
      这……哈

  8. 侧栏发现了TAGS 但是好像木有显示数目?
    莫非?

    1. zwwooooo says:

      @心淡若水
      因为奶没有刷新到js,ctrl+f5吧

    2. @zwwooooo
      纳尼?果然如此 刷新几次 给力的浮现了
      这个 挺给力的

  9. 做个标签页面,然后显示每个标签的文章数挺不错的。

    1. zwwooooo says:

      @阅微博客
      对啊,我也是前几个月前才加了标签、分类专门页

  10. 额。。我不用标签耶。。。

    1. zwwooooo says:

      @蓝色离子
      那就无需折腾

  11. 咚门 says:

    哇,看着眼睛有点花啊,颜色可以调一下不。

    1. zwwooooo says:

      @咚门
      懒得调了,反正真正需要标签索引的人比较少

  12. 好看好看真好看 我喜欢谁帮我弄啊不错

    1. zwwooooo says:

      @软件风暴
      这……还是自己动手吧,省钱

  13. 象牙塔 says:

    我感觉还是原来的鼠标悬停显示当前标签的文章数比较好看!

    1. zwwooooo says:

      @象牙塔
      悬停还是有的

  14. ccaiai says:

    折腾完php现在想学下浏览器脚本…
    不知道是学JS 还是JQ 还是……
    接触的越多,就发现自己知道的越少啊。

    1. zwwooooo says:

      @ccaiai
      知识本来就是学不完的

  15. Dick_Wu says:

    好开心啊。z大写一篇文章就能爬一个功能回去!

    1. zwwooooo says:

      @Dick_Wu
      能让你开心折腾,这文章值了

    2. Dick_Wu says:

      @zwwooooo
      z大这话说得让我好有压力啊!
      不过为什么我用Chromium的UA访问标签云那里木有变化呢?缓存我也清过了~FF倒是有变化的~

    3. zwwooooo says:

      @Dick_Wu
      js文件要更新

  16. 功底越来越多,体积越来越大 :!:

    1. zwwooooo says:

      @yesureadmin
      其实这只是加了一小段jQuery代码,不影响

  17. axiu says:

    以前记录的有段代码,当然,也是别处CP来的~~可以试试哈。

    <?php
        $tags = wp_tag_cloud('format=array');
        foreach ($tags as $tag)
        {
            $xml = simplexml_load_string($tag);
            echo '<li><a href="'.$xml->attributes()->href.'">'.$xml.'</a> ('.str_ireplace(' 个话题', '',$xml->attributes()->title).')</li>';
        }
    ?>
    1. zwwooooo says:

      @axiu
      稍后测试一下,按道理是OK的

  18. 集趣 says:

    这个方法不错哦~我正需要,哈哈

    1. zwwooooo says:

      @集趣
      那就折腾吧

  19. xzymoe says:

    我用的是一个3D云表情的效果 呵呵 不过这个也很漂亮 还不使用插件 :oops:

    1. zwwooooo says:

      @xzymoe
      3D云插件很赞,但我不喜欢用一些不是非常必要的插件

    2. xzymoe says:

      @zwwooooo
      是的 我大多数都是优化类插件 就那么两三个美化插件 都是用代码实现比较好 今天才把评论表情用代码搞好 呵呵

    3. zwwooooo says:

      @xzymoe
      不过要注意:代码方式不一定就会比插件高效多少,主要是插件的需求,不是特别必要的就无需了。

    4. xzymoe says:

      @zwwooooo
      请问一下大神 你觉得wp多少插件是性能的极限 一般安装多少插件还是在可以接受的范围??呵呵 我安装了16个 感觉有点多啊

    5. zwwooooo says:

      @xzymoe
      16个?多?要看你的主机性能和访问量,主机给力有些人装40几个你也感觉不到慢。另外……我不是大神……折腾者而已

发表评论

昵称 *

网址

B em del U Link Code Quote