当前位置:首页>WP建站>Wordpress>B2文章目录网格布局显示文章内页图片数量

B2文章目录网格布局显示文章内页图片数量

这个功能主要是通过获取文章id,然后通过id来获取文章内容,最后进行正则统计,计算出图片数量。接下来就说一下怎么部署代码。

B2文章目录网格布局显示文章内页图片数量

一.前端代码判断部署

打开文件b2/Modules/Templates/Modules/Posts.php,仔细看此文件的注释,此文件主要就是文章列表下文章的布局方式,主要的五种布局方式都在此文件下,此处主要以网格模式做演示,如下图:

B2文章目录网格布局显示文章内页图片数量

代码:

            //文章图片数量判断
            $ict_post_id = get_post($v['id'],ARRAY_A);
            $ict_post_content = $ict_post_id["post_content"];
            preg_match_all("/<img.*?src[^\'\"]+[\'\"]([^\"\']+)[^>]+>/is",$ict_post_content,$result);
            $count=count($result[1]);
            if($count=='0'){
                $images_more='';  
            }else{
                $images_more='<span class="icttag">+'.$count.'</span>';
            }

接下来调用上方判断的结果

B2文章目录网格布局显示文章内页图片数量

说明:其他有图片的布局方式也是这样部署,当检测到文章中有图片时就会显示图片数量,如果文章中没有图片,列表调用的是后台上传的缩略图则不显示图片数量。

二.CSS部署

将如下的css放入到子主题根目录下的style.css之中即可。

/*
 *-------------------------------------------------------------------------------
 *列表图片数量统计
 *-------------------------------------------------------------------------------
*/
.post-module-thumb .icttag{
    position: absolute;
    top: 10px;
    color: #fff;
    right: 15px;
    font-size: 12px;
    background: #333333ab;
    z-index: 666;
    padding: 1px 6px;
    border-radius: 4px;
}

至此,完成所有代码部署,记得保存一下首页模块,强制刷新一下,即可看到效果。

给TA打赏
共{{data.count}}人
人已打赏

相关文章

WordpressWP建站

B2文章角标功能添加带后台

2022-8-5 11:32:48

b2-RoseWP建站

站点升级计划单

2022-10-3 0:47:36

{{yiyan[0].hitokoto}}
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索