子比主题美化 – 文章封面角标美化（可单独设置）

青木

2个月前更新

142150

免费领流量卡

流量卡包邮

本站同款主题

广告招租

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果。

文章发布时可在编辑页底部自行配置输入内容以及颜色，不填写内容则不显示。

部署教程

1.Zibll主题设置>>全局&功能>>自定义代码>>自定义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;
}

2.将下面代码添加进子比主题下的func.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' => '支持M1/M2',
        ),
        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('背景颜色'),
            'id'      => 'right_color',
            'type'    => 'color',
            'default' => '#121212',
            'class'    =>'compact',
        ),
        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('右上角标内容'),
            'id'      => 'left_text',
            'type'    => 'text',
            'default' => '实测',
        ),
        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('背景颜色'),
            'id'      => 'left_color',
            'type'    => 'color',
            'default' => '#121212',
            'class'    =>'compact',
        ),
        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('封面底部内容'),
            'id'      => 'bottom_text',
            'type'    => 'text',
            'default' => '支持Intel&M1&M2运行',
        ),
        array(
            'dependency' => array('Mario_edit', '!=', ''),
            'title'   => __('背景颜色'),
            'id'      => 'bottom_color',
            'type'    => 'color',
            'default' => '#121212',
            'class'    =>'compact',
        ),

    ),
));

3.打开子比主题文件路径：/inc/functions/zib-post-list.php，在515行如图添加下方代码。

图片[1] - 子比主题美化 – 文章封面角标美化（可单独设置） - 狐狸资源网

//列表图片封面右上角标
        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>';
        }
    }