首页 › WordPress 教程 › 技术整合：WordPress 菜单显示今日更新数量类似 bilibili 气泡

技术整合：WordPress 菜单显示今日更新数量类似 bilibili 气泡

上图主要想表达的是粉色气泡很萌=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. 实现这个功能可能有更好的方法，或已经实现或还没有出现；我不会写操作台，因此只能直接修改代码的方式，但作为在一个不只有“分类”的菜单中显示更新（并或并不是一个分类），以及单独的开关；以此比较取巧的拿了“图片描述”位置取值。

#程序猿的逆袭

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题，请至 WP酷的百度网盘（提取码: 5rbm）自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便，敬请谅解！

周良

哎呦，这不是我很久以前回答过的问题么….居然被你从segmentfault翻出来了
9年前
福利盒子

我又来啊~~~~~~~~~~~~~~~~~~~~~~~~~~~
9年前
同盟源 http://tmy123.com/

博主可真是爱折腾啊..
8年前
同盟源 http://tmy123.com/

马上一试
8年前
DAda

WordPress 4.1 能用这个方法么
8年前
DAda

2014.09.05 进行了修订，因更新 WordPress 4.0 后产生的失效做修复，同时简化了步骤代码。现在你只需要拷贝 2 3 步骤代码到函数模板，并明确菜单在 header 中的位置，对其进行一点点修改即可。博主修订下内容吧
【他这个文章看不了啊】
8年前
以泉印梨花

空气猫是什么站点啊
8年前
a'f'r

最后一句是在哪里调用呢？是functions.php还是在菜单输出的地方
6年前
- PCDotFan
  
  @a'f'r 当然是在菜单输出的地方。
  6年前
agg

遇到一问题，在服务器上面调试的时候并没有，但是在本地调试的时候出现了
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。
服务器的环境也是相同的
5年前
月色

头皮发麻~
5年前

技术整合：WordPress 菜单显示今日更新数量 类似 bilibili 气泡

思考过程：

实现方法

设置方式

总结

技术整合：WordPress 菜单显示今日更新数量类似 bilibili 气泡