WordPress原创插件：当日24小时发布文章标题变红

在WordPress建站中，如何让用户快速识别新发布的内容？一款原创插件通过简单的方式实现“当日24小时内发布的文章标题自动变红”功能，帮助网站提升用户互动性和内容优先级展示。本文将详细介绍该插件的实现原理、使用方法及扩展建议，快速上手。

功能概述

该插件的核心功能是：
当文章发布后24小时内，其标题会自动变为红色，超过24小时后恢复默认样式。这种视觉提示能有效引导用户关注最新内容，适用于资讯类、博客类网站的更新展示。

核心特点

1. 自动判断时间范围
   通过比较当前时间与文章发布时间，动态计算时间差（单位：秒），若小于86400秒（即24小时），则触发样式变更。
2. 无需额外依赖
   仅需一行PHP代码即可实现功能，无需安装第三方插件或数据库表。
3. 兼容性强
   支持主流WordPress主题，适配 .entry-title 和 .page-title 等常见标题类名。

代码解析

以下是插件的核心代码及其工作原理：

<?php

// 添加自定义样式
function title_red_plugin_styles() {
    $current_time = time(); // 获取当前时间戳
    $post_time = get_the_time('U'); // 获取文章发布时间戳（Unix时间）
    $time_difference = $current_time - $post_time; // 计算时间差

    if ($time_difference < 86400) { // 若时间差小于24小时（86400秒）
        echo '<style>
            .entry-title a,
            .page-title {
                color: red !important; // 设置标题文字为红色
            }
        </style>';
    }
}
add_action('wp_head', 'title_red_plugin_styles'); // 将样式插入页面头部

关键逻辑说明

1. 时间戳比较
   • time() 函数获取当前服务器时间戳。
   • get_the_time('U') 获取文章发布时间戳（Unix格式）。
   • 通过差值判断是否在24小时内。
2. 动态样式注入
   • 使用 echo 直接输出 <style> 标签，覆盖标题的默认颜色。
   • !important 确保样式优先级高于主题原有样式。

安装与使用指南

步骤1：添加代码

1. 登录WordPress后台，进入 外观 > 主题编辑器。
2. 选择 functions.php 文件（或创建自定义插件）。
3. 将上述代码粘贴到文件末尾，保存更改。

步骤2：测试效果

1. 新建一篇文章并发布。
2. 刷新前台页面，观察标题是否变为红色。
3. 等待24小时后再次刷新，确认颜色恢复默认。

适配性调整

• 类名匹配：
  若你的主题标题类名为 .post-title 或 .hentry，请修改代码中的 .entry-title 和 .page-title 为实际类名。
• 移动端适配：
  代码默认适配所有设备，无需额外处理。

效果预览

如上图所示，新发布文章的标题以红色突出显示，24小时后自动恢复为默认颜色，视觉提示效果显著。

扩展建议

1. 自定义时间范围

• 修改 86400 为其他数值（如43200秒=12小时），可调整时间范围。
• 示例：若需支持72小时，替换为 259200。

2. 增加图标提示

• 结合CSS图标库（如Font Awesome），为新文章添加“🔥”或“✨”图标。

  .entry-title a::after {
      content: " 🔥";
      font-size: 12px;
  }
  

3. 多语言支持

• 若网站使用多语言插件（如WPML），需确保时间戳计算与本地时区一致。
• 可通过 current_time('timestamp') 替代 time()，适配WordPress时区设置。

4. 性能优化

• 避免重复注入样式：
  使用 wp_enqueue_style 注册独立CSS文件，而非直接输出样式。
• 缓存兼容性：
  若网站启用缓存插件（如WP Super Cache），需在缓存规则中排除动态样式。

注意事项

1. 主题兼容性
   部分主题可能使用自定义模板结构（如 single.php 或 archive.php），需确认标题类名是否匹配。
2. 样式冲突
   若标题颜色被JavaScript动态修改，需在代码中添加 !important 或提高CSS优先级。
3. 安全性
   直接输出 <style> 标签可能引发XSS风险，建议通过 wp_add_inline_style 注入样式。