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

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.

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.

  • Kiểm tra lại user và password của database trong file wp-config.php
  • Theo dõi xem website có bị thiếu ram hay lưu lượng truy cập tăng bất thường
  • xem có vấn đề gì đó gây xung đột theme, plugin hay không
  • hoặc bạn đã cài cache để giải tải cho server?
  • Website của bạn có còn đủ ổ cứng?
  • Website của bạn bị tấn công?

Ở trên là 1 số việc bạn nên kiểm tra để giúp website của bạn hoạt động ổn định.

Nếu gặp khó khăn bạn có thể với chúng tôi để được hỗ trợ nhanh nhất. Xin cảm ơn.

Bài viết liên quan