子比功能增强-发布文章自定义文章前缀申明

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

只需要在主题functions.php加入代码和自定义css就好，css是示例可以自己微调！使用教程

效果

移动端效果：

PHP代码

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代码

.ove_prefix, .ove_prefix1{
    font-size: 12px;
    padding: 0px 10px;
    height: 20px;
    color:#fff;
    text-align: center;
    border-radius: 7px 5px 8px 3px;
    line-height: 20px;
      margin-right: 5px;
  clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.item-heading{
  a{
      display: flex;
  }
}

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