最新WordPress网站B2主题美化之文章彩色角标

由优渥设计@老白转载自网络,适用于WordPress网站B2主题的美化教程,其他主题自测。此方式只改了,其中一个文章列表样式(网格模式),其他的文章列表样式可按照同方法即可。

1.美化演示效果

WordPress网站B2主题美化之文章彩色角标

2.B2主题实现教程

①.打开B2主题文件:/b2/Modules/Settings/Post.php  464处加入以下代码:

 // 文章添加角标开始-https://www.uwwuww.com
    $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')
    ),
    'default'=>0,
    'desc'=> __('支持 HTML,尽量短小才好看。','b2')
    ));
    add_filter('post_side_settings', 'wporg_custom');
    // 文章添加角标结束-https://www.uwwuww.com

(转载自onecad,原文地址:https://www.onecad.cn/237/,感谢站长的分享)

WordPress网站B2主题美化之文章彩色角标

②.刷新缓存,在后台文章写作页面,即可看到角标设置项

WordPress网站B2主题美化之文章彩色角标

③.在文章样式列表文件中b2/Modules/Templates/Modules/Posts.php 108行下方增加:

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

④.然后再同文件的第180行下方增加调用

'.$meta_jiaobiao_html.'
WordPress网站B2主题美化之文章彩色角标
WordPress网站B2主题美化之文章彩色角标

⑤下面就是CSS了,将下方的CSS代码复制到子主题style.css文件中即可

/*角标CSS-https://www.uwwuww.com*/
    .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: 100;
    }
    .yellow {background-color: #ff6000;}
    .huodong{background:#0693e3}
    .remen{background:#fcb900}
    .jingping{background:#cf2e2e}
    .guanggao{background:#00d084}
    .tuijain{background:#ff6900}
    .yuliu{background:#0693e3}

相关的美化教程大家点击分类和文末标签阅读吧!

要和本站一样的请回复

Adobe如果没了?听说 Photo RAW 2022 for Mac(图像处理软件)可以做到完美替代PS和LR?

给TA赞助
共{{data.count}}人
人已赞助
WP教程

宝塔面板开启Nginx fastcgi_cache缓存为WordPress提速

2022-4-15 19:01:19

WP教程

最新纯代码永久免费无须server酱个人微信接收b2订单和评论信息

2022-4-16 11:39:03

免责声明 1:本站的课程与素材,都是电子版课件,非实物光盘,课件由百度网盘发送.(百度网盘下载教程)2:本站所有涉及视频及素材,软件等由互联网搜索收集而来,本站不拥有此类资料的版权。3:本站所有视频,素材及软件不加密、不限时、可永久观看或使用!禁止二次销售,否则因此引起的一切问题与本站无关。4:本站所有的资源均为免费提供,提供资料的目的是让大家学习和交流,所收取的相关费用非资料销售费用,而是资料收集整理手工费。5:无意侵害您的权益,请发送邮件至 590173@qq.com 或点击左侧 私信:站长反馈,我们将尽快处理。
4 条回复 A文章作者 M管理员
  1. 好

    不错

  2. 优渥设计@老白?

  3. 可乐

    测试下下

个人中心
今日签到
有新私信 私信列表
搜索