Thay đổi thông báo lỗi không thể kết nối tới cơ sở dữ liệu WordPress

Code WordPress 28/07/2022 In trang này

Nếu website của bạn quá tải, sai user hay password trong wp-config.php hoặc bị 1 vấn đề gì đó khác làm cho website không thể kết nối tới cơ sở dữ liệu thì thường nhận thông báo lỗi như sau: Error Establishing a Database Connection.

Hình phía dưới là ảnh thông báo lỗi mặc định khi không thể kết nối tới cơ sở dữ liệu, bạn có thể thấy đây là thông báo khá thô nên trong bài viết này mình muốn share 1 đoạn code giúp làm đẹp trang thông báo lỗi này.

Tùy chỉnh giao diện trang thông báo lỗi không thể kết nối tới cơ sở dữ liệu WordPress

Để thay đổi trang thông báo lỗi không thể kết nối tới cơ sở dữ liệu WordPress bạn có thể làm như sau:

1. Tạo 1 file có tên là db-error.php trong thư mục wp-content

2. Mở file db-error.php và thêm vào đoạn code phía dưới đây vào và sửa lại thông tin cho phù hợp sau đó lưu lại.

<?php
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 30'); // 1 hour = 3600 seconds
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Website đang được bảo trì định kỳ</title>
    <link href="https://fonts.googleapis.com/css?family=Kanit:200" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

    <!-- Custom stlylesheet -->
    <style>
        *{-webkit-box-sizing:border-box;box-sizing:border-box}body{padding:0;margin:0}#notfound{position:relative;height:100vh}#notfound .notfound{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.notfound{max-width:767px;width:100%;line-height:1.4;text-align:center;padding:15px}.notfound .notfound-404{position:relative;height:220px}.notfound .notfound-404 h1{font-family:'Kanit',sans-serif;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:186px;font-weight:200;margin:0;background:linear-gradient(130deg,#ffa34f,#ff6f68);color:transparent;-webkit-background-clip:text;background-clip:text;text-transform:uppercase}.notfound h2{font-family:'Kanit',sans-serif;font-size:33px;font-weight:200;text-transform:uppercase;margin-top:0;margin-bottom:25px;letter-spacing:3px}.notfound p{font-family:'Kanit',sans-serif;font-size:16px;font-weight:200;margin-top:0;margin-bottom:25px}.notfound a{font-family:'Kanit',sans-serif;color:#ff6f68;font-weight:200;text-decoration:none;border-bottom:1px dashed #ff6f68;border-radius:2px}.notfound-social>a{display:inline-block;height:40px;line-height:40px;width:40px;font-size:14px;color:#ff6f68;border:1px solid #efefef;border-radius:50%;margin:3px;-webkit-transition:.2s all;transition:.2s all}.notfound-social>a:hover{color:#fff;background-color:#ff6f68;border-color:#ff6f68}@media only screen and (max-width: 480px){.notfound .notfound-404{position:relative;height:168px}.notfound .notfound-404 h1{font-size:142px}.notfound h2{font-size:22px}}
    </style>

</head>

<body>
<div id="notfound">
    <div class="notfound">
        <div class="notfound-404">
            <h1>503</h1>
        </div>
        <h2>Website đang được bảo trì định kỳ</h2>
        <p>Vui lòng quay lại trong ít phút</p>
        <div class="notfound-social">
            <a href="https://www.facebook.com/vutruso"><i class="fab fa-facebook"></i></a>
            <a href="https://www.twitter.com/vutruso"><i class="fab fa-twitter"></i></a>
            <a href="mailto:info@vutruso.com"><i class="fas fa-envelope"></i></a>
        </div>
    </div>
</div>
</body>

</html>

Vậy là xong, nếu website của bạn gặp vấn đề gì đó và trả về mã phản hồi là 503 thì bạn sẽ nhận được 1 màn hình thông báo như dưới đây. Và sau 30 giây nó tự reload lại 1 lần.

Tự động xóa cache ở plugin Swift Performance

Shortcode bài viết liên quan theo chuyên mục / tag trong WordPress

Tạo tài khoản mới trong WordPress bằng php functions

Kết luận: Đây chỉ là phần nổi để giúp cho website của bạn thân thiện trong trường hợp website bị sập nhé, bạn nên tìm nguyên nhân và fix chúng để tránh gặp lại tình trạng này nhiều lần nhé.

Một số lời khuyên để fix lỗi này.