WordPress给最近3篇文章弹出提醒通知

在访客浏览最近 3 篇文章时，在顶部显示一个通知。将所有逻辑封装在一个函数里，并在 functions.php 文件中添加这个函数。这个函数将包含通知的 HTML、JavaScript 和 CSS。

以下是封装后的完整代码示例：

1. 在 functions.php 文件中添加代码

将以下代码添加到你的子主题的 functions.php 文件中：

function display_recent_posts_notification() {
    if (is_single() && !is_admin()) {
        global $post;
        $recent_posts = wp_get_recent_posts(array(
            'numberposts' => 3, // 获取最近的3篇文章
            'post_status' => 'publish',
        ));

        $post_ids = wp_list_pluck($recent_posts, 'ID');

        if (in_array($post->ID, $post_ids)) {
            // 输出通知的HTML和CSS
            echo '
            <style>
                #recent-posts-notification {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    background-color: #ffeb3b;
                    color: #000;
                    text-align: center;
                    padding: 10px;
                    z-index: 1000;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
                    display: none; /* 初始隐藏，JavaScript 控制显示 */
                }
            </style>
            <div id="recent-posts-notification">
                You are reading one of the latest 3 posts!
            </div>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var notification = document.getElementById("recent-posts-notification");
                    if (notification) {
                        notification.style.display = "block";
                        setTimeout(function() {
                            notification.style.display = "none";
                        }, 5000); // 通知显示5秒
                    }
                });
            </script>';
        }
    }
}
add_action('wp_footer', 'display_recent_posts_notification');

2. 解释代码

• 检查是否为单篇文章页面：is_single() 确保代码仅在单篇文章页面执行。
• 获取最近的 3 篇文章：使用 wp_get_recent_posts() 函数获取最近发布的 3 篇文章。
• 检查当前文章是否在最近的 3 篇文章中：使用 in_array() 检查当前文章的 ID 是否在最近文章的 ID 列表中。
• 输出通知的 HTML、CSS 和 JavaScript：
  • CSS：样式化通知栏，使其固定在页面顶部。
  • HTML：定义通知栏的内容。
  • JavaScript：在页面加载时显示通知，并在 5 秒后隐藏。

总结

通过将所有代码封装在一个函数中，并使用 wp_footer 钩子将其添加到页脚，你可以确保通知在访客浏览最近 3 篇文章时显示，并且实现过程简单且易于维护。如果需要调整通知的样式或行为，可以直接在函数内部进行修改。