您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

WordPress导航菜单显示每日文章更新数量

开拓者 2018-06-25 Wordpress教程 2323 已收录 本文共3622个字,预计阅读需要10分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

如果你的WordPress主题网站每天都更新大量的文章,而主页列表又不是类似于教程网那种小标题的列表,用户看上去就不知道每天到底更新了没有,更新了多少,这里我们给WordPress条件一个每日文章更新数量显示的功能,可以显示在导航栏或者其他地方,提示访客每日更新的内容。

WordPress显示每日文章更新数量

这里给出php函数和调用代码,以导航栏为例,首先将下面代码加入到主题模板函数 functions.php 中:

  1. // 注册菜单
  2. register_nav_menus( array(
  3.     'primary' => __( '我的菜单' ),
  4. ) );
  5. // 强化菜单 调用代码 (php) wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new description_walker ) ); (/php)
  6. // 强化菜单 结构
  7. class description_walker extends Walker_Nav_Menu
  8. {
  9.     function start_el(&$output$item$depth$args)
  10.     {
  11.         global $wp_query;
  12.         $indent = ( $depth ) ? str_repeat"t"$depth ) : '';
  13.         $class_names = $value = '';
  14.         $classes = emptyempty$item->classes ) ? array() : (array$item->classes;
  15.         $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter$classes ), $item ) );
  16.         $class_names = ' class="'. esc_attr( $class_names ) . '"';
  17.         $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
  18.         $attributes  = ! emptyempty$item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
  19.         $attributes .= ! emptyempty$item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
  20.         $attributes .= ! emptyempty$item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
  21.         $attributes .= ! emptyempty$item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
  22.         $prepend = '<span>';
  23.         $append = '</span>';
  24.         $description  = ! emptyempty$item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
  25.         if($depth != 0)
  26.         {
  27.             $description = $append = $prepend = "";
  28.         }
  29.         $item_output = $args->before;
  30.         $item_output .= '<a'. $attributes .'>';
  31.         $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
  32.         // seabye++
  33.         if ( $item->description<=0 ) { $item_output .= $description; }
  34.             else { $item_output .= '<span class="day">+'.get_this_week_post_count_by_category($item->description).'</span>'; }
  35.         $item_output .= $args->link_after;
  36.         // seabye++ end
  37.         // $item_output .= $description.$args->link_after;
  38.         $item_output .= '</a>';
  39.         $item_output .= $args->after;
  40.         $output .= apply_filters( 'walker_nav_menu_start_el', $item_output$item$depth$args );
  41.     }
  42. }
  43. // 强化菜单 代表时间
  44. // 一日 today
  45. // 一周 1 week ago
  46. // 一年 1 year ago
  47. // 千年 1000 year ago
  48. function get_this_week_post_count_by_category($id) {
  49.     $date_query = array(
  50.         array(
  51.             'after' => 'today'
  52.             )
  53.         );
  54.     $tax_query = array(
  55.         array(
  56.             'taxonomy' => 'category',
  57.                 'field' => 'id',
  58.                 'terms' => $id
  59.             )
  60.         );
  61.     $args = array(
  62.         'post_type' => 'post',
  63.         'post_status' => 'publish',
  64.         'tax_query' => $tax_query,
  65.         'date_query' => $date_query,
  66.         'no_found_rows' => true,
  67.         'suppress_filters' => true,
  68.         'fields' => 'ids',
  69.         'posts_per_page' => -1
  70.         );
  71.     $query = new WP_Query( $args );
  72.     return $query->post_count;
  73. }

如何调用代码如下,放在想要显示的页面位置即可。

  1. <?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new description_walker ) ); ?>  

如果要条件在菜单导航里面,红色加粗为需要添加的内容。

菜单 – 显示选项,勾出 “图像描述”,在项目的 “图像描述” 中添加需要显示更新数目的分类 id。

WordPress导航菜单显示每日文章更新数量

这里也提供以下默认美化样式,有所追求的可以奇迹修改。

  1. .day {
  2.     position:absolute;
  3.     top:-10px;
  4.     display:block;
  5.     left:50%;
  6.     color:#fff;
  7.     border-radius:4px;
  8.     line-height:14px;
  9.     padding:1px 5px 1px 5px;
  10.     text-align:center;
  11.     font-family:Calibri;
  12.     background:#f489ad;
  13.     font-size:12px;
  14.     min-width:18px;
  15. }
温馨提示:本文最后更新于2019年3月19日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!

上一篇:

下一篇:

WordPress导航菜单显示每日文章更新数量:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
';
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。