子比主题 – 文章封面角标美化

 //文章封面角标开始
if (get_post_meta($post->ID, 'mh_text', true)){

        $left1 = get_post_meta($post->ID, 'left_red', true);
        $left2 = get_post_meta($post->ID, 'left_green', true);
        $left3 = get_post_meta($post->ID, 'left_blue', true);
        $left4 = get_post_meta($post->ID, 'left_yellow', true);
        $left5 = get_post_meta($post->ID, 'left_purple', true);
        $left6 = get_post_meta($post->ID, 'left_black', true);
        $left7 = get_post_meta($post->ID, 'left_color1', true);
        
        $right1 = get_post_meta($post->ID, 'right_red', true);
        $right2 = get_post_meta($post->ID, 'right_green', true);
        $right3 = get_post_meta($post->ID, 'right_blue', true);
        $right4 = get_post_meta($post->ID, 'right_yellow', true);
        $right5 = get_post_meta($post->ID, 'right_purple', true);
        $right6 = get_post_meta($post->ID, 'right_black', true);
        $right7 = get_post_meta($post->ID, 'right_color1', true);

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

.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: 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;
 }

 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.teyonds.com/wp-content/uploads/teyond/purple.png);}

 .bg-color-red {
     background-image: url(https://www.teyonds.com/wp-content/uploads/teyond/red.png);}

 .bg-color-blue {
     background: linear-gradient(-20deg, #0066cc 0%, #00aaee 100%);}

 .bg-color-green {
     background-image: url(https://www.teyonds.com/wp-content/uploads/teyond/green.png);}

 .bg-color-yellow {
     background-image: url(https://www.teyonds.com/wp-content/uploads/teyond/yellow.png);}

 .bg-color-black {
     background-image: url(https://www.teyonds.com/wp-content/uploads/teyond/black.png);}

 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);
 }