这篇文章就是我给大家搭建了一个新网站测试的，然后就是我给里面加了几个角标的样式，不是调用的颜色，我感觉颜色有点单调，我直接用的图片做的角标样式，如果搬运请留一下赖胖站长本篇文章的链接，都是作为站长的，希望能够理解一下，话不多说直接开始

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

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

代码部署

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

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

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

if (class_exists('CSF')) {
    CSF::createMetabox('tf', array(
        'title'     => '文章封面自定义标识',
        'post_type' => array('post', 'page', 'plate', 'forum_post'),
        'context'   => 'advanced',
        'data_type' => 'unserialize',
    ));

    CSF::createSection('tf', array(
        'fields' => array(
            array(
                'title'   => __('封面标识'),
                'id'      => 'mh_text',
                'type'    => 'switcher',
                'label'   => '',
                'default' => false
            ),
            // 左上角标样式
            array(
                'dependency' => array('mh_text', '!=', ''),
                'id'         => 'left_style',
                'title'      => '左上角标样式',
                'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
                'default'    => 'jb-purple',
                'type'       => 'palette',
                'options'    => array(
                    'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
                    'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
                    'jb-tran'   => array('linear-gradient(25deg, rgba(234,184,105,0) 10%, rgba(251,236,212,0) 60%, rgba(255,224,174,0) 100%); width:40px; height:40px;'),
                    'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
                    'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
                    'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
                    'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),

                ),
                'attributes' => array(
                    'class' => 'custom-palette'
                ),
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-purple'),
                'title'      => __(' '),
                'subtitle'   => '左上角标内容',
                'id'         => 'left_purple',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-blue'),
                'title'      => __(' '),
                'subtitle'   => '左上角标内容',
                'id'         => 'left_blue',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-tran'),
                'title'      => __(' '),
                'subtitle'   => '左上透明角标',
                'id'         => 'left_tran',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-red'),
                'title'      => __(' '),
                'subtitle'   => '左上红色角标',
                'id'         => 'left_red',
                'type'       => 'text',
                'default'    => '',
            ),
             array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-green'),
                'title'      => __(' '),
                'subtitle'   => '左上绿色角标',
                'id'         => 'left_green',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-yellow'),
                'title'      => __(' '),
                'subtitle'   => '左上黄色角标',
                'id'         => 'left_yellow',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|left_style', '!=|==', '|jb-black'),
                'title'      => __(' '),
                'subtitle'   => '左上黑色角标',
                'id'         => 'left_black',
                'type'       => 'text',
                'default'    => '',
            ),
            // 右上角标样式
            array(
                'dependency' => array('mh_text', '!=', ''),
                'id'         => 'right_style',
                'title'      => '右上角标样式',
                'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
                'default'    => 'jb-purple',
                'type'       => 'palette',
                'options'    => array(
                    'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
                    'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
                    'jb-tran'   => array('linear-gradient(25deg, rgba(234,184,105,0) 10%, rgba(251,236,212,0) 60%, rgba(255,224,174,0) 100%); width:40px; height:40px;'),
                    'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
                    'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
                    'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
                    'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),

                ),
                'attributes' => array(
                    'class' => 'custom-palette'
                ),
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-purple'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'right_purple',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-blue'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'right_blue',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-tran'),
                'title'      => __(' '),
                'subtitle'   => '右上透明角标',
                'id'         => 'right_tran',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-red'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'right_red',
                'type'       => 'text',
                'default'    => '',
            ),
             array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-green'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'right_green',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-yellow'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'right_yellow',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|right_style', '!=|==', '|jb-black'),
                'title'      => __(' '),
                'subtitle'   => '左上黑色角标',
                'id'         => 'right_black',
                'type'       => 'text',
                'default'    => '',
            ),
            
            // 底部角标样式
           array(
                'dependency' => array('mh_text', '!=', ''),
                'id'         => 'bottom_style',
                'title'      => '底部角标样式',
                'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
                'default'    => 'jb-purple',
                'type'       => 'palette',
                'options'    => array(
                    'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
                    'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
                    'jb-tran'   => array('linear-gradient(25deg, rgba(234,184,105,0) 10%, rgba(251,236,212,0) 60%, rgba(255,224,174,0) 100%); width:40px; height:40px;'),
                    'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
                    'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
                    'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
                    'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),

                ),
                'attributes' => array(
                    'class' => 'custom-palette'
                ),
            ),
           array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-purple'),
                'title'      => __(' '),
                'subtitle'   => '底部角标内容',
                'id'         => 'bottom_purple',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-blue'),
                'title'      => __(' '),
                'subtitle'   => '底部角标内容',
                'id'         => 'bottom_blue',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-tran'),
                'title'      => __(' '),
                'subtitle'   => '底部透明角标',
                'id'         => 'bottom_tran',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-red'),
                'title'      => __(' '),
                'subtitle'   => '底部角标内容',
                'id'         => 'bottom_red',
                'type'       => 'text',
                'default'    => '',
            ),
             array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-green'),
                'title'      => __(' '),
                'subtitle'   => '底部角标内容',
                'id'         => 'bottom_green',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-yellow'),
                'title'      => __(' '),
                'subtitle'   => '右上角标内容',
                'id'         => 'bottom_yellow',
                'type'       => 'text',
                'default'    => '',
            ),
            array(
                'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-black'),
                'title'      => __(' '),
                'subtitle'   => '左上黑色角标',
                'id'         => 'bottom_black',
                'type'       => 'text',
                'default'    => '',
            ),
        ),
    ));
}

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

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

 //文章封面角标开始
if (get_post_meta($post->ID, 'mh_text', true)){
        $left1 = get_post_meta($post->ID, 'left_purple', true);
        $left2 = get_post_meta($post->ID, 'left_blue', true);
        $left3 = get_post_meta($post->ID, 'left_tran', true);
        $left4 = get_post_meta($post->ID, 'left_red', true);
        $left5 = get_post_meta($post->ID, 'left_green', true);
        $left6 = get_post_meta($post->ID, 'left_yellow', true);
        $left7 = get_post_meta($post->ID, 'left_black', true);
        
        $right1 = get_post_meta($post->ID, 'right_purple', true);
        $right2 = get_post_meta($post->ID, 'right_blue', true);
        $right3 = get_post_meta($post->ID, 'right_tran', true);
        $right4 = get_post_meta($post->ID, 'right_red', true);
        $right5 = get_post_meta($post->ID, 'right_green', true);
        $right6 = get_post_meta($post->ID, 'right_yellow', true);
        $right7 = get_post_meta($post->ID, 'right_black', true);

        
        
        $bottom1 = get_post_meta($post->ID, 'bottom_purple', true);
        $bottom2 = get_post_meta($post->ID, 'bottom_blue', true);
        $bottom3 = get_post_meta($post->ID, 'bottom_tran', true);
        $bottom4 = get_post_meta($post->ID, 'bottom_red', true);
        $bottom5 = get_post_meta($post->ID, 'bottom_green', true);
        $bottom6 = get_post_meta($post->ID, 'bottom_yellow', true);
        $bottom7 = get_post_meta($post->ID, 'bottom_black', true);
        
        // 左侧上角封面
        if ($left1){
            $sticky .= '<a class="item-left-category bg-color-purple">'.$left1.'</a>';
        }
        if ($left2){
            $sticky .= '<a class="item-left-category bg-color-blue">'.$left2.'</a>';
        }
        if ($left3){
            $sticky .= '<a class="item-left-category bg-color-tran">'.$left3.'</a>';
        }
        if ($left4){
            $sticky .= '<a class="item-left-category bg-color-red">'.$left4.'</a>';
        }
        if ($left5){
            $sticky .= '<a class="item-left-category bg-color-green">'.$left5.'</a>';
        }
        if ($left6){
            $sticky .= '<a class="item-left-category bg-color-yellow">'.$left6.'</a>';
        }
         if ($left7){
            $sticky .= '<a class="item-left-category bg-color-black">'.$left7.'</a>';
        }
        
        
        // 右上角封面
        if ($right1){
            $sticky .= '<span class="bg-color-purple tag-license">'.$right1.'</span>';
        }
        if ($right2){
            $sticky .= '<span class="bg-color-blue tag-license">'.$right2.'</span>';
        }
        if ($right3){
            $sticky .= '<span class="bg-color-tran tag-license">'.$right3.'</span>';
        }
        if ($right4){
            $sticky .= '<span class="bg-color-red tag-license">'.$right4.'</span>';
        }
        if ($right5){
            $sticky .= '<span class="bg-color-green tag-license">'.$right5.'</span>';
        }
        if ($right6){
            $sticky .= '<span class="bg-color-yellow tag-license">'.$right6.'</span>';
        }
        if ($right7){
            $sticky .= '<span class="bg-color-black tag-license">'.$right7.'</span>';
        }


        
        
        // bottom底部封面
        if ($bottom1){
            $sticky .= '<div class="n-collect-item-bottom bg-color-purple"><span class="bottom-l">'.$bottom1.'</span></div>';
        }
        if ($bottom2){
            $sticky .= '<div class="n-collect-item-bottom bg-color-blue"><span class="bottom-l">'.$bottom2.'</span></div>';
        }
        if ($bottom3){
            $sticky .= '<div class="n-collect-item-bottom bg-color-tran"><span class="bottom-l">'.$bottom3.'</span></div>';
        }
        if ($bottom4){
            $sticky .= '<div class="n-collect-item-bottom bg-color-red"><span class="bottom-l">'.$bottom4.'</span></div>';
        }
        if ($bottom5){
            $sticky .= '<div class="n-collect-item-bottom bg-color-green"><span class="bottom-l">'.$bottom5.'</span></div>';
        }
        if ($bottom6){
            $sticky .= '<div class="n-collect-item-bottom bg-color-yellow"><span class="bottom-l">'.$bottom6.'</span></div>';
        }
        if ($bottom7){
            $sticky .= '<div class="n-collect-item-bottom bg-color-black"><span class="bottom-l">'.$bottom7.'</span></div>';
        }
        
    }

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

/**文章封面美化开始*/
.tag-license {
position: absolute;
top: 11px;
right: -17px;
-webkit-transform: rotate(45deg);
z-index: 1;
width: 75px;
height: 18px;
color: #fff;
line-height: 18px;
text-align: center;
font-size: 12px;
/*font-style: normal;*/
}

a.item-left-category {
position: absolute;
left: 1px;
top: 20px;
padding: 5px 6px;
font-size: 1rem;
line-height: 1;
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 6px;
z-index: 1;
}

a.item-category {
position: absolute;
right: 7px;
top: 10px;
padding: 5px 6px;
font-size: 1rem;
line-height: 1;
color: #fff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 6px;
z-index: 1;
}
/**文章封面美化结束*/

/** 壁纸标题毛玻璃 **/
span.bottom-l {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.n-collect-item-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 25px;
border-radius: 0 0 4px 4px;
-webkit-backdrop-filter: saturate(180%) blur(20px);
font-size: 13px;
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0,.16);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: center;
padding: 0 18px;
z-index: 1;
}
.bg-color-purple {
background-image: url(https://www.baicaima.com/wp-content/themes/zbfox/img/2210123621994-purple.jpg);
}

.bg-color-red {
background-image: url(https://www.baicaima.com/wp-content/themes/zbfox/img/20240610113127253-redtf.webp);
}
 .bg-color-blue {
background: linear-gradient(-20deg, #0066cc 0%, #00aaee 100%);
}
 .bg-color-green {
background-image: url(https://www.baicaima.com/wp-content/themes/zbfox/img/20240610154942489-greentf.png);
}

  .bg-color-yellow {
background-image: url(https://www.baicaima.com/wp-content/themes/zbfox/img/20240610155931379-yellowtf.png);
}
  .bg-color-black {
background-image: url(https://www.baicaima.com/wp-content/themes/zbfox/img/20240610161141296-heitf.webp);
}

a.item-category .bg-color-tran{
position: absolute;
left: 10px;
top: 10px;
padding: 5px 6px;
font-size: 1rem;
line-height: 1;
color: #fff;
background: rgb(54 117 255 / 19%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 6px;
}
.bg-color-tran{
backdrop-filter: saturate(180%) blur(20px);
}