WordPress教程B2主题美化给文章添加彩色角标

2022-08-01 0 896
WordPress教程B2主题美化给文章添加彩色角标

教程来源于互联网,感谢原作者的分享。保存自用一下懒得以后更新再去找这个教程了

美化教程

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');
// 文章添加角标结束

 

WordPress教程B2主题美化给文章添加彩色角标

2.修改b2主题目录下 b2/Modules/Templates/Modules/Posts.php 文件,在第一个$hove_avatar前添加以下代码:

  1. $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>';}
    }
    

     

WordPress教程B2主题美化给文章添加彩色角标

3.在第二步同文件中,大概167行的文章列表中添加以下代码:

'.$meta_jiaobiao_html.'

 

WordPress教程B2主题美化给文章添加彩色角标

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.大功告成,现在在后台文章编辑中就能看到列表角标设置选择了。

这个教程仅是给网格列表添加了角标,其他列表也可以使用此方法添加。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 WordPress教程 WordPress教程B2主题美化给文章添加彩色角标 https://www.jike1995.com/38258.html

不懂你就问我撒,但是不要说我给的东西不行。-www.jike1995.com

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务