ripro主题美化–WordPress 菜单显示今日更新数量

制作为位于菜单上的小气泡用于显示今日更新数量。就是这样一个看似简单的功能，可是我绞尽脑汁，直到……最近才倒腾出来。

第一步：

模板函数 (functions.php) 中的添加如下代码操作。

第二步： 添加CSS

.day {
    display: inline-block;
    transform: translateY(-12px);
    font-size: .75rem;
    letter-spacing: 0.05em;
    background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: .15rem .275rem;
    line-height: 1;
    font-weight: bold;
}
.day{
    animation:bob 2s ease infinite;
}

.animate-fadeInUp{
    animation:fadeInUp 0.3s ease;
}

@keyframes bob{
    0%{
        transform: translateY(-12px)
    }
    50%{
        transform: translateY(-17px)
    }
    100%{
        transform: translateY(-12px)
    }
}

@-webkit-keyframes fadeInUp{
    0%{opacity:0;
        -webkit-transform:translateY(20px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

第三步：替换菜单

文件parts的navbar.php的以下代码

<?php 
        ///////////S CACHE ////////////////
      if (CaoCache::is()) {
          $_the_cache_key = 'ripro_all_navbar_menu';
          $_the_cache_data = CaoCache::get($_the_cache_key);
          if(false === $_the_cache_data ){
              $_the_cache_data = wp_nav_menu( array(
              'container' => false,
              'fallback_cb' => 'Cao_Walker_Nav_Menu::fallback',
              'menu_class' => 'nav-list u-plain-list',
              'theme_location' => 'menu-1',
              'echo' => false,
              'walker' => new Cao_Walker_Nav_Menu( true ),
            ) );  //缓存数据
              CaoCache::set($_the_cache_key,$_the_cache_data);
          }
          $ripro_nav = $_the_cache_data;
      }else{
          $ripro_nav =  wp_nav_menu( array(
              'container' => false,
              'fallback_cb' => 'Cao_Walker_Nav_Menu::fallback',
              'menu_class' => 'nav-list u-plain-list',
              'theme_location' => 'menu-1',
              'echo' => false,
              'walker' => new Cao_Walker_Nav_Menu( true ),
         ) ); //原始输出
      }
      ///////////S CACHE ////////////////
        echo $ripro_nav;
        ?>

替换为

第四步：设置方式

1、首先，在后台进入【外观】-【菜单】：

2、菜单设置–显示位置  更新菜单打勾~~

3、如果你没有打开更多的选项（我们所需的“图像描述”），点显示选项：

4、在项目的“图像描述”中填写菜单中该分类的ID：

5、点击保存

OK，大功告成。最后注意原主题的menu-item-mega就没有用了

总结

1. 你可能偶尔会需要是否要显示某分类，但不想重复的删去和查找分类的ID，你可以填写一个负数，例如：分类“1”，该成“-1”，它就不显示了，回头要启用就去掉“-”。
2. 如果你需要的不是“今日”更新数量，而是其它日期范围，在代码中的注释有说明，可以对其进行更改。
3. 实际上它也完成了另一项功能，如果你不要气泡，就拿去当作“让菜单条目显示描述”，不填分类ID，填文字就好了。
4. 实现这个功能可能有更好的方法，或已经实现或还没有出现；我不会写操作台，因此只能直接修改代码的方式，但作为在一个不只有“分类”的菜单中显示更新（并或并不是一个分类），以及单独的开关；以此比较取巧的拿了“图片描述”位置取值。