文章封面角标自定义标题功能

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

部署教程

1.Zibll主题设置>>全局&功能>>自定义代码>>自定义CSS样式

2.将下面代码添加进子比主题下的func.php文件内。

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

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

温馨提示

• 此代码教程涉及修改主题源文件，建议提前备份源文件再进行操作，避免出现不可逆的损失。
• 按上述流程操作完成后，建议清理cdn/浏览器缓存。（未开启缓存忽略即可）

版本二

以上图片就是我用新的网站做的单独的角标美化，就透明用的CSS来做的，其他都是用图片的，话不多说开始代码

如果喜欢的话就点一个赞，谢谢，然后搬运要留本文章链接，谢谢

部署教程

一共三个代码，一个两个PHP代码和一个CSS代码，我会讲的很仔细，跟着教程操作

第一修改文件这个文件目录在（子主题也可以）：/wp-content/themes/zibll/inc/options/metabox-options.php

进去文件之后，我们搜索关键词：“文章和页面seo”，大约在848行，下面的代码放到关键词的上面，如下图

第二个修改zib-posts-list.php这个文件目录在：/wp-content/themes/zibll/inc/functions/zib-posts-list.php

进去文件之后，我们搜索关键词：“置顶”，大约在511行，下面的代码放到关键词的下面，如下图

这是最后一个代码了，也就是样式，对于这次的角标我写的不是很好，因为有一些bug，不过这些bug不影响使用，这方面的代码我就不说了，直接放到：子比主题->>自定义CSS样式或者你引到php文件，都可以