怎么来设置文章角标，一直都是很多小伙伴想要的，今天就来说一说这个功能怎么做吧，喜欢就加一个看看吧。
一.角标文字填写
此部分主要是构建在写文章的时候填写在文章图片上显示的文字和背景颜色。
如图：
打开路径b2/Modules/Settings/Post.php，查找”是否显示标签”，在后方加上如下代码：
//角标文字填写
$post_meta->add_field(array(
'name' => __('文章角标显示','b2'),
'id' => 'post_style_art',
'type' => 'textarea_code',
'options' => array( 'disable_codemirror' => true ),
'desc'=>__('请尽量填写两个字//不选择则不显示','b2'),
'default' => self::$default_settings['post_style_art'],
'attributes' => array('style' => 'width: auto; height: 50px;padding: 5px;border-radius: 2px;')
) );
//角标背景颜色
$post_meta->add_field(array(
'name' => __('文章角标背景颜色','b2'),
'id' => 'post_art_color',
'type' => 'colorpicker',
'options' => array( 'disable_codemirror' => true ),
'desc'=>__('选择你喜欢的颜色，它将成为角标的背景颜色','b2'),
) );
保存关闭此文件。
二.后台全局控制
此部分主要是构建全局后台，是否显示文章角标和默认角标，默认角标不填写，则没有设置角标的文章都不显示文章角标。
下载千度免费版子主题，
此部分代码可写在子主题后台上
$ict_branch->add_field(array(
'name' => __('文章角标显示','b2'),
'id' => 'ict_adv_jiaobiao',
'type' => 'select',
'default' => self::$default_settings['ict_adv_jiaobiao'],
'options' => array(
1 => __( '开启', 'b2' ),
0 => __( '关闭', 'b2' )
),
'description'=>'开启后，它将会显示在文章图片上方',
));
$ict_branch->add_field(array(
'name' => __('文章角标默认值','b2'),
'id' => 'ict_adv_jiaobiao_write',
'type' => 'text',
'default' => self::$default_settings['ict_adv_jiaobiao_write'],
'desc'=>__('开启后，它将会显示在文章图片上方。','b2')
));
这一部分可以参照如下两篇文章来做
三.前端显示设置
打开文件b2/Modules/Templates/Modules/Posts.php，仔细看此文件的注释，此文件主要就是文章列表下文章的布局方式，主要的五种布局方式都在此文件下，此处主要以网格模式做演示，如下图：
将如下的代码都放置与横线标注的中间，保存文件即可。
//文章角标
$page_jiaobiao_open =b2_get_option('template_Branch','ict_adv_jiaobiao',true);
$page_jiaobiao_default =b2_get_option('template_Branch','ict_adv_jiaobiao_write',true);
$ymetaValue = apply_filters('b2_post_1_get_type',get_post_meta($v['id'],'post_style_art',true));
$ymetaValue_color=apply_filters('b2_post_1_get_type',get_post_meta($v['id'],'post_art_color',true));
$tab_tian = $page_jiaobiao_default ? '<div class="tian yue" style="background-color: '.$ymetaValue_color.';">'.$page_jiaobiao_default.'</div>' :'';
$tab_tians='';
if($page_jiaobiao_open){
if($ymetaValue){
$tab_tians = '<div class="tian yue" style="background-color: '.$ymetaValue_color.';">'.$ymetaValue.'</div>';
}else{
$tab_tians = $tab_tian;
}
}
上方中的代码，需要注意开关和全局默认角标获取，此处千万不要随便复制，要根据你构建后台目录来获取。仔细看教程。
接下来将上方的判断代码结果注入前端显示的地方上，如下图：
至此完成所有的后台构建。
四.CSS写入
将如下的代码放入到子主题根目录下的style.css内，并保存，同时清除所有缓存，强制刷新一下，在文章中或是全局设置出设置一下即可看到效果。
/*
* ------------------------------------------------------------------------------
* 文章角标
* ------------------------------------------------------------------------------
*/
.post-module-thumb .tian {
position: absolute;
border: 2px solid #FFFFFF;
border-radius: 12px;
top: 10px;
left: 10px;
z-index: 1;
font-size: 12px;
color: #f9f9f9;
padding: 0 8px;
line-height: 20px;
-webkit-box-align: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
text-align: center;
display: flex;
}
.post-module-thumb .tian.yue {
background-color: #ff8936;
background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
box-shadow: 0 0px 0px 1.2px #fff;
}
CSS取自致美化：https://zhutix.com/
原创教程撰写不易，搬运请保留出处，感谢小伙伴们的支持。
好东西，有时间转载一下