文章标题添加前缀（2种）·置顶火苗美化·左上角3点美化-春眠不觉晓

1、子比主题 – 文章自定义前缀

介绍

发布文章时自定义文章前缀是一个非常实用的功能，它允许作者或编辑在文章标题前添加特定的文字或图像标签。这样的功能对于区分文章类型、提高文章的可识别度或者增加视觉吸引力都非常有帮助。接下来，我们将探讨如何使用这个功能以及它的主要特点。在优知新的网站看到的，但是修改主题文件就passl了，然后就有了下面的功能

图片

在WP编辑器里选择

代码

代码放在下func.php(没有创建一个)

CSF::createMetabox('DearLicy_titles', array(
    'title'     => '标题前缀',
    'post_type' => 'post',
    'context'   => 'advanced',
    'data_type' => 'unserialize',
    'priority'  => 'high',
));

CSF::createSection( 'DearLicy_titles', array(
    'fields' => array(
        array(
            'id'       => 'titles_moshi',
            'type'     => 'radio',
            'title'    => '模式选择',
            'desc'     => '选择图片或自定义文字',
            'inline'   => true,
            'options'  => array(
                'img'   => '图片',
                'text'  => '文字',
            ),
            'default' => 'img',  // 默认选择图片模式
        ),
        array(
            'id'      => 'text',
            'type'    => 'text',
            'title'   => '文字模式',
            'desc'    => '建议两个字',
            'dependency' => array( 'titles_moshi', '==', 'text' ),  // 依赖关系：当模式选择为文字时显示
        ),
        array(
            'id'      => 'text_bg_color',
            'type'    => 'palette',
            'title'   => '背景颜色',
            'desc'    => '部分颜色带有文字颜色，其余默认白色',
            'class'   => 'compact skin-color',
            'default' => "jb-vip2",
            'options' => CFS_Module::zib_palette(array(), array('jb')),
            'dependency' => array( 'titles_moshi', '==', 'text' ),  // 依赖关系：当模式选择为文字时显示
        ),
        array(
            'id'      => 'img',
            'type'    => 'palette',
            'title'   => '选择一个图片',
            'desc'    => '固定使用以下几款SVG图标',
            'class'   => 'compact skin-color',
            'default' => "jb-vip2",
            'options' => DearLicy_Module::DearLicy_imgtitle(),
            'dependency' => array( 'titles_moshi', '==', 'img' ),  // 依赖关系：当模式选择为图片时显示
        ),
    ),
));

class DearLicy_Module
{
    public static function DearLicy_imgtitle($palette = array())
    {
            $palette = array_merge($palette, array(
                'shice'    => array('url(https://www.xkzhi.com/zatu/shice.svg);width: 50px;'),
                'shoufa'    => array('url(https://www.xkzhi.com/zatu/shoufa.svg);width: 50px;'),
                'dujia'    => array('url(https://www.xkzhi.com/zatu/dujia.svg);width: 50px;'),
            ));
        return $palette;
    }

}

function apply_dearlicy_prefixes_to_title($title, $id = null) {
    // 只有在前端，并且非单个页面，才对标题进行更改
    if (!is_admin() && !is_single() && $id) {
        // 先获取meta box中的设置项
        $prefixes_setting = get_post_meta($id, 'titles_moshi', true);

        if($prefixes_setting == 'img') {
            $selected_img = get_post_meta($id, 'img', true);
            $img_url ='';
            switch ($selected_img) {
                case 'shice':
                    $img_url = 'https://www.xkzhi.com/zatu/shice.svg';
                    break;
                case 'shoufa':
                    $img_url = 'https://www.xkzhi.com/zatu/shoufa.svg';
                    break;
                case 'dujia':
                    $img_url = 'https://www.xkzhi.com/zatu/dujia.svg';
                    break;
            }
            
            if(!empty($img_url)) {
                $title = "<img src='$img_url' alt='$img_url' style=' height: 20px; pointer-events: none;margin-right: 3px;'/>" . $title;
            }
        } else {
            // 对保存的文字前缀进行处理
            $prefix_text = get_post_meta($id, 'text', true);
            $prefix_bg_color = get_post_meta($id, 'text_bg_color', true);
            if (!empty($prefix_text)) {
                $title = "<span class='DearLicy_prefix ". esc_attr($prefix_bg_color) ."'>" . esc_html($prefix_text) . "</span> " . $title;
            }
        }
    }
    return $title;
}
add_filter('the_title', 'apply_dearlicy_prefixes_to_title', 10, 2);

2、给子比列表文章的标题前添加一个可自定义文章前缀申明的美化代码(更新，适配移动端)

简介

布文章时自定义文章前缀是一个非常实用的功能，它允许作者或编辑在文章标题前添加特定的文字或图像标签。这样的功能对于区分文章类型、提高文章的可识别度或者增加视觉吸引力都非常有帮助。接下来，我们将探讨如何使用这个功能以及它的主要特点。在优知新的网站看到的，但是修改主题文件就pass了，然后就有了下面的功能

功能概览

图片[1]-子比列表文章的标题前添加一个可自定义文章前缀申明的美化代码(更新，适配移动端)

通过启用自定义文章前缀功能，用户可以：

添加文本前缀：在文章标题前添加自定义文本，例如“[推荐]”、“[热门]”等，来标明文章的特殊属性或类别。
使用图像作为前缀：除了文本，还可以选择一个小图标作为文章的前缀，使文章在列表中更加醒目。
自定义CSS样式：为每个前缀设定独立的CSS样式，确保前缀的显示效果与网站的整体设计风格保持一致。
灵活配置：通过后台设置，可以轻松地为文章添加或修改前缀，而无需直接编辑代码。

使用场景

图片[2]-子比列表文章的标题前添加一个可自定义文章前缀申明的美化代码(更新，适配移动端)

该功能非常适合内容丰富、分类细致的网站或博客，特别是在以下几种情况下：

内容突出：对于特别推荐的文章或必读内容，通过添加显眼的前缀或图标来吸引读者注意。
文章分类：利用不同的前缀或图标，对文章进行视觉分类，便于读者快速识别文章类型。
品牌塑造：选用符合品牌形象的图标作为前缀，增强品牌的视觉识别度。

操作指南

添加或选择前缀：根据需要添加新的文本前缀或从现有资源中选择一个图像作为前缀。所有的前缀都可以自定义样式，以匹配网站的整体外观。
应用到文章：编辑或撰写新的文章时，选择合适的前缀。预览文章，确认前缀显示效果符合预期。
发布：完成设置后，发布或更新文章。文章标题前将显示所选的前缀。

注意事项

样式调整：为确保前缀的显示效果与网站设计协调，可能需要一定的CSS知识来进行样式调整。
性能考虑：使用图像作为前缀时，注意选择适当大小的图片，避免影响页面加载速度。
兼容性测试：在多个设备和浏览器上测试前缀显示效果，确保所有用户都能获得良好的阅读体验在本篇教程中，我们将探索如何使用WordPress插件或主题功能来自定义文章标题前缀。这种自定义能力允许作者或编辑为文章添加特定的标签或图像，从而增强文章的可见性和吸引力。

功能概述

该功能通过在WordPress的后台编辑页面提供一个元盒（Meta Box），使用户能够：

为文章添加文本前缀，并可选地指定CSS类以自定义样式。
选择一个或多个预设图像作为文章标题的图像前缀。
输入额外的文本信息，该信息将显示在文章标题旁边。

使用步骤

主题自定义代码：加入你自己的css代码。
进入文章编辑界面：当你创建或编辑一个文章时，你会在侧边栏找到一个名为“自定义标题前缀”的元盒。
添加文本前缀：在提供的文本区域输入你想要的前缀文字，并可选地指定一个CSS类。例如，“紧急|red-highlight”可以表示将“紧急”作为文本前缀，并用“red-highlight”这个CSS类来加红色高亮样式。
选择图像前缀：下方会展示一系列预设的图像选项，你可以勾选一个或多个图像作为文章的图像前缀。这些图像可以是符号、徽标等，帮助读者快速识别文章的类型或主题。
输入额外信息：如果需要，在“新功能输入框”中输入任何额外信息。这段文本将在文章标题旁边显示，可用于提供作者注释、警告或其他说明。
保存并预览：完成上述所有设置后，保存或更新文章，然后前往文章预览页面查看效果。你应该能够看到文章标题前加上了自定义的文本和/或图像前缀，以及任何额外输入的文本信息。

功能优势

增强可见性：通过在文章标题前添加文本或图像前缀，可以使文章在列表或归档页中更加突出，从而提高点击率。
增强表现力：这个功能允许编辑以视觉上引人注意的方式传达文章的紧迫性、类型或情绪，比如使用不同颜色的标记表示文章的重要级别。
灵活性：支持文本和图像两种前缀类型，并允许通过CSS类进行样式定制，为用户提供了极大的灵活性。

代码添加

在fun.php加入代码即可，（如果没有就加在functions.php文件中）

/*文章前缀申明开始*/
// 注册Meta Box
function my_custom_prefixes_meta_box() {
    add_meta_box(
        'custom-title-prefixes', // Meta Box ID
        '自定义标题前缀', // Meta Box 标题
        'my_custom_prefixes_meta_box_callback', // 显示内容的回调函数
        'post', // 对哪种类型的内容生效
        'side' // 在哪个位置显示（'normal', 'side', 'advanced'）javascript:;
    );
}
add_action('add_meta_boxes', 'my_custom_prefixes_meta_box');
 
// 获取可用的图片选项
function get_my_image_options() {
    return array(
        '实测' => 'https://www.qlwq.cc/wp-content/uploads/2025/10/shice.svg',
        '亲测' => 'https://www.qlwq.cc/wp-content/uploads/2025/10/qince.svg',
        '原创' => 'https://www.qlwq.cc/wp-content/uploads/2025/10/yuanc.svg',
    );
}
 
// Meta Box内容的回调函数
function my_custom_prefixes_meta_box_callback($post) {
    wp_nonce_field('custom_title_prefix_save', 'custom_title_prefix_nonce');
 
    // 获取已保存的值
    $saved_text_data = get_post_meta($post->ID, '_dynamic_title_prefixes', true);
    $saved_image_names = get_post_meta($post->ID, '_selected_image_names', true);
    if (!is_array($saved_image_names)) {
        $saved_image_names = [];
    }
 
    // 文字前缀界面
    echo '<div id="text_prefixes_container">
            <p>使用以下格式添加文字前缀和CSS（一行一个）：<br/>例：测试|ove_prefix</p>
            <textarea name="dynamic_title_prefixes" style="width: 100%;" rows="5">'. esc_textarea($saved_text_data) .'</textarea>
          </div>';
 
    // 图像选择区
    $options = get_my_image_options();
    echo '<div id="image_selection_container" style="margin-top: 20px;">
            <p>选择图像前缀：</p>';
    foreach ($options as $name => $url) {
        $checked = in_array($name, $saved_image_names) ? ' checked' : '';
        echo "<label><input type='checkbox' name='image_name_selection[]' value='".esc_attr($name)."'$checked> ".esc_html($name)."</label><br>";
    }
    echo '</div>';
 
    
}
 
// 保存Meta Box中的数据
function save_custom_title_prefixes_data($post_id) {
    if (!isset($_POST['custom_title_prefix_nonce']) ||
        !wp_verify_nonce($_POST['custom_title_prefix_nonce'], 'custom_title_prefix_save') ||
        (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) ||
        !current_user_can('edit_post', $post_id)) {
        return;
    }
 
    // 保存文本前缀
    if (isset($_POST['dynamic_title_prefixes'])) {
        update_post_meta($post_id, '_dynamic_title_prefixes', sanitize_textarea_field($_POST['dynamic_title_prefixes']));
    }
    
    // 保存选择的图片名称
    if (isset($_POST['image_name_selection'])) {
        update_post_meta($post_id, '_selected_image_names', $_POST['image_name_selection']);
    } else {
        delete_post_meta($post_id, '_selected_image_names');
    }
 
    
}
add_action('save_post', 'save_custom_title_prefixes_data');
 
// 显示标题时应用前缀和自定义CSS
// 显示标题时应用前缀和自定义CSS
function apply_custom_prefixes_to_title($title, $id = null) {
    if (!is_admin() && !is_single() && $id) {
        // 处理文本前缀
        $prefixes_str = get_post_meta($id, '_dynamic_title_prefixes', true);
        $prefixes = explode("\n", $prefixes_str);
        foreach ($prefixes as $prefix) {
            list($prefix_text, $css_class) = array_map('trim', explode('|', $prefix));
            if (!empty($prefix_text)) {
                $title = "<span class='". esc_attr($css_class) ."'>" . esc_html($prefix_text) . "</span> " . $title;
            }
        }
 
        // 处理图片前缀
        $selected_image_names = get_post_meta($id, '_selected_image_names', true);
        if (!empty($selected_image_names) && is_array($selected_image_names)) {
            $options = get_my_image_options();
            foreach ($selected_image_names as $name) {
                if (isset($options[$name])) {
                    $url = esc_url($options[$name]);
                    $title = "<img src='$url' alt='Prefix Image' style=' height: 20px; pointer-events: none;'/>" . $title;
                }
            }
        }
 
        
    }
    return $title;
}
add_filter('the_title', 'apply_custom_prefixes_to_title', 10, 2);
  /*文章前缀申明结束*/

自定义css示例：加在主题自定义代码即可

/*文章前缀申明开始*/
@keyframes sweepTitle {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}
.ove_prefix, .ove_prefix1{
        color: #fff;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 4px;
    margin-right: 3px;
    height: 19px;
    font-size: 12px;
           clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.ove_prefix:after, .ove_prefix1: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);
}

.ove_prefix{ background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); }
.ove_prefix1{ background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); }

  /*文章前缀申明结束*/

结语

通过灵活运用“自定义文章前缀”功能，WordPress站点的编辑和作者可以有效地提升他们内容的吸引力和表现力。无论是通过文字还是图像，正确的前缀都能够使文章标题更加生动、信息量更大。

3、首页文章左上角动态置顶美化

在子比主题自定义代码→自定义css中放入以下代码：

4、子比美化 – 文章卡片添加三圆点美化

在 WordPress 的子比主题 zibll 的使用过程中，为了让网站页面更具个性化与独特性，我们可以通过一些简单的代码操作来实现特定的美化效果。本教程将详细介绍如何在文章卡片列表中添加三个圆点装饰，为你的网站增添别样风格。

效果展示：

操作步骤

找到代码添加位置：登录 WordPress 网站后台，找到 “子比主题设置” 选项。进入 “子比主题设置” 后，依次点击 “全局功能”→“自定义代码”→“自定义 CSS 样式”，这里就是我们添加代码的地方。
添加文章列表卡片美化代码：在 “自定义 CSS 样式” 区域，添加以下代码来美化文章列表卡片并添加三圆点效果：
```
/* 文章列表卡片3个小圆圈样式美化  开始 */
.posts-item.card {
  padding: 35px 10px 10px 10px!important;
}
.posts-item {
  position: relative!important;
}
.posts-item.card::before {
  content: "";
  display: block;
  background: #fc625d;
  top: 13px;
  left: 15px;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
  margin: 0px 2px -7px;
  z-index: 1;
  position: absolute;
}
/*文章列表卡片3个小圆圈样式美化 结束*/
```
解释：.posts-item.card选择器用于设置文章卡片的内边距，padding属性的值35px 10px 10px 10px表示上内边距为 35 像素，左右内边距为 10 像素，下内边距为 10 像素，!important声明确保该样式优先级最高。.posts-item选择器将其定位设置为相对定位，为后续的绝对定位元素提供参考。.posts-item.card::before伪元素用于创建三圆点效果，content: ""表示该伪元素内容为空，display: block使其成为块级元素以便设置样式，background设置背景颜色为#fc625d（一种红色调），top和left确定圆点在卡片内的位置，border-radius: 50%让圆点呈现圆形，width和height设置圆点大小为 9 像素，box-shadow通过添加阴影模拟出另外两个圆点，颜色分别为#fdbc40（黄色调）和#35cd4b（绿色调），margin调整圆点的外边距，z-index: 1确保圆点显示在其他元素之上，position: absolute将圆点绝对定位

1、本网站名称：春眠不觉晓
2、本站永久网址：https://www.qlwq.cc

3、本站文章内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系Q/V：775182000。

4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

6、本站资源大多存储在云盘，如发现链接失效,请告诉我们，我们会第一时间更新。