B2主题美化：纯代码实现文章列表封面显示文章内图片数量

在文章封面的右上角调用文章内图片数量，可以设置文章内大于几张图片数量才显示。

效果演示

打开/wp-content/themes/b2或者你的子主题/Modules/Templates/Modules/Posts.php 查找：//文章列表

在上面加入以下代码

$image_count = get_image_count($v['id']);
if ($image_count > 3) { //数字代表大于几张图显示
  $image_count_html = '<div class="image-count"><i class="b2font b2-image-fill"></i>共 ' . $image_count . ' 张</div>';
} else {
  $image_count_html = '';
}

下面查找’.$pay_type.’ 下面添加

'.$image_count_html.'

打开主题根目录functions.php 最下面加入下列代码

//获取图片数量
function get_image_count($post_id) {
  $content = get_post_field('post_content', $post_id);
  preg_match_all('/<img[^>]+>/i', $content, $matches);
  return count($matches[0]);
}

把下面的CSS保存到你主题的style.css

.image-count {
    position: absolute;
    height: 24px;
    line-height: 24px;
    right: 10px;
    top: 9px;
    background: rgba(0,0,0,.4);
    border-radius: 12px;
    padding: 0 8px;
    font-size: 12px;
    color: #FFF;
}
.image-count i.b2-image-fill {
    font-size: 14px;
    padding-right: 5px;
}