当前位置:首页>WP建站>Wordpress>B2文章角标功能添加带后台

B2文章角标功能添加带后台

怎么来设置文章角标,一直都是很多小伙伴想要的,今天就来说一说这个功能怎么做吧,喜欢就加一个看看吧。

一.角标文字填写

此部分主要是构建在写文章的时候填写在文章图片上显示的文字和背景颜色。

如图:

B2文章角标功能添加带后台

打开路径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,仔细看此文件的注释,此文件主要就是文章列表下文章的布局方式,主要的五种布局方式都在此文件下,此处主要以网格模式做演示,如下图:

B2文章角标功能添加带后台

将如下的代码都放置与横线标注的中间,保存文件即可。

            //文章角标
            $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;                
                }
            }

 

上方中的代码,需要注意开关和全局默认角标获取,此处千万不要随便复制,要根据你构建后台目录来获取。仔细看教程。

接下来将上方的判断代码结果注入前端显示的地方上,如下图:

B2文章角标功能添加带后台

至此完成所有的后台构建。

四.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/

原创教程撰写不易,搬运请保留出处,感谢小伙伴们的支持。

给TA打赏
共{{data.count}}人
人已打赏

相关文章

WordpressWP建站

增加B2主题顶部消息铃消息数值,同时取消消息闪烁特效

2022-7-20 20:45:24

WordpressWP建站

B2文章目录网格布局显示文章内页图片数量

2022-8-5 17:12:09

{{yiyan[0].hitokoto}}
3 条回复 A文章作者 M管理员
  1. 1273263627

    为啥我设置了不行啊

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索