挂件头衔✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注切换到宽版
  • 首页
  • 社区
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 文章封面角标美化
    返回列表 发布新帖
    查看: 185|回复: 0

    [代码技巧] 子比主题 – 文章封面角标美化

    [复制链接]
    社区贡献

    330

    主题

    204

    回帖

    2万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 293 颗
       贡献 : 40810 点
       金币 : 24 枚
    Icon在线时间 : 1669 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-6-10

    荣誉勋章

    连续签到LV.1累计签到LV.3任务·年会员幸运抽奖·皇幸运抽奖·尊幸运抽奖·豪起源之星摩羯座推广LV.2钻石LV.1注册一周年

    总共送礼：1 个    总共收礼：0 个

    实力·绝代收藏家
    飞流名人堂成员 1 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-9 00:52:37 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    这篇文章就是我给大家搭建了一个新网站测试的，然后就是我给里面加了几个角标的样式，直接丢的颜色代码美化，我发现很多站一堆人发我这个美化，我想知道版权不留就说自己写的吗？真的懒得搭理，某些站长真的是恶心，直接免费，喜欢的自行部署！
    image.webp
    tengfei_down (72).webp
    我这里修复了一下，之前搬运我这个文章的，忘了告诉你了，那些去拿去卖钱的人，用了之前的这个样式会卡顿，所以我这次就是免费分享一下，再搬运不留版权我真的要心里问候你家人怎么样了！正好记录一下！

    代码部署


    一共三个代码，两个PHP代码和一个CSS代码，我会讲的很仔细，跟着教程操作不会有问题
    metabox-options.php
    定位：/wp-content/themes/zibll/inc/options/metabox-options.php文件，然后我们进入文件里面就去搜“文章、页面、帖子的独立seo”因为这个是子比主题更新后的注释，如下图和代码
    tengfei_down (73).webp
    1. if (class_exists('CSF')) {
    2.     CSF::createMetabox('tf', array(
    3.         'title'     => '文章封面自定义标识',
    4.         'post_type' => array('post', 'page', 'plate', 'forum_post'),
    5.         'context'   => 'advanced',
    6.         'data_type' => 'unserialize',
    7.     ));
    8.     CSF::createSection('tf', array(
    9.         'fields' => array(
    10.             array(
    11.                 'title'   => __('封面标识'),
    12.                 'id'      => 'mh_text',
    13.                 'type'    => 'switcher',
    14.                 'label'   => '',
    15.                 'default' => false
    16.             ),
    17.             // 左上角标样式
    18.             array(
    19.                 'dependency' => array('mh_text', '!=', ''),
    20.                 'id'         => 'left_style',
    21.                 'title'      => '左上角标样式',
    22.                 'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
    23.                 'default'    => 'jb-purple',
    24.                 'type'       => 'palette',
    25.                 'options'    => array(
    26.                     'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
    27.                     'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
    28.                     'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
    29.                     'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
    30.                     'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
    31.                     'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
    32.                 ),
    33.                 'attributes' => array(
    34.                     'class' => 'custom-palette'
    35.                 ),
    36.             ),
    37.             array(
    38.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-purple'),
    39.                 'title'      => __(' '),
    40.                 'subtitle'   => '左上角标内容',
    41.                 'id'         => 'left_purple',
    42.                 'type'       => 'text',
    43.                 'default'    => '',
    44.             ),
    45.             array(
    46.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-blue'),
    47.                 'title'      => __(' '),
    48.                 'subtitle'   => '左上角标内容',
    49.                 'id'         => 'left_blue',
    50.                 'type'       => 'text',
    51.                 'default'    => '',
    52.             ),
    53.             array(
    54.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-red'),
    55.                 'title'      => __(' '),
    56.                 'subtitle'   => '左上红色角标',
    57.                 'id'         => 'left_red',
    58.                 'type'       => 'text',
    59.                 'default'    => '',
    60.             ),
    61.              array(
    62.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-green'),
    63.                 'title'      => __(' '),
    64.                 'subtitle'   => '左上绿色角标',
    65.                 'id'         => 'left_green',
    66.                 'type'       => 'text',
    67.                 'default'    => '',
    68.             ),
    69.             array(
    70.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-yellow'),
    71.                 'title'      => __(' '),
    72.                 'subtitle'   => '左上黄色角标',
    73.                 'id'         => 'left_yellow',
    74.                 'type'       => 'text',
    75.                 'default'    => '',
    76.             ),
    77.             array(
    78.                 'dependency' => array('mh_text|left_style', '!=|==', '|jb-black'),
    79.                 'title'      => __(' '),
    80.                 'subtitle'   => '左上黑色角标',
    81.                 'id'         => 'left_black',
    82.                 'type'       => 'text',
    83.                 'default'    => '',
    84.             ),
    85.             // 右上角标样式
    86.             array(
    87.                 'dependency' => array('mh_text', '!=', ''),
    88.                 'id'         => 'right_style',
    89.                 'title'      => '右上角标样式',
    90.                 'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
    91.                 'default'    => 'jb-purple',
    92.                 'type'       => 'palette',
    93.                 'options'    => array(
    94.                     'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
    95.                     'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
    96.                     'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
    97.                     'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
    98.                     'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
    99.                     'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
    100.                 ),
    101.                 'attributes' => array(
    102.                     'class' => 'custom-palette'
    103.                 ),
    104.             ),
    105.             array(
    106.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-purple'),
    107.                 'title'      => __(' '),
    108.                 'subtitle'   => '右上角标内容',
    109.                 'id'         => 'right_purple',
    110.                 'type'       => 'text',
    111.                 'default'    => '',
    112.             ),
    113.             array(
    114.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-blue'),
    115.                 'title'      => __(' '),
    116.                 'subtitle'   => '右上角标内容',
    117.                 'id'         => 'right_blue',
    118.                 'type'       => 'text',
    119.                 'default'    => '',
    120.             ),
    121.             array(
    122.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-red'),
    123.                 'title'      => __(' '),
    124.                 'subtitle'   => '右上角标内容',
    125.                 'id'         => 'right_red',
    126.                 'type'       => 'text',
    127.                 'default'    => '',
    128.             ),
    129.              array(
    130.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-green'),
    131.                 'title'      => __(' '),
    132.                 'subtitle'   => '右上角标内容',
    133.                 'id'         => 'right_green',
    134.                 'type'       => 'text',
    135.                 'default'    => '',
    136.             ),
    137.             array(
    138.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-yellow'),
    139.                 'title'      => __(' '),
    140.                 'subtitle'   => '右上角标内容',
    141.                 'id'         => 'right_yellow',
    142.                 'type'       => 'text',
    143.                 'default'    => '',
    144.             ),
    145.             array(
    146.                 'dependency' => array('mh_text|right_style', '!=|==', '|jb-black'),
    147.                 'title'      => __(' '),
    148.                 'subtitle'   => '左上黑色角标',
    149.                 'id'         => 'right_black',
    150.                 'type'       => 'text',
    151.                 'default'    => '',
    152.             ),
    153.             
    154.             // 底部角标样式
    155.            array(
    156.                 'dependency' => array('mh_text', '!=', ''),
    157.                 'id'         => 'bottom_style',
    158.                 'title'      => '底部角标样式',
    159.                 'subtitle'   => '请勿填写多个，默认只显示填写内容的最后一个，不使用请选择关闭',
    160.                 'default'    => 'jb-purple',
    161.                 'type'       => 'palette',
    162.                 'options'    => array(
    163.                     'jb-purple' => array('linear-gradient(135deg, #fec2ff 10%, #d000de 100%); width:40px; height:40px;'),
    164.                     'jb-blue'   => array('linear-gradient(135deg, #b6e6ff 10%, #198aff 100%); width:40px; height:40px;'),
    165.                     'jb-red'    => array('linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%); width:40px; height:40px;'),
    166.                     'jb-green'  => array('linear-gradient(135deg, #ccffcd 10%, #52bb51 100%); width:40px; height:40px;'),
    167.                     'jb-yellow' => array('linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%); width:40px; height:40px;'),
    168.                     'jb-black'   => array('linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%); width:40px; height:40px;'),
    169.                 ),
    170.                 'attributes' => array(
    171.                     'class' => 'custom-palette'
    172.                 ),
    173.             ),
    174.            array(
    175.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-purple'),
    176.                 'title'      => __(' '),
    177.                 'subtitle'   => '底部角标内容',
    178.                 'id'         => 'bottom_purple',
    179.                 'type'       => 'text',
    180.                 'default'    => '',
    181.             ),
    182.             array(
    183.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-blue'),
    184.                 'title'      => __(' '),
    185.                 'subtitle'   => '底部角标内容',
    186.                 'id'         => 'bottom_blue',
    187.                 'type'       => 'text',
    188.                 'default'    => '',
    189.             ),
    190.             array(
    191.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-red'),
    192.                 'title'      => __(' '),
    193.                 'subtitle'   => '底部角标内容',
    194.                 'id'         => 'bottom_red',
    195.                 'type'       => 'text',
    196.                 'default'    => '',
    197.             ),
    198.              array(
    199.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-green'),
    200.                 'title'      => __(' '),
    201.                 'subtitle'   => '底部角标内容',
    202.                 'id'         => 'bottom_green',
    203.                 'type'       => 'text',
    204.                 'default'    => '',
    205.             ),
    206.             array(
    207.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-yellow'),
    208.                 'title'      => __(' '),
    209.                 'subtitle'   => '右上角标内容',
    210.                 'id'         => 'bottom_yellow',
    211.                 'type'       => 'text',
    212.                 'default'    => '',
    213.             ),
    214.             array(
    215.                 'dependency' => array('mh_text|bottom_style', '!=|==', '|jb-black'),
    216.                 'title'      => __(' '),
    217.                 'subtitle'   => '左上黑色角标',
    218.                 'id'         => 'bottom_black',
    219.                 'type'       => 'text',
    220.                 'default'    => '',
    221.             ),
    222.         ),
    223.     ));
    224. }
    复制代码

    zib-posts-list.php
    定位：/wp-content/themes/zibll/inc/functions/zib-posts-list.php文件里面，然后我们到了文件里面去搜“置顶”，因为我们要放到他的下面，如下图如下代码
    tengfei_down (74).webp
    1.      //文章封面角标开始
    2. if (get_post_meta($post->ID, 'mh_text', true)){
    3.     $left1 = get_post_meta($post->ID, 'left_purple', true);
    4.     $left2 = get_post_meta($post->ID, 'left_blue', true);
    5.     $left3 = get_post_meta($post->ID, 'left_red', true);
    6.     $left4 = get_post_meta($post->ID, 'left_green', true);
    7.     $left5 = get_post_meta($post->ID, 'left_yellow', true);
    8.     $left6 = get_post_meta($post->ID, 'left_black', true);
    9.    
    10.     $right1 = get_post_meta($post->ID, 'right_purple', true);
    11.     $right2 = get_post_meta($post->ID, 'right_blue', true);
    12.     $right3 = get_post_meta($post->ID, 'right_red', true);
    13.     $right4 = get_post_meta($post->ID, 'right_green', true);
    14.     $right5 = get_post_meta($post->ID, 'right_yellow', true);
    15.     $right6 = get_post_meta($post->ID, 'right_black', true);
    16.    
    17.    
    18.     $bottom1 = get_post_meta($post->ID, 'bottom_purple', true);
    19.     $bottom2 = get_post_meta($post->ID, 'bottom_blue', true);
    20.     $bottom3 = get_post_meta($post->ID, 'bottom_red', true);
    21.     $bottom4 = get_post_meta($post->ID, 'bottom_green', true);
    22.     $bottom5 = get_post_meta($post->ID, 'bottom_yellow', true);
    23.     $bottom6 = get_post_meta($post->ID, 'bottom_black', true);
    24.    
    25.     // 左侧上角封面
    26.     if ($left1){
    27.         $sticky .= '<a class="item-left-category bg-color-purple">'.$left1.'</a>';
    28.     }
    29.     if ($left2){
    30.         $sticky .= '<a class="item-left-category bg-color-blue">'.$left2.'</a>';
    31.     }

    33.     if ($left3){
    34.         $sticky .= '<a class="item-left-category bg-color-red">'.$left3.'</a>';
    35.     }
    36.     if ($left4){
    37.         $sticky .= '<a class="item-left-category bg-color-green">'.$left4.'</a>';
    38.     }
    39.     if ($left5){
    40.         $sticky .= '<a class="item-left-category bg-color-yellow">'.$left5.'</a>';
    41.     }
    42.      if ($left6){
    43.         $sticky .= '<a class="item-left-category bg-color-black">'.$left6.'</a>';
    44.     }
    45.    
    46.    
    47.     // 右上角封面
    48.     if ($right1){
    49.         $sticky .= '<span class="bg-color-purple tag-license">'.$right1.'</span>';
    50.     }
    51.     if ($right2){
    52.         $sticky .= '<span class="bg-color-blue tag-license">'.$right2.'</span>';
    53.     }

    55.     if ($right3){
    56.         $sticky .= '<span class="bg-color-red tag-license">'.$right3.'</span>';
    57.     }
    58.     if ($right4){
    59.         $sticky .= '<span class="bg-color-green tag-license">'.$right4.'</span>';
    60.     }
    61.     if ($right5){
    62.         $sticky .= '<span class="bg-color-yellow tag-license">'.$right5.'</span>';
    63.     }
    64.     if ($right6){
    65.         $sticky .= '<span class="bg-color-black tag-license">'.$right6.'</span>';
    66.     }
    67.    
    68.    
    69.     // bottom底部封面
    70.     if ($bottom1){
    71.         $sticky .= '<div class="n-collect-item-bottom bg-color-purple"><span class="bottom-l">'.$bottom1.'</span></div>';
    72.     }
    73.     if ($bottom2){
    74.         $sticky .= '<div class="n-collect-item-bottom bg-color-blue"><span class="bottom-l">'.$bottom2.'</span></div>';
    75.     }
    76.     if ($bottom3){
    77.         $sticky .= '<div class="n-collect-item-bottom bg-color-red"><span class="bottom-l">'.$bottom3.'</span></div>';
    78.     }
    79.     if ($bottom4){
    80.         $sticky .= '<div class="n-collect-item-bottom bg-color-green"><span class="bottom-l">'.$bottom4.'</span></div>';
    81.     }
    82.     if ($bottom5){
    83.         $sticky .= '<div class="n-collect-item-bottom bg-color-yellow"><span class="bottom-l">'.$bottom5.'</span></div>';
    84.     }
    85.     if ($bottom6){
    86.         $sticky .= '<div class="n-collect-item-bottom bg-color-black"><span class="bottom-l">'.$bottom6.'</span></div>';
    87.     }
    88.    
    89. }
    复制代码

    CSS代码
    直接丢到：子比主题–>>自定义CSS样式即可，我的css最下面可以看到是颜色代码，你可以去颜色代码去调整自己喜欢的颜色，如果你还是喜欢图片，那么可以将下面的css颜色换成图片链接，记住，换成图片你网站会卡的哦！
    1. /**文章封面美化开始*/
    2. .tag-license {
    3.     position: absolute;
    4.     top: 11px;
    5.     right: -17px;
    6.     -webkit-transform: rotate(45deg);
    7.     z-index: 1;
    8.     width: 75px;
    9.     height: 18px;
    10.     color: #fff;
    11.     line-height: 18px;
    12.     text-align: center;
    13.     font-size: 12px;
    14.     /*font-style: normal;*/
    15. }
    16. a.item-left-category {
    17.     position: absolute;
    18.     left: 5px;
    19.     top: 10px;
    20.     padding: 5px 6px;
    21.     font-size: 1rem;
    22.     line-height: 1;
    23.     color: #fff;
    24.     -webkit-backdrop-filter: blur(10px);
    25.     backdrop-filter: blur(10px);
    26.     border-radius: 6px;
    27.     z-index: 1;
    28. }
    29. a.item-category {
    30.     position: absolute;
    31.     right: 7px;
    32.     top: 10px;
    33.     padding: 5px 6px;
    34.     font-size: 1rem;
    35.     line-height: 1;
    36.     color: #fff;
    37.     -webkit-backdrop-filter: blur(10px);
    38.     backdrop-filter: blur(10px);
    39.     border-radius: 6px;
    40.     z-index: 1;
    41. }
    42. /**文章封面美化结束*/
    43. /** 壁纸标题毛玻璃 **/
    44. span.bottom-l {
    45.     overflow: hidden;
    46.     text-overflow: ellipsis;
    47.     white-space: nowrap;
    48. }
    49. .n-collect-item-bottom {
    50.     position: absolute;
    51.     bottom: -1px;
    52.     left: 0;
    53.     width: 100%;
    54.     height: 25px;
    55.     border-radius: 0 0 4px 4px;
    56.     -webkit-backdrop-filter: saturate(180%) blur(20px);
    57.     font-size: 13px;
    58.     color: #fff;
    59.     text-shadow: 0 2px 2px rgba(0,0,0,.16);
    60.     display: -webkit-box;
    61.     display: -ms-flexbox;
    62.     display: flex;
    63.     -webkit-box-align: center;
    64.     -ms-flex-align: center;
    65.     align-items: center;
    66.     -webkit-box-pack: justify;
    67.     -ms-flex-pack: justify;
    68.     justify-content: center;
    69.     padding: 0 18px;
    70.     z-index: 1;
    71. }
    72. .bg-color-purple {
    73.     background: linear-gradient(45deg, #9370DB, #DA70D6);
    74. }
    75. .bg-color-red {
    76.     background: linear-gradient(135deg, #FF6347, #FFA07A);
    77. }
    78. .bg-color-blue {
    79.     background: linear-gradient(60deg, #1E90FF, #87CEFA);
    80. }
    81. .bg-color-green {
    82.     background: linear-gradient(225deg, #32CD32, #98FB98);
    83. }
    84. .bg-color-yellow {
    85.     background: linear-gradient(315deg, #FFBC52, #FFE68F);
    86. }
    87. .bg-color-black {
    88.     background: linear-gradient(180deg, #121212, #4b4b4b);
    89. }  
    复制代码

    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-6-10 07:27 , Processed in 0.086763 second(s), 85 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表