子比主题-卡片列表右上角添加文章发布时间

演示效果：

教程开始：直接把下面的代码放在functions.php或直接新建func.php里面

//卡片列表添加文章发布时间blog.wmr7.com开始

function macgf_post_time() {
    add_filter('the_time', function($time) {
        if (is_single() || is_archive()) {
            return '<span class="post-time">' . get_the_date('Y年m月d日') . '</span>' . $time;
        }
        return $time;
    });

    add_action('wp_footer', function() {
        if (is_home() || is_archive()) {
            echo '<style>
                .posts-item.card::after {
                    content: "⚡ " attr(data-date);
                    position: absolute;
                    top: 5px;
                    right: 10px;
                    font-size: 14px;
                    color: #000;
                    pointer-events: none;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                }
                @media (max-width: 767px) {
                    .posts-item.card::after {
                        content: "⚡ " attr(data-date-mobile);
                    }
                }
            </style>';
            
            echo '<script>
                function setCardDates() {
                    document.querySelectorAll(".posts-item.card").forEach(function(card) {
                        card.setAttribute("data-date", "'.get_the_date('Y-m-d').'");
                        card.setAttribute("data-date-mobile", "'.get_the_date('m-d').'");
                    });
                }
                
                // 使用MutationObserver监听DOM变化
                if (typeof MutationObserver !== "undefined") {
                    const observer = new MutationObserver(function(mutations) {
                        setCardDates();
                    });
                    observer.observe(document.body, {
                        childList: true,
                        subtree: true
                    });
                }
                
                // 初始设置
                document.addEventListener("DOMContentLoaded", setCardDates);
                window.addEventListener("load", setCardDates);
            </script>';
        }
    });
}
add_action('after_setup_theme', 'macgf_post_time');


//卡片列表添加文章发布时间blog.wmr7.com结束

到此教程结束。

阿七源码友情提示：修改原代码做好备份