上图主要想表达的是粉色气泡很萌=w=然而我们可以将其稍微变通,制作为位于菜单上的小气泡用于显示今日更新数量。就是这样一个看似简单的功能,可是让开发者绞尽脑汁,直到……这篇文章的诞生。
Meiri.Me博主用优雅的方式讲述了整段实现过程,如果你也想拥有一个如此高大上的样式,跟着他一起做吧~
思考过程:
故事的开始,是我想要这么一个功能。
接着通过搜索,得到了这篇文章:http://segmentfault.com/q/1010000000406084
function get_this_week_post_count_by_category($id){ $date_query = array( array( 'after'=>'1 week ago' ) ); $tax_query = array( array( 'taxonomy' => 'category', 'field' => 'id', 'terms' => $id ) ); $args = array( 'post_type' => 'post', 'post_status'=>'publish', 'tax_query' => $tax_query, 'date_query' => $date_query, 'no_found_rows' => true, 'suppress_filters' => true, 'fields'=>'ids', 'posts_per_page'=>-1 ); $query = new WP_Query( $args ); return $query->post_count; }
但是这无法解决问题,菜单会包含非“分类”的条目,而如果实现了全局,则就无法自定义的进行控制。(当然,一个原因也是我不会写)。
接着思考出的方案便是:手动将这个值放进去。
那么你需要重新制造一次“菜单”:
class description_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $prepend = '<strong>'; $append = '</strong>'; $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
wp_nav_menu( array( 'container' =>false, 'menu_class' => 'nav', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'walker' => new description_walker()) );
.nav{ height:50px; padding-left:13px; margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; } .nav a{ display:block; float:left; line-height:18px; outline:medium none; padding:2px 10px; text-decoration:none; width:95px; min-height: 35px; } .nav li a strong { display:block; font-size:14px; font-weight:normal; } .nav li a span { display:block; font-size:10px; line-height:14px; }
实现方法
文中涉及的大块代码均为 模板函数 (functions.php) 中的操作。
首先,给菜单建立一个新的结构:
// 注册菜单 register_nav_menus( array( 'primary' => __( '菜单' ), ) ); // 强化菜单 调用代码 (php) wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new description_walker ) ); (/php) // 强化菜单 结构 class description_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $prepend = '<span>'; $append = '</span>'; $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; // seabye++ if ( $item->description<=0 ) { $item_output .= $description; } else { $item_output .= '<span class="day">+'.get_this_week_post_count_by_category($item->description).'</span>'; } $item_output .= $args->link_after; // seabye++ end // $item_output .= $description.$args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
接着是计时数据的代码:
// 强化菜单 代表时间 // 一日 today // 一周 1 week ago // 一年 1 year ago function get_this_week_post_count_by_category($id) { $date_query = array( array( 'after' => 'today' ) ); $tax_query = array( array( 'taxonomy' => 'category', 'field' => 'id', 'terms' => $id ) ); $args = array( 'post_type' => 'post', 'post_status' => 'publish', 'tax_query' => $tax_query, 'date_query' => $date_query, 'no_found_rows' => true, 'suppress_filters' => true, 'fields' => 'ids', 'posts_per_page' => -1 ); $query = new WP_Query( $args ); return $query->post_count; }
调用这个菜单的代码:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new description_walker ) ); ?>
设置方式
首先,在后台进入【外观】-【菜单】:
如果你没有打开更多的选项(我们所需的“图像描述”),在这里:
在项目的“图像描述”中填写菜单中该分类的ID:
OK,大功告成。
总结
- 1. 你可能偶尔会需要是否要显示某分类,但不想重复的删去和查找分类的ID,你可以填写一个负数,例如:分类“1”,该成“-1”,它就不显示了,回头要启用就去掉“-”。
- 2. 如果你需要的不是“今日”更新数量,而是其它日期范围,在代码中的注释有说明,可以对其进行更改。
- 3. 实际上它也完成了另一项功能,如果你不要气泡,就拿去当作“让菜单条目显示描述”,不填分类ID,填文字就好了。
- 4. 实现这个功能可能有更好的方法,或已经实现或还没有出现;我不会写操作台,因此只能直接修改代码的方式,但作为在一个不只有“分类”的菜单中显示更新(并或并不是一个分类),以及单独的开关;以此比较取巧的拿了“图片描述”位置取值。
哎呦,这不是我很久以前回答过的问题么….居然被你从segmentfault翻出来了
我又来啊~~~~~~~~~~~~~~~~~~~~~~~~~~~
博主可真是爱折腾啊..
马上一试
WordPress 4.1 能用这个方法么
2014.09.05 进行了修订,因更新 WordPress 4.0 后产生的失效做修复,同时简化了步骤代码。现在你只需要 拷贝 2 3 步骤代码到 函数模板,并明确菜单在 header 中的位置,对其进行一点点修改即可。博主修订下内容吧
【他这个文章看不了啊】
空气猫是什么站点啊
最后一句是在哪里调用呢?是functions.php还是在菜单输出的地方
@a'f'r 当然是在菜单输出的地方。
遇到一问题,在服务器上面调试的时候并没有,但是在本地调试的时候出现了
Declaration of description_walker::start_el(&$output, $item, $depth, $args) should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0)
这个报错。
环境是php7.1然后wordpress4.91。
服务器的环境也是相同的
头皮发麻~