为B2文章列表添加角标与自定义样式

一、文章角标功能

很多 B2 站点希望给文章列表中的部分文章添加”原创 / VIP / 推荐”等角标,增强视觉区分度。参考 7B2 社区的通用做法,通过 CMB2 给文章增加角标字段,再在列表模板中输出。

二、后台添加角标字段

在父主题(或子主题)的文章设置中加入以下代码(示例为网格模式):

Text
<?php
add_action( 'cmb2_admin_init', 'jitheme_post_badge' );
function jitheme_post_badge() {
    $cmb = new_cmb2_box( array(
        'id'           => 'jitheme_post_badge',
        'title'        => '文章角标',
        'object_types' => array( 'post' ),
    ) );
    $cmb->add_field( array(
        'name'    => '角标文字',
        'id'      => 'jitheme_badge',
        'type'    => 'text',
        'default' => '',
    ) );
}

三、列表模板中输出角标

在文章列表循环内(如网格模式的列表模板),输出角标:

Text
<?php
$badge = get_post_meta( get_the_ID(), 'jitheme_badge', true );
if ( $badge ) {
    echo '<span class="post-badge">' . esc_html( $badge ) . '</span>';
}

四、角标样式(CSS)

Text
.post-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #5c3a00;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

五、日期显示优化

若希望列表中的发布时间从”x年前 / x月前”改为”x年x月x日”格式,可找到列表模板中 b2timeago 相关代码移除该样式类,或直接使用 WordPress 原生日期函数:

Text
<?php echo get_the_date( 'Y年n月j日' ); ?>

六、注意事项

1. 列表模板因文章样式不同(post_7 / post_8 等)输出位置会有差异,请先确认当前使用的列表模板。

2. 角标字段为空时不要输出空标签,避免出现空白占位。

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
签到成功