子比美化 – 文章页顶部添加文章内容信息

去主题文件的single.php文件中找到第31行的位置，然后粘贴下面的代码

<?php
// 获取文章分类或标签
$categories = get_the_category();
$tags = get_the_tags();

// 计算字数和阅读耗时
$word_count = str_word_count(strip_tags(get_the_content()));
$reading_time = ceil($word_count / 300); // 假设阅读速度为每分钟300字

// 格式化发布日期
$publish_date = get_the_date('Y-m-d');
?>

<div class="tuc-2ea177b2-3fcc0a-0 article-header tuc-2ea177b2-3fcc0a-0" style="background: var(--article-bg, linear-gradient(135deg, #ffd1dc, #c1e1ff)); padding: 15px; border-radius: 16px; border: 3px solid var(--article-border, transparent); margin: 20px 0; font-size: 14px; color: var(--article-text, #333); position: relative; overflow: hidden; box-shadow: 0 4px 12px var(--article-shadow, rgba(255, 126, 185, 0.3)); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 100%; max-width: 100%; text-align: center;">
    <!-- 二次元装饰图标 -->
    <span style="position: absolute; top: -20px; right: -20px; font-size: 60px; color: var(--article-icon, #ff7eb9); opacity: 0.2; transform: rotate(30deg);">🎀</span>
    <span style="position: absolute; bottom: -20px; left: -20px; font-size: 60px; color: var(--article-icon, #ff7eb9); opacity: 0.2; transform: rotate(-30deg);">🌸</span>

    <!-- 动态悬浮效果 -->
    <div class="tuc-2ea177b2-3fcc0a-0 particle-effect tuc-2ea177b2-3fcc0a-0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.2)) 10%, transparent 10.01%); background-size: 20px 20px; animation: move 3s infinite linear;"></div>

    <!-- 文章信息内容 -->
    <div style="position: relative; z-index: 2;">
        <h1 class="tuc-2ea177b2-3fcc0a-0 article-title tuc-2ea177b2-3fcc0a-0" style="font-size: 20px; color: var(--article-title, #ff7eb9); margin-bottom: 10px; font-family: 'Comic Sans MS', cursive, sans-serif;">
            <?php the_title(); ?>
        </h1>
        <!-- 作者、分类、标签 -->
        <div class="tuc-2ea177b2-3fcc0a-0 article-meta-buttons tuc-2ea177b2-3fcc0a-0" style="display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
            <!-- 作者 -->
            <span style="display: flex; align-items: center; gap: 4px;">
                <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; text-decoration: none; font-weight: bold;">📝 <?php the_author(); ?></a>
            </span>
            <!-- 分类 -->
            <?php if (!empty($categories)) : ?>
                <span style="display: flex; align-items: center; gap: 4px;">
                    <a href="<?php echo get_category_link($categories[0]->term_id); ?>" style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; text-decoration: none; font-weight: bold;">🏷️ <?php echo esc_html($categories[0]->name); ?></a>
                </span>
            <?php endif; ?>
            <!-- 标签 -->
            <?php if ($tags) : ?>
                <span style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
                    <?php foreach ($tags as $tag) : ?>
                        <a href="<?php echo get_tag_link($tag->term_id); ?>" style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; text-decoration: none; font-weight: bold; margin-right: 5px;">🔖 <?php echo esc_html($tag->name); ?></a>
                    <?php endforeach; ?>
                </span>
            <?php endif; ?>
        </div>
        <!-- 发布日期、阅读时长、字数 -->
        <div class="tuc-2ea177b2-3fcc0a-0 article-meta-info tuc-2ea177b2-3fcc0a-0" style="font-size: 12px; color: var(--article-text, #333); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;">
            <span>📅 <?php echo $publish_date; ?></span>
            <span>⏱️ <?php echo $reading_time; ?> 分钟</span>
            <span>🔢 <?php echo $word_count; ?> 字</span>
        </div>
    </div>
</div>

<!-- 动态背景动画 -->
<style>
    @keyframes move {
        0% { background-position: 0 0; }
        100% { background-position: 20px 20px; }
    }

    /* 悬浮效果 */
    .article-header:hover .particle-effect {
        background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.4)) 10%, transparent 10.01%);
        animation: move 0.5s linear;
    }

    /* 点击特效 */
    .article-header:active .particle-effect {
        background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.6)) 10%, transparent 10.01%);
        animation: move 0.2s linear;
    }

    /* 日间模式样式 */
    :root {
        --article-bg: linear-gradient(135deg, #ffd1dc, #c1e1ff);
        --article-border: transparent;
        --article-text: #333;
        --article-title: #ff7eb9;
        --article-icon: #ff7eb9;
        --article-shadow: rgba(255, 126, 185, 0.3);
        --article-shadow-hover: rgba(255, 126, 185, 0.4);
        --article-particle: rgba(255, 126, 185, 0.2);
        --article-button-bg: #ff7eb9;
        --article-button-text: #fff;
    }

    /* 夜间模式样式 */
    [data-theme='dark'] {
        --article-bg: linear-gradient(135deg, #3a1f4a, #1a1a2e);
        --article-border: transparent;
        --article-text: #ddd;
        --article-title: #ff7eb9;
        --article-icon: #ff7eb9;
        --article-shadow: rgba(255, 126, 185, 0.2);
        --article-shadow-hover: rgba(255, 126, 185, 0.3);
        --article-particle: rgba(255, 126, 185, 0.1);
        --article-button-bg: #ff7eb9;
        --article-button-text: #fff;
    }

    /* 手机端优化 */
    @media (max-width: 768px) {
        .article-header {
            padding: 12px;
            border-radius: 12px;
        }
        .article-title {
            font-size: 18px !important;
        }
        .article-meta-buttons, .article-meta-info {
            gap: 8px;
        }
        .article-meta-buttons a, .article-meta-info span {
            font-size: 12px;
            padding: 4px 8px;
        }
    }
</style>

如需要移除子比默认文章页的标题可在/wp-content/themes/zibll/inc/functions/zib-single.php查找

标题部分直接注释掉这段

$html .= !$is_show_cover ? ' ' . get_the_title() . get_the_subtitle() . '' : '';

8.1版本的话注释下面这行

$html .= !$is_show_cover ? '<h1 class="article-title"> <a href="' . get_permalink() . '">' . get_the_title() . get_the_subtitle() . '</a></h1>' : '';