WordPress 菜单显示今日更新数量 类似 bilibili 气泡

文中涉及的大块代码均为 模板函数 (functions.php) 中的操作。

20140617175242

故事的开始,是我想要这么一个功能。

接着通过搜索,得到了这篇文章:

http://segmentfault.com/q/1010000000406084

但是这无法解决问题,菜单会包含非“分类”的条目,而如果实现了全局,则就无法自定义的进行控制。(当然,一个原因也是我不会写)。

接着思考出的方案便是:手动将这个值放进去。

那么你需要重新制造一次“菜单”:

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

因为不会写复杂的代码,更弄不出一个控制台。

它提供了个方案,刚好适用于这种情况,于是我就整合了下……


So,忘掉上面的废话,进入正题(实现它的代码):

文中涉及的大块代码均为 模板函数 (functions.php) 中的操作。

1. 首先,注册一个菜单:

实际上你的主题一定已经拥有菜单了,如不新增一个,可以无视第一步。但是你得知道这个菜单的名称和 header 中的位置。

2. 而后,给菜单建立一个新的结构:

3. 接着是计时数据的代码:

4. 调用这个菜单的代码:

刚才我们说可以无视第一步建造菜单,因为你可能已经有了,那么你只需要拷贝 第 2 3 步骤的代码即可,在引用菜单的位置:

你需要在以上这种默认语句中加入

也就是我们重新制造的菜单,最终为

primary 是你的主题定义的菜单名称。

好了,这个功能已经实现。


以下使用方法(和整合以上代码的整段代码):

1. 首先,在后台进入【外观】-【菜单】:

20140617183801

2. 如果你没有打开更多的选项(我们所需的“图像描述”),在这里:

20140617183854

20140617183944

3. 在项目的“图像描述”中填写菜单中该分类的ID:

20140617184307

OK,大功告成。

20140617181644


总结:

1. 你可能偶尔会需要是否要显示某分类,但不想重复的删去和查找分类的ID,你可以填写一个负数,例如:分类“1”,该成“-1”,它就不显示了,回头要启用就去掉“-”。 因为 WordPress 4.0 我重新改了这个代码,这个 - 号貌似不管用了。

2. 如果你需要的不是“今日”更新数量,而是其它日期范围,在代码中的注释有说明,可以对其进行更改。

3. 实际上它也完成了另一项功能,如果你不要气泡,就拿去当作“让菜单条目显示描述”,不填分类ID,填文字就好了。

4. 实现这个功能可能有更好的方法,或已经实现或还没有出现;我不会写操作台,因此只能直接修改代码的方式,但作为在一个不只有“分类”的菜单中显示更新(并或并不是一个分类),以及单独的开关;以此比较取巧的拿了“图片描述”位置取值。

5. 竟然能折腾这个,CSS样式就自己写吧!如果你将能把它写成插件,一定要发送给我一份!

本文的代码整合:

它是放置在 模板函数 (functions.php) 的,第 5 行注释为调用代码。

如果你直接拷贝最后的整块代码,请注意 第4步 这个一定要找到那个菜单的位置稍作修改以进行匹配工作,就会生效了,CSS 部分参考评论我 @蛋疼君 的方案。


2014.09.05 进行了修订,因更新 WordPress 4.0 后产生的失效做修复,同时简化了步骤代码。现在你只需要 拷贝 2 3 步骤代码到 函数模板,并明确菜单在 header 中的位置,对其进行一点点修改即可。


2014.09.26 为了更方便找到分类对应 ID,推荐插件:Catch IDs

WordPress 插件页面:http://wordpress.org/plugins/catch-ids/

它会在分类编辑页的分类旁标记 ID 号。

33 thoughts on “WordPress 菜单显示今日更新数量 类似 bilibili 气泡”

    1. 增加模板函数的代码,里面比较容易搞错的是重新结构和注册菜单,名称容易弄错,以及和默认主题已有的代码混了。

      随后正确的调用(相应的)菜单就可以了。后台菜单选定对应的位置。

      嗯,代码的关联容易弄错。我在文中用的是 wp_nav_menu_seabye(); 作为菜单的命名和调用 seabye。

      问题应该出在命名和调用上,顺便检查下模板自带的菜单函数是否还在或冲突。

      1. 又是我 。。。“并明确菜单在 header 中的位置” 这个怎么理解

        1. 为了修改你要显示的这个菜单:

          这段代码:

          里边原本是没有这句的,意思是让它使用在函数模板里我们建立好的一个叫做

          的菜单结构。以使菜单和函数模板里的结构匹配生效。

        2. 你把 步骤 2 3 的代码放入函数模板,其它不用动。
          而后找到你要显示气泡的那个菜单,在里面按照步骤 4 加入

          就可以了。 😡

    1. 右键我的模板上那个气泡,然后审查该元素,可以看到CSS代码 .day 这个类了,上面的代码我也相同的加了 .day 这个类。(Chrome 浏览器这样操作比较方便)。

      详细点的就是指:定义 .day 这个类 背景色半透明蓝色,字体白色,然后是高度跟宽度(因为控制它的位置这块每一个模板都不同,没有统一的代码,粘贴上后根据自己的情况调整位置)。

  1. 按照方法测试了,没有成功显示。

    我是直接把博主给的完整代码放在functions.php中,然后安装了插件,分类目录的id显示了。在菜单下面,也出现了图像描述,填写了相应的Id。

    求指导

    1. 嗯哈,我猜测是 第【4. 调用这个菜单的代码】没有做,第4步,找到你的菜单的代码所在位置,并稍作修改,应为要匹配我们在函数模板建立的结构。就会显示了~ CSS部分不好写的话,可以参考评论上我给 @蛋疼君 的代码 调整下位置和颜色就可以了。

      1. 如博主所料,确实忘记第四步了。

        看了下面MUFF朋友的问题,我在主题的header.php找到了调用的菜单代码。

        但是主题是支持二个顶级菜单(一个顶部代码,一个我的菜单),不知道是不是这段代码

        因为不太代码代码,我直接替换了博主给的代码,但显示出来的效果不对。(正在使用的“我的菜单没变化,没有使用的顶部菜单却出现且出现变化)

        求博主再次指教,不胜感激。需要代码,可以提供,只是找不到博主的qq 😳

          1. 😛 一个一个按照上面的改下看看结果呢,你找到的代码包含

            就是对了,往末尾添加上我上面写的增加的代码即可。评论发代码用 【php】代码【/php】括号起来就可以发了(英文的方括号)。

            1. 感谢回复。
              我尝试了做以下修改
              【php】'top-menu','menu_id'=>'nav','container'=>'ul''walker' => new description_walker));}?>【/php】 结果是网站打不开

              如果博主有时间,帮我看下header.php我的qq在评论中,大小号随时可以联系我,。

  2. 按照博主给的方法,修改好后发现菜单上会直接提示数字+1 没有气泡,不知道是不是修改哪一步错了

    第4步我是在header.php中找到了 wp_nav_menu(array('theme_location' => 'nav', 在后面加上了 'walker' => new description_walker, 这样做对吗?

    还是因为css没设置的原因 😐

    1. 💡 +1 就好了 这个功能通常以气泡形式展示,所以叫它气泡,造型只是个 css 样式啦。css 气泡造型可以参考 @蛋疼君 的 css方案。注意里面有个 calss 需要你的菜单对应。基本放上去就会有个造型了,颜色自己改改可以。

          1. 最终的代码直接放进函数模板。而后调用是 步骤4 修改下模板中的菜单调用代码和函数模板里建立的模块匹配。

            使用方法:菜单的2和3的话。我用图像描述位置填入分类ID当作气泡对应的分类,如果不填的话怎么知道要显示哪个呢?以及开关怎么办?所以如果你不填则相当于关闭,填写了则显示对应分类的更新数量。

            你需要菜单中的某个项目,例如:电影,那么找到电影这个分类的ID,而后把ID填入图像描述里。

    1. 因为不认识代码,一行一行的试。终于试出来了。
      // seabye++
      if ( $item->description<=0 ) { $item_output .= $description; }
      else { $item_output .= '+'.get_this_week_post_count_by_category($item->description).''; }
      $item_output .= $args->link_after;
      // seabye++ end
      问题解决了 😥

      1. 但是有个问题
        我的主题菜单这么闭合标签
        $item_output .= ($args->has_children) ? ' ' : '';
        我需要把气泡加到之前.如果删除在气泡的代码里进行闭合.那么那些没有气泡的菜单就会出现没闭合标签的错误.....
        求指点

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.