整体替换moxing_top_info_v4.0/moxing_top_info.php
第一版教程代码
<?php
/**
* Plugin Name: 诺言资源网文章页顶部信息插件v4.0
* Plugin URI: https://zy.nuoyo.cn
* Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
* Version: 4.0
* Author: 诺言资源网
* Author URI: https://zy.nuoyo.cn
*/
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://zy.nuoyo.cn
* Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
* Version: 4.0
* Author: 诺言资源网
* Author URI: https://zy.nuoyo.cn
*/
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://zy.nuoyo.cn
* Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
* Version: 4.0
* Author: 诺言资源网
* Author URI: https://zy.nuoyo.cn
*/
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://zy.nuoyo.cn
* Description: 一个适用于子比主题的文章页顶部信息插件，启用后在侧边栏即可看到菜单项，进入设置即可
* Version: 4.0
* Author: 诺言资源网
* Author URI: https://zy.nuoyo.cn
*/
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' => '#ffffff',
'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_high_contrast_soft_background_color() {
// 根据WCAG对比度标准优化
// 色相(H)：0-360度随机，保持颜色多样性
// 饱和度(S)：25%-55%（柔和不刺眼）
// 明度(V)：30%-50%（降低明度确保与白色文字的高对比度）
$hue = mt_rand(0, 360); // 色相随机
$saturation = mt_rand(25, 55) / 100; // 饱和度25%-55%（比之前略低，更柔和）
$value = mt_rand(30, 50) / 100; // 明度30%-50%（降低明度，提高与白色的对比度）
// 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;
}
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:white;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;color:white;}
.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:white;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:.9;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:white;font-size:14px;flex-wrap:wrap;margin-top:30px;justify-content:center;}
.mx_footer_meta span{margin-right:5px;color:white;}
.tags span::before{font-size:14px;content:'#';color:white;font-weight:bold;margin-right:5px;opacity:.6;}
.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;color:white;}.mx_footer_meta{justify-content:center;padding:0 5px;margin-top:10px;color:white;}.tags{display:none;}.moxing_head_info_post_title{font-size:2rem;color:white;}.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;color:white;}.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:white;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');
$high_contrast_bg_color = get_high_contrast_soft_background_color();
$bg_color['bg_color'] = $high_contrast_bg_color;
$text_color = mx_top('text_color');
$text_color['text_color'] = '#ffffff';
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). '" style="color:white;">'. 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');
}
}
未经允许不得转载作者:
西柚，
转载或复制请以
超链接形式
并注明出处
西柚网 。
原文地址：
《
子比主题文章顶部信息美化（原版默认蓝色）升级为随机彩色》
发布于
2025-10-14
评论 抢沙发