B2是一款十分优秀的wordpress网站程序,此次教程是美化文章图片角标,增加了阅读体验,大家可以保藏以防后期需求找不到。
[Gbuy id=’1703′]
美化教程
1.修正b2主题目录下/b2/Modules/Settings/Post.php文件,在$gg_meta = new_cmb2_box之前增加:
// 文章增加角标开端
$post_meta = new_cmb2_box(array(
'id' => 'b2_post_onecad_jb',
'title' => __( '文章角标', 'b2' ),
'object_types' => array('post','document','page'),
'context' => 'normal',
'priority' => 'high',
'show_names' => true
));
$post_meta->add_field(array(
'name' => sprintf(__('列表需求显示角标','b2'),$g_name),
'id' => 'b2_post_onecad_lb',
'type' => 'select',
'options'=>array(
0=>__('推荐','b2'),
1=>__('VIP','b2'),
2=>__('原创','b2'),
3=>__('免费','b2'),
4=>__('积分','b2')
),
'default'=>0,
'desc'=> __('支持 HTML,尽量矮小才好看。','b2')
));
add_filter('post_side_settings', 'wporg_custom');
// 文章增加角标结束
[Gbuy id=’1704′]
2.修正b2主题目录下b2/Modules/Templates/Modules/Posts.php文件,在第一个$hove_avatar前增加以下代码:
$index_jiaobiao =get_option('b2_one_main_tab2')['index_jiaobiao'];
if($index_jiaobiao == '1'){
$b2_post_onecad_lb= get_post_meta($v['id'],'b2_post_onecad_lb',true);
if($b2_post_onecad_lb == ''){
$meta_jiaobiao_html ='<span>'.$b2_post_onecad_lb.'</span>';}
else if($b2_post_onecad_lb ==0){
$meta_jiaobiao_html ='<span class="tipss huodong b2-radius">推荐</span>';}
else if($b2_post_onecad_lb ==1){
$meta_jiaobiao_html = '<span class="tipss remen b2-radius">VIP</span>';}
else if($b2_post_onecad_lb ==2){
$meta_jiaobiao_html ='<span class="tipss jingping b2-radius">原创</span>';}
else if($b2_post_onecad_lb ==3){
$meta_jiaobiao_html ='<span class="tipss tuijain b2-radius">免费</span>';}
}
[Gbuy id=’1705′]
3.在第二步同文件中,D A q 5 y大约167行的文章列表中增加以下代码:
'.$meta_jiaobiao_html.'
[Gbuy id=’1706′]
4.在主题目录或子主题目录的style.css中增加款式代码:
/*角标款式*/
.tipss {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
width: 50px;
height: 20px;
color: #fff;
line-height: 20px;
text-align: center;
font-size: 13px;
z-index: 5;
}
.yellow {background-color: #ff6000;}
.huodong{background:#00d084}
.remen{background:#fcb900}
.jingping{background:#cf2e2e}
.guanggao{background:#00d084}
.tuijain{background:#ff6900}
.yuliu{background:#0693e3}
5.到现在已经全部完成了,现在在后台文章编辑中就能看到列表角标设置挑选了。
这个教程仅是给网格列表增加了角标,& T D =其他列表也可以使用此办法增加。
文章标题:B2主题美化文章添加五颜六色角标教程
文章链接:https://www.aqzyl.cn/1702.html
更新时间:2022年09月21日
本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:779451579@qq.comm我们将第一时间处理!
资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
所有资源仅限于参考和学习,版权归原作者所有,更多请阅读艾奇资源网络服务协议。