子比主题美化 – 文章角标（初一原创-筱信日记站长二改）

子比主题美化 – 文章角标（初一原创-筱信日记站长二改）

1487

前言
这是基于初一写的角标代码改的，区别在与初一的是调用子比内置的可视化颜色选取，筱信日记站长的是自定义颜色代码，各有千秋吧。主要功能是实现文章列表封面的自定义文字声明。

  • 章发布时可自行选择内容与颜色，不填写内容则不显示，在此基础上我把渐变颜色可视化了一下，但是搞不来选定颜色。
  • 配置教程
    CSS代码
/*角标css*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  font-size:1rem;
  line-height:1;
  color:#fff;
  background:var(--theme-color);
  border-radius:6px;
}
a.item-category-app {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#3783ff,#3783ffbf);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-b {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#ff5631,#ff5631ba);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-c {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#464242,#464242ad);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
span.bottom-l {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.n-collect-item-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background:var(--theme-color);
  border-radius:0 0 var(--main-radius);
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  justify-content:space-between;
  padding:0 18px;
  z-index:5;
  justify-content:center;
}
.jiaobiao2 {
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:var(--theme-color);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}

将下面代码添加进子比主题下的func.php文件内,若没有则创建一个,如果是新建func.php文件夹记得复制<?php 去掉前面两竖线。

CSF::createMetabox('Mario', array(
    'title'     => '附加选项',
    'post_type' => array('post', 'plate', 'forum_post'),
    'context'   => 'advanced',
    'data_type' => 'unserialize',
));

CSF::createSection('Mario', array(
    'fields' => array(
        array(
            'title'   => __('开启文章角标'),
            'id'      => 'Mario_edit',
            'type'    => 'switcher',
            'label'   => '角标',
            'desc'   => '填哪个显示哪个，不想要的留空就行',
            'default' => false
        ),
        array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('左上角标内容'),  
    'id'      => 'right_text',  
    'type'    => 'text',  
    'default' => '左角标',  
),  

array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('字体颜色'),  
    'id'      => 'right_text_color',  
    'type'    => 'color',  
    'default' => '#ffffff', // 假设默认字体颜色是白色  
    'desc'    => '选择左上角标内容的字体颜色',  
                                            
),
array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('渐变背景颜色'),  
    'id'      => 'right_color',  
    'type'    => 'textarea',  
    'default' => 'linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);',  
    'desc'    => '请输入CSS渐变颜色值，例如：<br>'.
        '<br>黄色  linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);' .
        '<br><div class="color-preview" style="background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); width: 100px; height: 50px;"></div>' .
        '<br>红色  linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);' .
        '<br><div class="color-preview" style="background: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%); width: 100px; height: 50px;"></div>' .
        '<br>蓝色  linear-gradient(135deg, #59c3fb 10%, #268df7 100%);' .
        '<br><div class="color-preview" style="background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); width: 100px; height: 50px;"></div>' .
        '<br>绿色  linear-gradient(135deg, #60e464 10%, #5cb85b 100%);' .
        '<br><div class="color-preview" style="background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); width: 100px; height: 50px;"></div>' .
        '<br>青色  linear-gradient(140deg, #039ab3 10%, #58dbcf 90%);' .
        '<br><div class="color-preview" style="background: linear-gradient(140deg, #039ab3 10%, #58dbcf 90%); width: 100px; height: 50px;"></div>',
    
),



        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('右上角标内容'),
            'id'      => 'left_text',
            'type'    => 'text',
            'default' => '右角标',
        ),
        

array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('字体颜色'),  
    'id'      => 'left_text_color',  
    'type'    => 'color',  
    'default' => '#ffffff', // 假设默认字体颜色是白色  
    'desc'    => '选择左上角标内容的字体颜色',  
),
   array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('渐变背景颜色'),  
    'id'      => 'left_color',  
    'type'    => 'textarea', // 使用textarea来允许多行输入  
    'default' => 'linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);', // 提供一个默认的渐变颜色值  
    'desc'    => '请输入CSS渐变颜色值，例如：<br>黄色  linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
                                             <br>红色  linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
                                             <br>蓝色  linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
                                             <br>绿色  linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
                                             <br>青色  linear-gradient(140deg, #039ab3 10%, #58dbcf 90%);',  
),

        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('封面底部内容'),
            'id'      => 'bottom_text',
            'type'    => 'text',
            'default' => '封面底部',
        ),
        
array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('字体颜色'),  
    'id'      => 'bottom_text_color',  
    'type'    => 'color',  
    'default' => '#ffffff', // 假设默认字体颜色是白色  
    'desc'    => '选择左上角标内容的字体颜色',  
),
array(  
    'dependency' => array('Mario_edit', '!=', ''),  
    'title'   => __('渐变背景颜色'),  
    'id'      => 'bottom_color',  
    'type'    => 'textarea', // 使用textarea来允许多行输入  
    'default' => 'linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);', // 提供一个默认的渐变颜色值  
    'desc'    => '请输入CSS渐变颜色值，例如：<br>黄色  linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
                                             <br>红色  linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
                                             <br>蓝色  linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
                                             <br>绿色  linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
                                             <br>青色  linear-gradient(140deg, #039ab3 10%, #58dbcf 90%);',  
),

    ),
));

打开子比主题文件夹下的inc/functions/zib-post-list.php文件，搜索 置顶 添加以下代码

//添加在这个代码的下面一行
 if (is_sticky()) {
        $sticky = '<badge class="img-badge left jb-red">置顶</badge>';
    } else {
        $sticky = '';
    }
//在这加

新增代码如下

//列表图片封面右上角标
        if (get_post_meta($post->ID, 'Mario_edit', true)){
        $right = get_post_meta($post->ID, 'right_text', true);
        $right_color = get_post_meta($post->ID, 'right_color', true);
        $bottom = get_post_meta($post->ID, 'bottom_text', true);
        $bottom_color = get_post_meta($post->ID, 'bottom_color', true);
        $left_text = get_post_meta($post->ID, 'left_text', true);
        $left_color = get_post_meta($post->ID, 'left_color', true);

        if ($left_text) {
            $sticky = '<badge class="jiaobiao2" style="background:'.$left_color.';">'.$left_text.'</badge>';
        } else {
            $sticky = '';
        }
        if ($right){
            $sticky .= '<a class="item-category" style="background:'.$right_color.';"> '.$right.' </a>';
        }
        if ($bottom){
            $sticky .= '<div class="n-collect-item-bottom" style="background:'.$bottom_color.';"><span class="bottom-l">'.$bottom.'</span></div>';
        }
    }

 

© 版权声明
免责声明 ◎本站所发布的全部内容源于互联网（包括源代码、软件、学习资料等）本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则一切后果请用户自负。宝藏云创对所提供下载的软件和程序代码不拥有任何权利，其版权归该软件和程序代码的合法拥有者所有，网页信息来自网络收集整理，版权争议与本站无关。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如本站不慎侵犯您的版权请联系我们，我们将及时处理，并撤下相关内容！敬请谅解! 侵删请致信E-mail：2754908705@qq.com
◎云创项目库作为信息共享平台我们无法对信息的真实性及准确性做出判断，风险请各位自行甄别。我们不承担任何财产损失和法律责任，若您不同意该提示，请关闭网页且不要在本站拓展任何合作，否则在使用过程中造成的任何损失由您个人承担。本站发布的所有资源不代表本站赞同其观点和对其完整性、真实性、可用性负责 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
THE END
子比美化