在 WordPress 菜单显示指定时间文章更新数量 类似 bilibili 气泡

首先需要重新制造一次“菜单”：

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;
}

Improve your WordPress Navigation Menu Output

以上是大咖的重制办法,下面才是正文:

1. 首先，注册一个菜单：

// 注册菜单
register_nav_menus( array(
    'primary' => __( '菜单' ),
) );

2. 而后，给菜单建立一个新的结构：

// 强化菜单 调用代码 (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 );
    }
}

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

// 强化菜单 代表时间
// 一日 today
// 一周 1 week ago
// 一年 1 year ago
// 千年 1000 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;
}

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

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

5.设置下wordpress的菜单在项目的“图像描述”中填写菜单中该分类的ID

本文来自:http://meiri.me/9528.html
感谢作者的辛勤付出!