子比主题文章标题角标扫光样式教程（两种方案）

这是一款子比主题标题前角标，不是封面角标，封面角标可以搜我以前的文章写的有，就是在首页展示的标题前扫光的样式，我网站没有装因为我网站美化太多了，多了就不好看了，喜欢的子比部署吧，价格不贵，从不会以高价去卖！

第一版

第二版

对于第二版还是我一时想搞出来的，我觉得不发新文章了，发了有些用户买了还要去买，所以我又做了一版，一共两版话不多说直接开始效果展示吧！

上面是第二版的效果，第二版有一个就是最多标题前只能放5个，多了会影响样式，我看很多人做了标题前面的图片，我不是很喜欢图片，这个也是最终版，图片那种不会做，喜欢的自己部署一下吧！

很多人习惯用前台写文章，那么很抱歉，我没写前台发布文章的，因为我习惯古腾堡，所以就写了古腾堡，我写的代码部署教程非常的详细，有问题右边私信站长就可以！

代码部署

首先我们有三个地方的代码，要记住跟着我的步骤部署不会有问题，第一版和第二版的部署都一样，所以知道怎么部署的就行了，代码不一样，位置还是一样的位置

第一版教程

func文件

metabox-options文件

css代码

第一个地方就是func文件，也就是子比根目录，这个文件子比没有，我们需要创建func.php，创建之后一定要记得在最顶上加php的头：<?php，不会加看子比的其他文件看看顶部怎么加的，这就不说了！

创建好文件之后，我们直接加入下面的代码放到func文件里面即可！

// 初始化钩子
add_action('after_setup_theme', 'init_badge_features');

function init_badge_features() {
    add_filter('the_title', 'zibll_Add_ons_MJ_mi_jiaobiao_display_position', 10, 2);
}

// 标题角标显示函数
function zibll_Add_ons_MJ_mi_jiaobiao_display_position($title, $post_id) {
    if (is_admin() || is_single() ||!$post_id) {
        return $title;
    }

    $mh_text = get_post_meta($post_id, 'mh_text', true);
    $style_type = get_post_meta($post_id, 'tengfei_badge_style', true);

    if (empty($mh_text) || empty($style_type)) {
        return $title;
    }

    // 定义样式配置，使用 metabox 中相同的渐变样式
    $style_gradients = array(
        'jb-purple' => array(
            'gradient' => 'linear-gradient(135deg, #fec2ff 10%, #d000de 100%)',
            'text_field' => 'badge_text_purple'
        ),
        'jb-blue' => array(
            'gradient' => 'linear-gradient(135deg, #b6e6ff 10%, #198aff 100%)',
            'text_field' => 'badge_text_blue'
        ),
        'jb-red' => array(
            'gradient' => 'linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%)',
            'text_field' => 'badge_text_red'
        ),
        'jb-green' => array(
            'gradient' => 'linear-gradient(135deg, #ccffcd 10%, #52bb51 100%)',
            'text_field' => 'badge_text_green'
        ),
        'jb-yellow' => array(
            'gradient' => 'linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%)',
            'text_field' => 'badge_text_yellow'
        ),
        'jb-black' => array(
            'gradient' => 'linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%)',
            'text_field' => 'badge_text_black'
        )
    );

    // 获取角标文字
    if (isset($style_gradients[$style_type])) {
        $text_field = $style_gradients[$style_type]['text_field'];
        $badge_text = get_post_meta($post_id, $text_field, true);
        if (!empty($badge_text)) {
            $gradient = $style_gradients[$style_type]['gradient'];
            $badge_html = '<span class="tengfei-title-badge" style="background: ' . $gradient . ';">' . $badge_text . '</span>';
            $title = $badge_html . $title;
        }
    }

    return $title;
}

第二个的文件的目录在：/wp-content/themes/zibll/inc/options/metabox-options.php，首先我们打开这个我文件之后，我们第一步就是要先定位到位置，搜下面的文字，如下代码如下图

//文章、页面、帖子的独立seo

可以看到图上的位置，你可以看到我在上面留了很多空，那么下面的代码就放你搜的这个地方的上面，也就是我留空的地方

if (class_exists('CSF')) {
    // 定义颜色配置
    $badge_colors = array(
        'purple' => array(
            'gradient' => 'linear-gradient(135deg, #fec2ff 10%, #d000de 100%)',
            'title' => '紫色渐变'
        ),
        'blue' => array(
            'gradient' => 'linear-gradient(135deg, #b6e6ff 10%, #198aff 100%)',
            'title' => '蓝色渐变'
        ),
        'red' => array(
            'gradient' => 'linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%)',
            'title' => '红色渐变'
        ),
        'green' => array(
            'gradient' => 'linear-gradient(135deg, #ccffcd 10%, #52bb51 100%)',
            'title' => '绿色渐变'
        ),
        'yellow' => array(
            'gradient' => 'linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%)',
            'title' => '黄色渐变'
        ),
        'black' => array(
            'gradient' => 'linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%)',
            'title' => '黑色渐变'
        )
    );

    // 创建元框架
    CSF::createMetabox('tf', array(
        'title' => '子比列表文章标题前扫光标识',
        'post_type' => array('post', 'page', 'plate', 'forum_post'),
        'context' => 'advanced',
        'data_type' => 'unserialize',
    ));

    // 创建字段
    $fields = array();

    // 添加基础开关
    $fields[] = array(
        'title' => __('封面标识'),
        'id' => 'mh_text',
        'type' => 'switcher',
        'label' => '',
        'default' => false
    );

    // 获取第一个颜色选项的键
    reset($badge_colors);
    $first_color_key = key($badge_colors);
    $first_option_value = 'jb-' . $first_color_key;

    // 添加标题标识样式
    $fields[] = array(
        'dependency' => array('mh_text', '==', 'true'),
        'id' => 'tengfei_badge_style',
        'title' => '标题标识样式',
        'subtitle' => '选择标识的颜色样式',
        'type' => 'palette',
        'options' => generate_palette_options($badge_colors),
        'attributes' => array('class' => 'custom-palette'),
        'default' => $first_option_value // 设置默认值为第一个颜色选项
    );

    // 添加标题文字输入框
    foreach ($badge_colors as $color_key => $color) {
        $fields[] = array(
            'dependency' => array('mh_text|tengfei_badge_style', '!=|==', '|jb-' . $color_key),
            'title' => __(' '),
            'subtitle' => "{$color['title']}标识文字",
            'id' => "badge_text_{$color_key}",
            'type' => 'text',
            'default' => ''
        );
    }

    // 创建配置区域
    CSF::createSection('tf', array('fields' => $fields));
}

// 辅助函数：生成调色板选项
function generate_palette_options($colors) {
    $options = array();
    foreach ($colors as $key => $color) {
        $options['jb-' . $key] = array($color['gradient'] . ';width:40px; height:40px;');
    }
    return $options;
}

最后一步就很简单了，就直接放css，放到：WP后台–>>子比主题–>>自定义CSS即可

.tengfei-title-badge {
    color: #fff;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    border: 1.5px solid #ccc;
    align-items: center;
    border-radius: 5px;
    padding: 0px 4px;
    margin-right: 3px;
    height: 19px;
    font-size: 12px;
    margin-top: 0px;
    top: -1px;
}
.tengfei-title-badge:after {
  position:absolute;
  content:" ";
  display:block;
  left:-100%;
  top:-5px;
  width:15px;
  height:145%;
  background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  animation:sweepTitle 3s ease-in-out infinite;
  transform:rotate(28deg);
}
@keyframes sweepTitle {
  0% {
  left:-100%;
}
100% {
  left:100%;
}
;}

第二版教程

func文件

metabox-options文件

css

第二版教程还是跟第一版一样，话不多说直接步骤不会有问题

创建好文件之后，我们直接加入下面的代码放到func文件里面即可！

// 初始化钩子
add_action('after_setup_theme', 'init_badge_features');

function init_badge_features() {
    add_filter('the_title', 'zibll_Add_ons_MJ_mi_jiaobiao_display_position', 10, 2);
}

// 标题角标显示函数
function zibll_Add_ons_MJ_mi_jiaobiao_display_position($title, $post_id) {
    if (is_admin() || is_single() || !$post_id) {
        return $title;
    }

    $mh_text = get_post_meta($post_id, 'mh_text', true);
    $badge_groups = get_post_meta($post_id, 'badge_group', true); // 读取多个标识数据

    if (empty($mh_text) || empty($badge_groups) || !is_array($badge_groups)) {
        return $title;
    }

    // 默认渐变背景
    $style_gradients = array(
        'jb-purple' => 'linear-gradient(135deg, #fec2ff 10%, #d000de 100%)',
        'jb-blue' => 'linear-gradient(135deg, #b6e6ff 10%, #198aff 100%)',
        'jb-red' => 'linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%)',
        'jb-green' => 'linear-gradient(135deg, #ccffcd 10%, #52bb51 100%)',
        'jb-yellow' => 'linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%)',
        'jb-black' => 'linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%)'
    );

    $badge_html = '';

    foreach ($badge_groups as $badge) {
        $badge_prefix_text = isset($badge['badge_prefix_text']) ? esc_html($badge['badge_prefix_text']) : '';
        $badge_prefix_color = isset($badge['badge_prefix_color']) ? esc_attr($badge['badge_prefix_color']) : '#ffffff';
        $style_type = isset($badge['tengfei_badge_style']) ? $badge['tengfei_badge_style'] : '';
        $badge_bg_color = isset($badge['badge_bg_color']) ? esc_attr($badge['badge_bg_color']) : '';

        if (empty($badge_prefix_text)) {
            continue;
        }

        // 计算背景颜色：如果有自定义颜色，则优先使用
        $gradient = !empty($badge_bg_color) ? $badge_bg_color : ($style_gradients[$style_type] ?? 'linear-gradient(135deg, #ccc, #888)');

        // 生成 HTML
        $badge_html .= '<span class="tengfei-title-badge" style="background: ' . $gradient . '; color: ' . $badge_prefix_color . '; margin-right: 5px; border-radius: 4px; font-size: 12px;">' . $badge_prefix_text . '</span>';
    }

    return $badge_html . $title;
}

//文章、页面、帖子的独立seo

可以看到图上的位置，你可以看到我在上面留了很多空，那么下面的代码就放你搜的这个地方的上面，也就是我留空的地方

if (class_exists('CSF')) {
    // 定义默认颜色
    $badge_colors = array(
        'jb-purple' => array(
            'gradient' => 'linear-gradient(135deg, #fec2ff 10%, #d000de 100%)',
            'title' => '紫色渐变'
        ),
        'jb-blue' => array(
            'gradient' => 'linear-gradient(135deg, #b6e6ff 10%, #198aff 100%)',
            'title' => '蓝色渐变'
        ),
        'jb-red' => array(
            'gradient' => 'linear-gradient(135deg, #ffbeb4 10%, #f61a1a 100%)',
            'title' => '红色渐变'
        ),
        'jb-green' => array(
            'gradient' => 'linear-gradient(135deg, #ccffcd 10%, #52bb51 100%)',
            'title' => '绿色渐变'
        ),
        'jb-yellow' => array(
            'gradient' => 'linear-gradient(135deg, #ffd6b2 10%, #ff651c 100%)',
            'title' => '黄色渐变'
        ),
        'jb-black' => array(
            'gradient' => 'linear-gradient(317deg, #4d4c4c 30%, #878787 70%, #5f5c5c 100%)',
            'title' => '黑色渐变'
        )
    );

    // 创建 Metabox
    CSF::createMetabox('tf', array(
        'title' => '子比文章标题前标识',
        'post_type' => array('post', 'page', 'plate', 'forum_post'),
        'context' => 'advanced',
        'data_type' => 'unserialize',
    ));

    // 创建字段
    $fields = array();

    // 启用标识的开关
    $fields[] = array(
        'title' => __('开启标识'),
        'id' => 'mh_text',
        'type' => 'switcher',
        'default' => false
    );

    // 允许用户动态新增多个标识
    $fields[] = array(
        'dependency' => array('mh_text', '==', 'true'),
        'id' => 'badge_group',
        'type' => 'group',
        'title' => '标识设置',
        'fields' => array(
            array(
                'id' => 'badge_prefix_text',
                'type' => 'text',
                'title' => '前缀文字',
                'default' => ''
            ),
            array(
                'id' => 'badge_prefix_color',
                'type' => 'color',
                'title' => '前缀文字颜色',
                'default' => '#ffffff'
            ),
            array(
                'id' => 'tengfei_badge_style',
                'type' => 'palette',
                'title' => '标识背景样式',
                '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-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;')
                ),
                'default' => 'jb-purple'
            ),
            array(
                'id' => 'badge_bg_color',
                'type' => 'color',
                'title' => '自定义背景颜色（优先显示这个颜色）',
                'default' => ''
            )
        ),
        'max' => 5 // 限制最多 5 个标识，防止过多影响布局
    );

    // 创建配置区域
    CSF::createSection('tf', array('fields' => $fields));
}

最后一步就很简单了，就直接放css，放到：WP后台–>>子比主题–>>自定义CSS即可

.tengfei-title-badge {
    color: #fff;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    border: 1.5px solid #ccc;
    align-items: center;
    border-radius: 5px;
    padding: 0px 4px;
    margin-right: 3px;
    height: 19px;
    font-size: 12px;
    margin-top: 0px;
    top: -1px;
}
.tengfei-title-badge:after {
  position:absolute;
  content:" ";
  display:block;
  left:-100%;
  top:-5px;
  width:15px;
  height:145%;
  background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  animation:sweepTitle 3s ease-in-out infinite;
  transform:rotate(28deg);
}
@keyframes sweepTitle {
  0% {
  left:-100%;
}
100% {
  left:100%;
}
;}

版权声明 1 本站名称： 小妖客栈
2 本站网址：www.wangkay.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END