WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 技术整合:WordPress 菜单显示今日更新数量 类似 bilibili 气泡

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

PCDotFan8年前

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

上图主要想表达的是粉色气泡很萌=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 ) ); ?>

 

 

设置方式

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

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

 

如果你没有打开更多的选项(我们所需的“图像描述”),在这里:

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

 

 

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

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

 

OK,大功告成。

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

 

总结

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

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

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (23)
再想想
  • 周良

    哎呦,这不是我很久以前回答过的问题么….居然被你从segmentfault翻出来了

    8年前
  • 福利盒子

    我又来啊~~~~~~~~~~~~~~~~~~~~~~~~~~~

    8年前
  • 同盟源 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还是在菜单输出的地方

    5年前
    • PCDotFan

      @a'f'r 当然是在菜单输出的地方。

      5年前
  • 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年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress调取文章第一张图片地址 支持外链
9年前
WordPress搜索结果中排除指定页面和文章
10年前
WordPress自定义个性化文章版权声明
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1