文章目录
本文最后更新于 2022-10-14,已超过 365 天未更新,内容可能已失效。

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

第一步:

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

隐藏内容

此处内容需要权限查看

会员类型此资源价格
全站可免费
开通后可免费下载此资源
免费
计划书
此资源不在「计划书」分类范围
9.9星点
主题可免费
开通后可免费下载此分类资源
免费

第二步: 添加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;
        ?>

 

 

替换为

隐藏内容

此处内容需要权限查看

会员类型此资源价格
全站可免费
开通后可免费下载此资源
免费
计划书
此资源不在「计划书」分类范围
9.9星点
主题可免费
开通后可免费下载此分类资源
免费

第四步:设置方式

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

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

3、如果你没有打开更多的选项(我们所需的“图像描述”),点显示选项:

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

5、点击保存

 

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

总结

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

 

 

CC 许可协议
署名-非商业性使用-相同方式共享 4.0 国际 了解协议
文章链接:https://zptheme.com/2837.html
本文作者:子佩·来源:子佩工作室

除非注明,子佩工作室 文章均为原创,转载请以链接形式标明本文地址。

相关推荐

登录后即可发表评论

社交账号登录

全部评论 (2)