一个子比主题倒计时后随机浏览文章的404页面

子比主题自带的404页面我想的是，用户如果点击了搜索引擎上某一个之前收录的，但是因为某些原因又不存在的文章，可以选择跳转到首页或者跳转到随机文章，于是这个源码就来了。

效果图如下，网站的页头也页脚是原样的。倒计时的时间可以自行修改。

使用方法：复制下面的代码，替换.../wp-content/themes/zibll/404.php文件的全部内容

<?php
/*
 * @Author         : Qinver
 * @Url            : zibll.com
 * @Date           : 2020-09-29 13:18:36
 * @LastEditTime   : 2024-09-15 10:10:00
 * @Email          : 770349780@qq.com
 * @Project        : Zibll子比主题
 * @Description    : 一款极其优雅的Wordpress主题, 404页面已修改
 * @Read me        : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
 * @Remind         : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
 */


get_header();


// --- 404 页面内容开始 ---


// --- 获取随机文章 ---
$random_post_url = '';
$args = array(
    'numberposts' => 1,
    'orderby'     => 'rand',
    'post_status' => 'publish'
);
$random_posts = get_posts($args);
if ($random_posts) {
    $random_post_url = get_permalink($random_posts[0]->ID);
}


// --- SEO优化: 返回404状态码 ---
status_header(404);
?>


<style>
    /* --- 页面样式 --- */
    .error-404-page {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 60vh;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #333;
        padding: 20px;
    }
    .error-404-page h1 {
        font-size: 6rem;
        font-weight: bold;
        color: #5c6bc0;
        margin: 0;
        text-shadow: 4px 4px 0px #e0e0e0;
    }
    .error-404-page h2 {
        font-size: 1.75rem;
        margin: 20px 0 10px;
        color: #555;
    }
    .error-404-page p {
        font-size: 1rem;
        color: #777;
        max-width: 400px;
        line-height: 1.6;
    }
    .error-404-page #countdown {
        font-weight: bold;
        color: #d32f2f;
    }
    .error-404-page .actions {
        margin-top: 30px;
        display: flex;
        gap: 15px;
    }
    .error-404-page .actions a {
        text-decoration: none;
        padding: 12px 25px;
        border-radius: 50px;
        font-weight: bold;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    .error-404-page .actions a.gohome {
        background-color: #5c6bc0;
        color: #fff;
    }
    .error-404-page .actions a.gohome:hover {
        background-color: #3f51b5;
        transform: translateY(-2px);
    }
    .error-404-page .actions a.random {
        background-color: #f1f1f1;
        color: #555;
        border-color: #ddd;
    }
     .error-404-page .actions a.random:hover {
        background-color: #e0e0e0;
        border-color: #ccc;
        transform: translateY(-2px);
    }
</style>


<main class="container" role="main">
    <div class="error-404-page">
        <h1>404</h1>
        <h2>页面未找到</h2>
        <p>抱歉，您正在寻找的页面似乎已经丢失、被移除或从未存在。</p>
        <p>系统将在 <span id="countdown">5</span> 秒后自动为您跳转到首页。</p>
        <div class="actions">
            <a href="<?php echo esc_url(home_url('/')); ?>" class="gohome">返回首页</a>
            <?php if (!empty($random_post_url)) : ?>
                <a href="<?php echo esc_url($random_post_url); ?>" class="random">随机浏览</a>
            <?php endif; ?>
        </div>
    </div>
</main>


<script type="text/javascript">
    (function() {
        // --- 倒计时逻辑 ---
        const countdownElement = document.getElementById('countdown');
        if (countdownElement) {
            let seconds = parseInt(countdownElement.textContent, 10);
            const homeUrl = "<?php echo esc_url(home_url('/')); ?>";


            const timer = setInterval(function() {
                seconds--;
                countdownElement.textContent = seconds;


                if (seconds <= 0) {
                    clearInterval(timer);
                    window.location.href = homeUrl;
                }
            }, 1000);
        }
    })();
</script>


<?php
// --- 404 页面内容结束 ---


get_footer();

现在是默认5秒，如果要修改时间请修改这一行的数字5

<p>系统将在 <span id="countdown">5</span> 秒后自动为您跳转到首页。</p>

还有一点就是如果是404页面提示的是nginx404，而不是主题自带的404，请在宝塔-网站-配置文件里面注释掉这一行

error_page 404 /404.html;

版权声明

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。