基于墨星博客文章顶部信息4.0美化（原版默认蓝色）升级为随机彩色|风雪源码

本来想着免费的，但是看一款美化，还差点意思，委屈各位了。

感谢墨星博客的大格局，多支持墨星博客的网站，有你真好！

第一版教程代码

<?php
/**
 * Plugin Name:墨星博客文章页顶部信息插件v4.0
 * Plugin URI: https://moxingbk.com
 * Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
 * Version: 4.0
 * Author: 墨星博客
 * Author URI:https://moxingbk.com*/

 add_action('csf_loaded','moxing_top_info_new');
 function moxing_top_info_new() {
     if (class_exists('CSF')) {
         $prefix ='moxing_top_info';
         CSF::createOptions($prefix, array(
            'menu_title' => '墨星博客顶部信息',
            'menu_slug' => $prefix,
             'framework_title' => '文章页顶部信息设置',
            'show_in_customizer' => true,
             'theme' => 'light',
             'footer_credit' => '<link rel="stylesheet" type="text/css" href="./csf.style.css">',
         ));
         CSF::createSection($prefix, array(
             'id' =>'mx_top_info',
             'title' => '开始使用',
             'icon' => 'fa fa-gavel',
         ));
         CSF::createSection($prefix, array(
             'parent' =>'mx_top_info',
             'title' => '样式设置',
             'icon' => 'fa fa-cogs',
             'fields' => array(
                 array(
                     'type' =>'submessage',
                    'style' => 'warning',
                     'content' => '<p>若要使用点击作者跳首页，请先查看固定链接中是否有index.php 若存在则删除index.php</p>',
                 ),
                 array(
                     'title' => '墨星博客文章顶部信息',
                     'label' => '开启后网站文章页顶部显示文章信息',
                     'default' => false,
                     'type' => "switcher",
                     'id' =>'mx_top',
                 ),
                 array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'bg_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'bg_color',
                             'title' => '背景颜色（当前已改为随机颜色，此设置暂不生效）',
                             'default' => '#425aef',
                             'type' => 'color',
                         ),
                     ),
                 ),
                    array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'text_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'text_color',
                             'title' => '文字颜色',
                             'default' => '#b3bdf9',
                             'type' => 'color',
                         ),
                     ),
                 ),
                 array(
                     'title'                  => '文章属性设置',
                    'subtitle'               => '古腾堡编辑器文章属性',
                     'id'                     => 'footer_tabbar',
                     'type'                   => 'group',
                     'accordion_title_number' => '1',
                    'sanitize'               => false,
                     'button_title'           => '添加属性',
                     'default'                => array(
                         array(
                             'type'      => 'yuanchuang',
                             'text'      => '原创',
                         ),
                         array(
                             'type'      => 'zhuanzai',
                             'text'      => '转载',
                         ),
                     ),
                     'fields'     => array(
                         array(
                             'title'   => '属性名称',
                             'id'      => 'text',
                             'type'    => 'text',
                             'default' => '',
                         ),
                     ),
                 ),
             ),
         ));
 
     }
 }
function mx_top($option = '', $default = null) {
    $options = get_option('moxing_top_info');
    return (isset($options[$option]))? $options[$option] : $default;
}

// 新增：生成随机十六进制颜色的函数
function get_random_background_color() {
    // 生成0-255的RGB随机值
    $r = mt_rand(0, 255);
    $g = mt_rand(0, 255);
    $b = mt_rand(0, 255);
    // 转为十六进制颜色码（如#FF5733）
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

define('moxing_top_info_new_url', plugin_dir_url(__FILE__));
function moxing_init() {
    if (mx_top('mx_top')) {
        add_action('wp_head','moxing_head_info_style_css', 10);
        add_action('wp_head','moxing_head_info_html', 15);
        add_action('add_meta_boxes','my_custom_prefixes_meta_box', 10);
        add_action('save_post','save_custom_prefixes_meta_box_data');
    }
}
add_action('init','moxing_init');

function moxing_head_info_style_css() {
    if (is_singular('post')){
        wp_enqueue_style('font-awesome', 'https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
        wp_enqueue_style('moxing-icon-font', plugin_dir_url(__FILE__) . 'iconfont.css');
        $css = "
.article-title,.breadcrumb{display:none;}.head_box_mx{color:white;position:relative;text-align:center;box-sizing:border-box;margin-top:-20px;margin-bottom:20px;}.moxing_head_info_post_title{color:#fff;font-weight:700;line-height:1.2;text-align:center;margin:1rem 0 1rem 0 !important;-webkit-line-clamp:2;overflow:hidden;}.category>i{margin-right:5px;margin-top:3px;}.mxbk_tags-container{display:flex;align-items:center;justify-content:center;margin-bottom:20px;}.mulu_one_two{display:flex;align-items:center;justify-content:center;}.mulu_one_two span{display:inline-flex;align-items:flex-start;background-color:rgba(255,255,250,0.2);color:white;padding:7px 10px;margin-right:5px;border-radius:10px;font-weight:bold;font-size:14px;cursor:pointer;}.mulu_one_two span:hover{background-color:#fff;color:var(--focus-color) !important;transition:background-color 0.3s ease,color 0.3s ease;}.tags{display:flex;align-items:center;margin-left:20px;}.tags span{border-radius:10px;color:white;opacity:.8;padding:7px 10px;margin-right:5px;font-weight:bold;transition:background-color 0.3s ease,color 0.3s ease;cursor:pointer;}.tags span:hover{background-color:rgba(255,255,255,0.3);color:white;padding:7px 10px;}.mx_footer_meta{display:flex;align-items:center;color:var(--text_color);font-size:14px;flex-wrap:wrap;margin-top:30px;justify-content:center;}.mx_footer_meta span{margin-right:5px;}.tags span::before{font-size:14px;content:'#';color:white;font-weight:bold;margin-right:5px;opacity:.4;}.mx_waves{position:absolute;bottom:0;left:0;width:100%;height:8vh;margin-bottom:0;min-height:50px;max-height:100px;z-index:100;overflow:hidden;}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;}@keyframes move-forever{0%{transform:translate3d(-90px,0,0);}100%{transform:translate3d(85px,0,0);}}@media screen and (max-width:767px){.head_box_mx{padding:20px;}.mxbk_tags-container{flex-direction:column;align-items:center;justify-content:center;}.moxing_head_info_post_title{text-align:center;margin:10px 0;}.mx_footer_meta{justify-content:center;padding:0 5px;margin-top:10px;}.tags{display:none;}.moxing_head_info_post_title{font-size:2rem;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:768px) and (max-width:1024px){.head_box_mx{padding:50px;width:100%;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:1025px){.head_box_mx{padding:100px;width:100%;height:50vh;}.mx_footer_meta{gap:5px;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:50vh;}}@keyframes fade-in-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.animate-fade-in-up{animation:fade-in-up 0.5s ease-out forwards;animation-delay:0.3s;opacity:0;}.mx_footer_meta a{color:var(--text_color);text-decoration:none;}.marrig{margin-right:5px}.moxing_background{position:absolute;left:0;right:0;top:0;background-color:var(--bg_color);}.moxing_background .b-wrap{position:absolute;left:50%;right:0;top:0;bottom:0;overflow:hidden;}.moxing_background .img{display:block;position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);-webkit-filter:blur(4px);filter:blur(4px);}.moxing_background img{position:absolute;right:0;top:0;width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);transition:transform 1s ease;}.post-header-7e7 .moxing_background .b-wrap::after{background-image:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);}.moxing_background .b-wrap::after{content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);";
        wp_add_inline_style('moxing-icon-font', $css);
    }
}


function moxing_head_info_html() {
    if (is_singular('post')){
        $post = get_post();
        $content = $post->post_content;
        $wpm = 200;
        $clean_content = strip_shortcodes($content);
        $clean_content = strip_tags($clean_content);
        $word_count = mb_strlen($clean_content, 'UTF8');
        $read_time = ceil($word_count / $wpm);
        $date = get_the_date('Y-m-d');
        $author = get_the_author();
        $author_id = get_the_author_meta('ID');
        $property = get_post_meta(get_the_ID(), 'article_property', true);
        $property_text = $property? $property : '热门';

        $tags = get_the_tags();
        $tags_html = "";
        if ($tags) {
            shuffle($tags);
            $tags = array_slice($tags, 0, 2);
            foreach ($tags as $tag) {
                $tags_html.= '<span class="tag">'. esc_html($tag->name). '</span> ';
            }
        }
        $categories = get_the_category();
        $category_html = "";
        if (!empty($categories)) {
            $category = $categories[0];
            $category_html = '<span class="category"><i class="fa fa-folder-open-o"></i>'. esc_html($category->name). '</span> ';
        }

        // 关键修改：获取原有配置后，用随机颜色覆盖
        $bg_color = mx_top('bg_color');
        $random_bg_color = get_random_background_color(); // 调用随机颜色函数
        $bg_color['bg_color'] = $random_bg_color; // 替换为随机颜色

        $text_color = mx_top('text_color');
        ob_start();
?>
        <style>
        :root{
            --bg_color: <?php echo $bg_color['bg_color'];?>;
            --text_color: <?php echo $text_color['text_color'];?>;
        }
        </style>
        <div class="head_box_mx">
            <div class="moxing_background b bg_1">
                <div class="b-wrap">
                    <i class="img">
                        <?php
                        $lazy_attr = zib_is_lazy('lazy_other', true)? 'class="fit-cover lazyload" src="'. zib_get_lazy_thumb(). '" data-' : 'class="fit-cover"';
                        $video_pic =!empty($pay_mate['video_pic'])? '<img '. $lazy_attr.'src="'. esc_attr($pay_mate['video_pic']). '" alt="付费视频-'. esc_attr($pay_title). '">' : zib_post_thumbnail();
                        $post_thumbnail = $video_pic;
                        $post_thumbnail.= '<div class="absolute graphic-mask" style="opacity: 0.2;"></div>';
                        $post_thumbnail.= '<div class="abs-center text-center"><i class="fa fa-play-circle-o fa-4x opacity8" aria-hidden="true"></i></div>';
                        $post_thumbnail = zib_post_thumbnail();
                        echo $post_thumbnail;
                     ?>
                    </i>
                </div>
            </div>
            <div class="mxbk_tags-container animate-fade-in-up">
                <div class="mulu_one_two">
                    <span><?php echo $property_text;?></span>
                    <a href="<?php echo get_category_link( get_cat_ID( $category_html ) );?>"><?php echo $category_html;?></a>
                </div>
            <div class="tags"><?php echo $tags_html;?></div>
            </div>
            <h1 class="moxing_head_info_post_title animate-fade-in-up"><?php echo get_the_title();?></h1>
            <div class="mx_footer_meta animate-fade-in-up">
                <span class="post-meta-separator"></span>
                <i class="fa fa-file-text-o" title="文字总数"></i><span class="post-meta-label"><?php echo $word_count;?>字</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-clock-o" title="阅读耗时"></i><span class="post-meta-label"><?php echo $read_time;?>分钟</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-calendar" title="发布时间"></i><span class="post-meta-label"><?php echo $date;?></span>
                <span class="post-meta-separator"></span>
                <a href="<?php echo home_url('/author/').$author_id;?>" class="author-link"><i class="fa fa-user marrig" title="发布作者"></i><span class="post-meta-label"><?php echo $author;?></span></a>
                <span class="post-meta-separator"></span>
                <i class="fa fa-fire" title="热度"></i><span class="post-meta-label"><?php echo get_post_view_count('', '');?></span>
                <span class="post-meta-separator"></span>
                <a href="#respond" class="smooth-scroll"><i class="fa fa-comment-o marrig" title="评论数"></i><span class="post-meta-label"><?php echo get_post_comment_count('', '');?></span></a>
                <i class="fa fa-bookmark" title="文章发布数量"></i><span class="post-meta-label">该作者已发布<?php the_author_posts(); ?>篇文章</span>
                <span class="post-meta-separator"></span>
            </div>
            <div class="mx_waves">
                <svg class="mx_waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                    <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                    </defs>
                    <g class="parallax">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--body-bg-color)"></use>
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--body-bg-color)" style="opacity:.7"></use>
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--body-bg-color)" style="opacity:.5"></use>
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--body-bg-color)" style="opacity:.3"></use>
                    </g>
                </svg>
            </div>
        </div>
        <?php
        echo '<script>
                jQuery(document).ready(function($) {
                    $(".smooth-scroll").click(function(event) {
                        event.preventDefault();
                        var target = $(this.hash);
                        $("html, body").animate({
                            scrollTop: target.offset().top
                        }, 800); 
                    });
                    $(".author-link").click(function(event) {
                        event.preventDefault();
                        window.location.href = $(this).attr("href");
                    });
                });
            </script>';
    }
}

function my_custom_prefixes_meta_box() {
    add_meta_box('custom-title-prefixes', '文章属性','my_custom_prefixes_meta_box_callback', 'post','side');
}

function my_custom_prefixes_meta_box_callback($post) {
    $article_properties = get_option('moxing_top_info')['footer_tabbar']?? [];
    $current_property = get_post_meta($post->ID, 'article_property', true);

    foreach ($article_properties as $index => $property) {
        $type = $property['type']?? '';
        $text = $property['text']?? ($type === 'yuanchuang'? '原创' : ($type === 'zhuanzai'? '转载' : ''));
        echo '<input type="radio" id="article_property_'. esc_attr($index). '" name="article_property" value="'. esc_attr($text). '" '. checked($current_property, $text, false). '>';
        echo '<label for="article_property_'. esc_attr($index). '">'. esc_html($text). '</label><br>';
    }

    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', "
        jQuery(document).ready(function ($) {
            $('input[name=article_property]').change(function () {
            });
        });
    ");
}

function save_custom_prefixes_meta_box_data($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['article_property'])) {
        $new_property = sanitize_text_field($_POST['article_property']);
        update_post_meta($post_id, 'article_property', $new_property);
    } else {
        delete_post_meta($post_id, 'article_property');
    }
}

第二版：柔和版随机颜色函数

界面预览

感觉这版的字体都能看清了。

<?php
/**
 /**
 * Plugin Name:墨星博客文章页顶部信息插件v4.0
 * Plugin URI: https://moxingbk.com
 * Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
 * Version: 4.0
 * Author: 墨星博客
 * Author URI: https://moxingbk.com
 */

 add_action('csf_loaded','moxing_top_info_new');
 function moxing_top_info_new() {
     if (class_exists('CSF')) {
         $prefix ='moxing_top_info';
         CSF::createOptions($prefix, array(
            'menu_title' => '墨星博客顶部信息',
            'menu_slug' => $prefix,
             'framework_title' => '文章页顶部信息设置',
            'show_in_customizer' => true,
             'theme' => 'light',
             'footer_credit' => '<link rel="stylesheet" type="text/css" href="./csf.style.css">',
         ));
         CSF::createSection($prefix, array(
             'id' =>'mx_top_info',
             'title' => '开始使用',
             'icon' => 'fa fa-gavel',
         ));
         CSF::createSection($prefix, array(
             'parent' =>'mx_top_info',
             'title' => '样式设置',
             'icon' => 'fa fa-cogs',
             'fields' => array(
                 array(
                     'type' =>'submessage',
                    'style' => 'warning',
                     'content' => '<p>若要使用点击作者跳首页，请先查看固定链接中是否有index.php 若存在则删除index.php</p>',
                 ),
                 array(
                     'title' => '墨星博客文章顶部信息',
                     'label' => '开启后网站文章页顶部显示文章信息',
                     'default' => false,
                     'type' => "switcher",
                     'id' =>'mx_top',
                 ),
                 array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'bg_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'bg_color',
                             'title' => '背景颜色（当前已改为柔和随机颜色，此设置暂不生效）',
                             'default' => '#425aef',
                             'type' => 'color',
                         ),
                     ),
                 ),
                    array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'text_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'text_color',
                             'title' => '文字颜色',
                             'default' => '#b3bdf9',
                             'type' => 'color',
                         ),
                     ),
                 ),
                 array(
                     'title'                  => '文章属性设置',
                    'subtitle'               => '古腾堡编辑器文章属性',
                     'id'                     => 'footer_tabbar',
                     'type'                   => 'group',
                     'accordion_title_number' => '1',
                    'sanitize'               => false,
                     'button_title'           => '添加属性',
                     'default'                => array(
                         array(
                             'type'      => 'yuanchuang',
                             'text'      => '原创',
                         ),
                         array(
                             'type'      => 'zhuanzai',
                             'text'      => '转载',
                         ),
                     ),
                     'fields'     => array(
                         array(
                             'title'   => '属性名称',
                             'id'      => 'text',
                             'type'    => 'text',
                             'default' => '',
                         ),
                     ),
                 ),
             ),
         ));
 
     }
 }
function mx_top($option = '', $default = null) {
    $options = get_option('moxing_top_info');
    return (isset($options[$option]))? $options[$option] : $default;
}

// 柔和版随机颜色生成函数
function get_soft_random_background_color() {
    // 使用HSV色彩模型生成柔和颜色
    // 色相(H)：0-360度随机
    // 饱和度(S)：30%-60%（保证颜色不过于鲜艳）
    // 明度(V)：60%-80%（保证颜色不暗也不刺眼）
    
    $hue = mt_rand(0, 360); // 色相：随机
    $saturation = mt_rand(30, 60) / 100; // 饱和度：30%-60%
    $value = mt_rand(60, 80) / 100; // 明度：60%-80%
    
    // HSV转RGB
    $r = $g = $b = 0;
    
    $i = floor($hue / 60);
    $f = $hue / 60 - $i;
    $p = $value * (1 - $saturation);
    $q = $value * (1 - $f * $saturation);
    $t = $value * (1 - (1 - $f) * $saturation);
    
    switch ($i % 6) {
        case 0: $r = $value; $g = $t; $b = $p; break;
        case 1: $r = $q; $g = $value; $b = $p; break;
        case 2: $r = $p; $g = $value; $b = $t; break;
        case 3: $r = $p; $g = $q; $b = $value; break;
        case 4: $r = $t; $g = $p; $b = $value; break;
        case 5: $r = $value; $g = $p; $b = $q; break;
    }
    
    // 转换为0-255的RGB值并格式化为十六进制
    return sprintf(
        '#%02X%02X%02X',
        round($r * 255),
        round($g * 255),
        round($b * 255)
    );
}

define('moxing_top_info_new_url', plugin_dir_url(__FILE__));
function moxing_init() {
    if (mx_top('mx_top')) {
        add_action('wp_head','moxing_head_info_style_css', 10);
        add_action('wp_head','moxing_head_info_html', 15);
        add_action('add_meta_boxes','my_custom_prefixes_meta_box', 10);
        add_action('save_post','save_custom_prefixes_meta_box_data');
    }
}
add_action('init','moxing_init');

function moxing_head_info_style_css() {
    if (is_singular('post')){
        wp_enqueue_style('font-awesome', 'https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
        wp_enqueue_style('moxing-icon-font', plugin_dir_url(__FILE__) . 'iconfont.css');
        $css = "
.article-title,.breadcrumb{display:none;}.head_box_mx{color:white;position:relative;text-align:center;box-sizing:border-box;margin-top:-20px;margin-bottom:20px;}.moxing_head_info_post_title{color:#fff;font-weight:700;line-height:1.2;text-align:center;margin:1rem 0 1rem 0 !important;-webkit-line-clamp:2;overflow:hidden;}.category>i{margin-right:5px;margin-top:3px;}.mxbk_tags-container{display:flex;align-items:center;justify-content:center;margin-bottom:20px;}.mulu_one_two{display:flex;align-items:center;justify-content:center;}.mulu_one_two span{display:inline-flex;align-items:flex-start;background-color:rgba(255,255,250,0.2);color:white;padding:7px 10px;margin-right:5px;border-radius:10px;font-weight:bold;font-size:14px;cursor:pointer;}.mulu_one_two span:hover{background-color:#fff;color:var(--focus-color) !important;transition:background-color 0.3s ease,color 0.3s ease;}.tags{display:flex;align-items:center;margin-left:20px;}.tags span{border-radius:10px;color:white;opacity:.8;padding:7px 10px;margin-right:5px;font-weight:bold;transition:background-color 0.3s ease,color 0.3s ease;cursor:pointer;}.tags span:hover{background-color:rgba(255,255,255,0.3);color:white;padding:7px 10px;}.mx_footer_meta{display:flex;align-items:center;color:var(--text_color);font-size:14px;flex-wrap:wrap;margin-top:30px;justify-content:center;}.mx_footer_meta span{margin-right:5px;}.tags span::before{font-size:14px;content:'#';color:white;font-weight:bold;margin-right:5px;opacity:.4;}.mx_waves{position:absolute;bottom:0;left:0;width:100%;height:8vh;margin-bottom:0;min-height:50px;max-height:100px;z-index:100;overflow:hidden;}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;}@keyframes move-forever{0%{transform:translate3d(-90px,0,0);}100%{transform:translate3d(85px,0,0);}}@media screen and (max-width:767px){.head_box_mx{padding:20px;}.mxbk_tags-container{flex-direction:column;align-items:center;justify-content:center;}.moxing_head_info_post_title{text-align:center;margin:10px 0;}.mx_footer_meta{justify-content:center;padding:0 5px;margin-top:10px;}.tags{display:none;}.moxing_head_info_post_title{font-size:2rem;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:768px) and (max-width:1024px){.head_box_mx{padding:50px;width:100%;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:1025px){.head_box_mx{padding:100px;width:100%;height:50vh;}.mx_footer_meta{gap:5px;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:50vh;}}@keyframes fade-in-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.animate-fade-in-up{animation:fade-in-up 0.5s ease-out forwards;animation-delay:0.3s;opacity:0;}.mx_footer_meta a{color:var(--text_color);text-decoration:none;}.marrig{margin-right:5px}.moxing_background{position:absolute;left:0;right:0;top:0;background-color:var(--bg_color);}.moxing_background .b-wrap{position:absolute;left:50%;right:0;top:0;bottom:0;overflow:hidden;}.moxing_background .img{display:block;position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);-webkit-filter:blur(4px);filter:blur(4px);}.moxing_background img{position:absolute;right:0;top:0;width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);transition:transform 1s ease;}.post-header-7e7 .moxing_background .b-wrap::after{background-image:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);}.moxing_background .b-wrap::after{content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);";
        wp_add_inline_style('moxing-icon-font', $css);
    }
}


function moxing_head_info_html() {
    if (is_singular('post')){
        $post = get_post();
        $content = $post->post_content;
        $wpm = 200;
        $clean_content = strip_shortcodes($content);
        $clean_content = strip_tags($clean_content);
        $word_count = mb_strlen($clean_content, 'UTF8');
        $read_time = ceil($word_count / $wpm);
        $date = get_the_date('Y-m-d');
        $author = get_the_author();
        $author_id = get_the_author_meta('ID');
        $property = get_post_meta(get_the_ID(), 'article_property', true);
        $property_text = $property? $property : '热门';

        $tags = get_the_tags();
        $tags_html = "";
        if ($tags) {
            shuffle($tags);
            $tags = array_slice($tags, 0, 2);
            foreach ($tags as $tag) {
                $tags_html.= '<span class="tag">'. esc_html($tag->name). '</span> ';
            }
        }
        $categories = get_the_category();
        $category_html = "";
        if (!empty($categories)) {
            $category = $categories[0];
            $category_html = '<span class="category"><i class="fa fa-folder-open-o"></i>'. esc_html($category->name). '</span> ';
        }

        // 使用柔和版随机颜色
        $bg_color = mx_top('bg_color');
        $soft_random_bg_color = get_soft_random_background_color(); // 调用柔和随机颜色函数
        $bg_color['bg_color'] = $soft_random_bg_color;

        $text_color = mx_top('text_color');
        ob_start();
?>
        <style>
        :root{
            --bg_color: <?php echo $bg_color['bg_color'];?>;
            --text_color: <?php echo $text_color['text_color'];?>;
        }
        </style>
        <div class="head_box_mx">
            <div class="moxing_background b bg_1">
                <div class="b-wrap">
                    <i class="img">
                        <?php
                        $lazy_attr = zib_is_lazy('lazy_other', true)? 'class="fit-cover lazyload" src="'. zib_get_lazy_thumb(). '" data-' : 'class="fit-cover"';
                        $video_pic =!empty($pay_mate['video_pic'])? '<img '. $lazy_attr.'src="'. esc_attr($pay_mate['video_pic']). '" alt="付费视频-'. esc_attr($pay_title). '">' : zib_post_thumbnail();
                        $post_thumbnail = $video_pic;
                        $post_thumbnail.= '<div class="absolute graphic-mask" style="opacity: 0.2;"></div>';
                        $post_thumbnail.= '<div class="abs-center text-center"><i class="fa fa-play-circle-o fa-4x opacity8" aria-hidden="true"></i></div>';
                        $post_thumbnail = zib_post_thumbnail();
                        echo $post_thumbnail;
                     ?>
                    </i>
                </div>
            </div>
            <div class="mxbk_tags-container animate-fade-in-up">
                <div class="mulu_one_two">
                    <span><?php echo $property_text;?></span>
                    <a href="<?php echo get_category_link( get_cat_ID( $category_html ) );?>"><?php echo $category_html;?></a>
                </div>
            <div class="tags"><?php echo $tags_html;?></div>
            </div>
            <h1 class="moxing_head_info_post_title animate-fade-in-up"><?php echo get_the_title();?></h1>
            <div class="mx_footer_meta animate-fade-in-up">
                <span class="post-meta-separator"></span>
                <i class="fa fa-file-text-o" title="文字总数"></i><span class="post-meta-label"><?php echo $word_count;?>字</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-clock-o" title="阅读耗时"></i><span class="post-meta-label"><?php echo $read_time;?>分钟</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-calendar" title="发布时间"></i><span class="post-meta-label"><?php echo $date;?></span>
                <span class="post-meta-separator"></span>
                <a href="<?php echo home_url('/author/').$author_id;?>" class="author-link"><i class="fa fa-user marrig" title="发布作者"></i><span class="post-meta-label"><?php echo $author;?></span></a>
                <span class="post-meta-separator"></span>
                <i class="fa fa-fire" title="热度"></i><span class="post-meta-label"><?php echo get_post_view_count('', '');?></span>
                <span class="post-meta-separator"></span>
                <a href="#respond" class="smooth-scroll"><i class="fa fa-comment-o marrig" title="评论数"></i><span class="post-meta-label"><?php echo get_post_comment_count('', '');?></span></a>
                <i class="fa fa-bookmark" title="文章发布数量"></i><span class="post-meta-label">该作者已发布<?php the_author_posts(); ?>篇文章</span>
                <span class="post-meta-separator"></span>
            </div>
            <div class="mx_waves">
                <svg class="mx_waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                    <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                    </defs>
                    <g class="parallax">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--body-bg-color)"></use>
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--body-bg-color)" style="opacity:.7"></use>
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--body-bg-color)" style="opacity:.5"></use>
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--body-bg-color)" style="opacity:.3"></use>
                    </g>
                </svg>
            </div>
        </div>
        <?php
        echo '<script>
                jQuery(document).ready(function($) {
                    $(".smooth-scroll").click(function(event) {
                        event.preventDefault();
                        var target = $(this.hash);
                        $("html, body").animate({
                            scrollTop: target.offset().top
                        }, 800); 
                    });
                    $(".author-link").click(function(event) {
                        event.preventDefault();
                        window.location.href = $(this).attr("href");
                    });
                });
            </script>';
    }
}

function my_custom_prefixes_meta_box() {
    add_meta_box('custom-title-prefixes', '文章属性','my_custom_prefixes_meta_box_callback', 'post','side');
}

function my_custom_prefixes_meta_box_callback($post) {
    $article_properties = get_option('moxing_top_info')['footer_tabbar']?? [];
    $current_property = get_post_meta($post->ID, 'article_property', true);

    foreach ($article_properties as $index => $property) {
        $type = $property['type']?? '';
        $text = $property['text']?? ($type === 'yuanchuang'? '原创' : ($type === 'zhuanzai'? '转载' : ''));
        echo '<input type="radio" id="article_property_'. esc_attr($index). '" name="article_property" value="'. esc_attr($text). '" '. checked($current_property, $text, false). '>';
        echo '<label for="article_property_'. esc_attr($index). '">'. esc_html($text). '</label><br>';
    }

    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', "
        jQuery(document).ready(function ($) {
            $('input[name=article_property]').change(function () {
            });
        });
    ");
}

function save_custom_prefixes_meta_box_data($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['article_property'])) {
        $new_property = sanitize_text_field($_POST['article_property']);
        update_post_meta($post_id, 'article_property', $new_property);
    } else {
        delete_post_meta($post_id, 'article_property');
    }
}

第三版：纯白色字体

界面预览

这样基本够用了

<?php
/**
 /**
 * Plugin Name:墨星博客文章页顶部信息插件v4.0
 * Plugin URI: https://moxingbk.com
 * Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
 * Version: 4.0
 * Author: 墨星博客
 * Author URI: https://moxingbk.com
 */

 add_action('csf_loaded','moxing_top_info_new');
 function moxing_top_info_new() {
     if (class_exists('CSF')) {
         $prefix ='moxing_top_info';
         CSF::createOptions($prefix, array(
            'menu_title' => '墨星博客顶部信息',
            'menu_slug' => $prefix,
             'framework_title' => '文章页顶部信息设置',
            'show_in_customizer' => true,
             'theme' => 'light',
             'footer_credit' => '<link rel="stylesheet" type="text/css" href="./csf.style.css">',
         ));
         CSF::createSection($prefix, array(
             'id' =>'mx_top_info',
             'title' => '开始使用',
             'icon' => 'fa fa-gavel',
         ));
         CSF::createSection($prefix, array(
             'parent' =>'mx_top_info',
             'title' => '样式设置',
             'icon' => 'fa fa-cogs',
             'fields' => array(
                 array(
                     'type' =>'submessage',
                    'style' => 'warning',
                     'content' => '<p>若要使用点击作者跳首页，请先查看固定链接中是否有index.php 若存在则删除index.php</p>',
                 ),
                 array(
                     'title' => '墨星博客文章顶部信息',
                     'label' => '开启后网站文章页顶部显示文章信息',
                     'default' => false,
                     'type' => "switcher",
                     'id' =>'mx_top',
                 ),
                 array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'bg_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'bg_color',
                             'title' => '背景颜色（当前已改为柔和随机颜色，此设置暂不生效）',
                             'default' => '#425aef',
                             'type' => 'color',
                         ),
                     ),
                 ),
                    array(
                     'dependency' => array('mx_top', '!=', ''),
                     'id' => 'text_color',
                     'type' => 'fieldset',
                     'fields' => array(
                         array(
                             'id' => 'text_color',
                             'title' => '文字颜色',
                             'default' => '#b3bdf9',
                             'type' => 'color',
                         ),
                     ),
                 ),
                 array(
                     'title'                  => '文章属性设置',
                    'subtitle'               => '古腾堡编辑器文章属性',
                     'id'                     => 'footer_tabbar',
                     'type'                   => 'group',
                     'accordion_title_number' => '1',
                    'sanitize'               => false,
                     'button_title'           => '添加属性',
                     'default'                => array(
                         array(
                             'type'      => 'yuanchuang',
                             'text'      => '原创',
                         ),
                         array(
                             'type'      => 'zhuanzai',
                             'text'      => '转载',
                         ),
                     ),
                     'fields'     => array(
                         array(
                             'title'   => '属性名称',
                             'id'      => 'text',
                             'type'    => 'text',
                             'default' => '',
                         ),
                     ),
                 ),
             ),
         ));
 
     }
 }
function mx_top($option = '', $default = null) {
    $options = get_option('moxing_top_info');
    return (isset($options[$option]))? $options[$option] : $default;
}

// 柔和版随机颜色生成函数
function get_soft_random_background_color() {
    // 使用HSV色彩模型生成柔和颜色
    // 色相(H)：0-360度随机
    // 饱和度(S)：30%-60%（保证颜色不过于鲜艳）
    // 明度(V)：60%-80%（保证颜色不暗也不刺眼）
    
    $hue = mt_rand(0, 360); // 色相：随机
    $saturation = mt_rand(30, 60) / 100; // 饱和度：30%-60%
    $value = mt_rand(60, 80) / 100; // 明度：60%-80%
    
    // HSV转RGB
    $r = $g = $b = 0;
    
    $i = floor($hue / 60);
    $f = $hue / 60 - $i;
    $p = $value * (1 - $saturation);
    $q = $value * (1 - $f * $saturation);
    $t = $value * (1 - (1 - $f) * $saturation);
    
    switch ($i % 6) {
        case 0: $r = $value; $g = $t; $b = $p; break;
        case 1: $r = $q; $g = $value; $b = $p; break;
        case 2: $r = $p; $g = $value; $b = $t; break;
        case 3: $r = $p; $g = $q; $b = $value; break;
        case 4: $r = $t; $g = $p; $b = $value; break;
        case 5: $r = $value; $g = $p; $b = $q; break;
    }
    
    // 转换为0-255的RGB值并格式化为十六进制
    return sprintf(
        '#%02X%02X%02X',
        round($r * 255),
        round($g * 255),
        round($b * 255)
    );
}

define('moxing_top_info_new_url', plugin_dir_url(__FILE__));
function moxing_init() {
    if (mx_top('mx_top')) {
        add_action('wp_head','moxing_head_info_style_css', 10);
        add_action('wp_head','moxing_head_info_html', 15);
        add_action('add_meta_boxes','my_custom_prefixes_meta_box', 10);
        add_action('save_post','save_custom_prefixes_meta_box_data');
    }
}
add_action('init','moxing_init');

function moxing_head_info_style_css() {
    if (is_singular('post')){
        wp_enqueue_style('font-awesome', 'https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
        wp_enqueue_style('moxing-icon-font', plugin_dir_url(__FILE__) . 'iconfont.css');
        $css = "
.article-title,.breadcrumb{display:none;}.head_box_mx{color:white;position:relative;text-align:center;box-sizing:border-box;margin-top:-20px;margin-bottom:20px;}.moxing_head_info_post_title{color:#fff;font-weight:700;line-height:1.2;text-align:center;margin:1rem 0 1rem 0 !important;-webkit-line-clamp:2;overflow:hidden;}.category>i{margin-right:5px;margin-top:3px;}.mxbk_tags-container{display:flex;align-items:center;justify-content:center;margin-bottom:20px;}.mulu_one_two{display:flex;align-items:center;justify-content:center;}.mulu_one_two span{display:inline-flex;align-items:flex-start;background-color:rgba(255,255,250,0.2);color:white;padding:7px 10px;margin-right:5px;border-radius:10px;font-weight:bold;font-size:14px;cursor:pointer;}.mulu_one_two span:hover{background-color:#fff;color:var(--focus-color) !important;transition:background-color 0.3s ease,color 0.3s ease;}.tags{display:flex;align-items:center;margin-left:20px;}.tags span{border-radius:10px;color:white;opacity:.8;padding:7px 10px;margin-right:5px;font-weight:bold;transition:background-color 0.3s ease,color 0.3s ease;cursor:pointer;}.tags span:hover{background-color:rgba(255,255,255,0.3);color:white;padding:7px 10px;}.mx_footer_meta{display:flex;align-items:center;color:var(--text_color);font-size:14px;flex-wrap:wrap;margin-top:30px;justify-content:center;}.mx_footer_meta span{margin-right:5px;}.tags span::before{font-size:14px;content:'#';color:white;font-weight:bold;margin-right:5px;opacity:.4;}.mx_waves{position:absolute;bottom:0;left:0;width:100%;height:8vh;margin-bottom:0;min-height:50px;max-height:100px;z-index:100;overflow:hidden;}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;}@keyframes move-forever{0%{transform:translate3d(-90px,0,0);}100%{transform:translate3d(85px,0,0);}}@media screen and (max-width:767px){.head_box_mx{padding:20px;}.mxbk_tags-container{flex-direction:column;align-items:center;justify-content:center;}.moxing_head_info_post_title{text-align:center;margin:10px 0;}.mx_footer_meta{justify-content:center;padding:0 5px;margin-top:10px;}.tags{display:none;}.moxing_head_info_post_title{font-size:2rem;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:768px) and (max-width:1024px){.head_box_mx{padding:50px;width:100%;}.moxing_background,.head_box_mx{height:40vh;}}@media screen and (min-width:1025px){.head_box_mx{padding:100px;width:100%;height:50vh;}.mx_footer_meta{gap:5px;}.mx_waves{display:block;}.moxing_background,.head_box_mx{height:50vh;}}@keyframes fade-in-up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.animate-fade-in-up{animation:fade-in-up 0.5s ease-out forwards;animation-delay:0.3s;opacity:0;}.mx_footer_meta a{color:var(--text_color);text-decoration:none;}.marrig{margin-right:5px}.moxing_background{position:absolute;left:0;right:0;top:0;background-color:var(--bg_color);}.moxing_background .b-wrap{position:absolute;left:50%;right:0;top:0;bottom:0;overflow:hidden;}.moxing_background .img{display:block;position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20deg);transform:rotate(20deg);-webkit-filter:blur(4px);filter:blur(4px);}.moxing_background img{position:absolute;right:0;top:0;width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);transition:transform 1s ease;}.post-header-7e7 .moxing_background .b-wrap::after{background-image:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background-image:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);}.moxing_background .b-wrap::after{content:'';display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:-webkit-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-moz- oldlinear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:-o-linear-gradient(192.6deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);background:linear-gradient(257.4deg,rgba(250,250,250,0.2) 2%,var(--bg_color) 80%);";
        wp_add_inline_style('moxing-icon-font', $css);
    }
}


function moxing_head_info_html() {
    if (is_singular('post')){
        $post = get_post();
        $content = $post->post_content;
        $wpm = 200;
        $clean_content = strip_shortcodes($content);
        $clean_content = strip_tags($clean_content);
        $word_count = mb_strlen($clean_content, 'UTF8');
        $read_time = ceil($word_count / $wpm);
        $date = get_the_date('Y-m-d');
        $author = get_the_author();
        $author_id = get_the_author_meta('ID');
        $property = get_post_meta(get_the_ID(), 'article_property', true);
        $property_text = $property? $property : '热门';

        $tags = get_the_tags();
        $tags_html = "";
        if ($tags) {
            shuffle($tags);
            $tags = array_slice($tags, 0, 2);
            foreach ($tags as $tag) {
                $tags_html.= '<span class="tag">'. esc_html($tag->name). '</span> ';
            }
        }
        $categories = get_the_category();
        $category_html = "";
        if (!empty($categories)) {
            $category = $categories[0];
            $category_html = '<span class="category"><i class="fa fa-folder-open-o"></i>'. esc_html($category->name). '</span> ';
        }

        // 使用柔和版随机颜色
        $bg_color = mx_top('bg_color');
        $soft_random_bg_color = get_soft_random_background_color(); // 调用柔和随机颜色函数
        $bg_color['bg_color'] = $soft_random_bg_color;

        $text_color = mx_top('text_color');
        ob_start();
?>
        <style>
        :root{
            --bg_color: <?php echo $bg_color['bg_color'];?>;
            --text_color: <?php echo $text_color['text_color'];?>;
        }
        </style>
        <div class="head_box_mx">
            <div class="moxing_background b bg_1">
                <div class="b-wrap">
                    <i class="img">
                        <?php
                        $lazy_attr = zib_is_lazy('lazy_other', true)? 'class="fit-cover lazyload" src="'. zib_get_lazy_thumb(). '" data-' : 'class="fit-cover"';
                        $video_pic =!empty($pay_mate['video_pic'])? '<img '. $lazy_attr.'src="'. esc_attr($pay_mate['video_pic']). '" alt="付费视频-'. esc_attr($pay_title). '">' : zib_post_thumbnail();
                        $post_thumbnail = $video_pic;
                        $post_thumbnail.= '<div class="absolute graphic-mask" style="opacity: 0.2;"></div>';
                        $post_thumbnail.= '<div class="abs-center text-center"><i class="fa fa-play-circle-o fa-4x opacity8" aria-hidden="true"></i></div>';
                        $post_thumbnail = zib_post_thumbnail();
                        echo $post_thumbnail;
                     ?>
                    </i>
                </div>
            </div>
            <div class="mxbk_tags-container animate-fade-in-up">
                <div class="mulu_one_two">
                    <span><?php echo $property_text;?></span>
                    <a href="<?php echo get_category_link( get_cat_ID( $category_html ) );?>"><?php echo $category_html;?></a>
                </div>
            <div class="tags"><?php echo $tags_html;?></div>
            </div>
            <h1 class="moxing_head_info_post_title animate-fade-in-up"><?php echo get_the_title();?></h1>
            <div class="mx_footer_meta animate-fade-in-up">
                <span class="post-meta-separator"></span>
                <i class="fa fa-file-text-o" title="文字总数"></i><span class="post-meta-label"><?php echo $word_count;?>字</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-clock-o" title="阅读耗时"></i><span class="post-meta-label"><?php echo $read_time;?>分钟</span>
                <span class="post-meta-separator"></span>
                <i class="fa fa-calendar" title="发布时间"></i><span class="post-meta-label"><?php echo $date;?></span>
                <span class="post-meta-separator"></span>
                <a href="<?php echo home_url('/author/').$author_id;?>" class="author-link"><i class="fa fa-user marrig" title="发布作者"></i><span class="post-meta-label"><?php echo $author;?></span></a>
                <span class="post-meta-separator"></span>
                <i class="fa fa-fire" title="热度"></i><span class="post-meta-label"><?php echo get_post_view_count('', '');?></span>
                <span class="post-meta-separator"></span>
                <a href="#respond" class="smooth-scroll"><i class="fa fa-comment-o marrig" title="评论数"></i><span class="post-meta-label"><?php echo get_post_comment_count('', '');?></span></a>
                <i class="fa fa-bookmark" title="文章发布数量"></i><span class="post-meta-label">该作者已发布<?php the_author_posts(); ?>篇文章</span>
                <span class="post-meta-separator"></span>
            </div>
            <div class="mx_waves">
                <svg class="mx_waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                    <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                    </defs>
                    <g class="parallax">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="var(--body-bg-color)"></use>
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="var(--body-bg-color)" style="opacity:.7"></use>
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="var(--body-bg-color)" style="opacity:.5"></use>
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="var(--body-bg-color)" style="opacity:.3"></use>
                    </g>
                </svg>
            </div>
        </div>
        <?php
        echo '<script>
                jQuery(document).ready(function($) {
                    $(".smooth-scroll").click(function(event) {
                        event.preventDefault();
                        var target = $(this.hash);
                        $("html, body").animate({
                            scrollTop: target.offset().top
                        }, 800); 
                    });
                    $(".author-link").click(function(event) {
                        event.preventDefault();
                        window.location.href = $(this).attr("href");
                    });
                });
            </script>';
    }
}

function my_custom_prefixes_meta_box() {
    add_meta_box('custom-title-prefixes', '文章属性','my_custom_prefixes_meta_box_callback', 'post','side');
}

function my_custom_prefixes_meta_box_callback($post) {
    $article_properties = get_option('moxing_top_info')['footer_tabbar']?? [];
    $current_property = get_post_meta($post->ID, 'article_property', true);

    foreach ($article_properties as $index => $property) {
        $type = $property['type']?? '';
        $text = $property['text']?? ($type === 'yuanchuang'? '原创' : ($type === 'zhuanzai'? '转载' : ''));
        echo '<input type="radio" id="article_property_'. esc_attr($index). '" name="article_property" value="'. esc_attr($text). '" '. checked($current_property, $text, false). '>';
        echo '<label for="article_property_'. esc_attr($index). '">'. esc_html($text). '</label><br>';
    }

    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', "
        jQuery(document).ready(function ($) {
            $('input[name=article_property]').change(function () {
            });
        });
    ");
}

function save_custom_prefixes_meta_box_data($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['article_property'])) {
        $new_property = sanitize_text_field($_POST['article_property']);
        update_post_meta($post_id, 'article_property', $new_property);
    } else {
        delete_post_meta($post_id, 'article_property');
    }
}

文章很赞,支持一下吧~ 还没有人为TA充电

为TA充电

还没有人为TA充电

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

THE END