شخصی سازی wp_die

شخصی سازی wp_die وردپرس؛ صفحه مرگ اختصاصی

زمان انتشار: در تاریخ ۱۴۰۳/۰۳/۲۴ ساعت ۲۱:۰۰ | آموزش وب . بلاگ

وردپرس در صورت بروز خطا از تابعی با نام wp_die استفاده می کند. در این مطلب قصد ایجاد قالب اختصاصی و شخصی سازی wp_die را داریم.

مدیران سایت وردپرسی حتما با صفحه مرگ یا wp_die آشنا هستند. این تابع در زمان بروز خطای سرور و یا وجود مشکل در سطح دسترسی به کاربر نمایش داده می شود. در این صفحه معمولا خطا به شکل ساده ای توضیح داده شده است. اما طراحی آن بسیار ساده و ابتدایی است. به صورت کلی این برگه بیشتر برای مدیران سایت در دسترس است. اما شخصی سازی wp_die و ایجاد قالب اختصاصی برای آن خالی از لطف نیست. البته همیشه استفاده از طراحی ساده و سبک را برای این بخش پیشنهاد می کنیم. زیرا معمولا نمایش آن هنگام بروز مشکلات سرور است. لذا استفاده از قالب سبک برای این بخش موثر خواهد بود.

نمونه ارور wp_die

شخصی سازی wp_die

شخصی سازی wp_die به غیر نیاز به دانش طراحی وب، کار ساده ای است. برای این کار ابتدا باید از فیلتر های وردپرس استفاده کنیم. در این مرحله تابع خود را برای شخصی سازی این بخش به وردپرس معرفی می کنیم. سپس برگه طراحی شده را به آن متصل می کنیم. پس برای شروع کد زیر را در فایل functions.php قالب و یا افزونه اختصاصی خود اضافه کنید:

<?php
add_filter('wp_die_handler', function () {
    return 'tc_die_handler';
}, ۱۰);
?>

در کد بالا یک تابع با نام tc_die_handler را به وردپرس معرفی می کنیم. در مرحله بعد باید این تابع را تعریف کنیم. برای سادگی کار نیز یک فایل با نام wp-die.php در پوشه قالب خود ایجاد و در این تابع لود می کنیم:

<?php
function tc_die_handler($message, $title = '', $args = array())
{
    require_once get_stylesheet_directory() . '/wp-die.php';
    die();
}
?>

در خط پایانی نیز از تابع die جهت امنیت بیشتر کد ها استفاده می کنیم. حال باید فایل wp-die.php را بر اساس نیاز خود شخصی سازی کنیم. در این فایل متغیری با نام message در دسترس است. محتویات این متغیر در واقع متن همان خطای ما است. برای مثال ما از کد های زیر استفاده می کنیم:

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>خطا</title>
</head>

<body>
    <?php echo $message; ?>
</body>

</html>

در این قالب تنها متن خطا را به ساده ترین حالت نمایش می دهیم. تا اینجا به سادگی امکان طراحی و شخصی سازی wp_die را ایجاد کرده ایم. در ادامه کمی این برگه را حرفه ای تر و درست تر خواهیم کرد.

کد وضعیت صفحه wp_die

یکی از مشکلات کد های بالا، عدم نمایش کد وضعیت صفحه است. در صورت بررسی بخش network مرورگر، کد وضعیت یا همان status code صفحه برابر با ۲۰۰ است. از نظر فنی این مورد یک مشکل است. چرا که مرورگر نیز باید متوجه وجود خطا در این صفحه شود. برای مثال در صورت خطا در سرور باید خطا های خانواده ۵۰۰ را برگردانیم. یا برای خطا های سطح دسترسی از ۴۰۳ استفاده کنیم. برای حل این مشکل باید کد زیر را به تابع خود اضافه کنیم:

<?php
$defaults = array('response' => 500);
$r = wp_parse_args($args, $defaults);
?>

در این کد ابتدا یک مقدار پیش فرض برای این کد در نظر می گیریم. سپس کد نهایی را در متغیر r ذخیره می کنیم. حال باید ابتدای فایل wp-die.php نیز کد زیر را اضافه کنیم:

<?php
if (!headers_sent()) {
    status_header($r['response']);
}
?>

در این کد نیز در صورت عدم ارسال هدر، کد وضعیت ما را در مرورگر اجرا می کند.

پیغام خطای wp_die

گاهی متن خطا در تابع wp_die شامل موارد مختلف می شود. وردپرس نیز در این صورت آن را به صورت آرایه ذخیره می کند. پس برای عدم بروز مشکل در این موارد، باید کد تابع شخصی سازی wp_die خود را کمی تغییر دهیم. کد نهایی تابع به شکل زیر می شود:

function tc_die_handler($message, $title = '', $args = array())
{
    $defaults = array('response' => 500);
    $r = wp_parse_args($args, $defaults);

    if (function_exists('is_wp_error') && is_wp_error($message)) {
        $errors = $message->get_error_messages();
        switch (count($errors)) {
            case 0:
                $message = '';
                break;
            case 1:
                $message = $errors[0];
                break;
            default:
                $message = "<ul><li>" . join("</li><li>", $errors) . "</li></ul>";
                break;
        }
    }

    require_once get_stylesheet_directory() . '/wp-die.php';
    die();
}

در این کد ابتدا مقدار خطا را بررسی می کنیم. در صورت وجود آرایه آن را به صورت لیست مرتب چاپ می کنیم. به این صورت خطایی در این بخش نیز نخواهیم داشت. در مرحله بعد برای شخصی سازی wp_die، کمی استایل اضافه می کنیم. با استفاده از CSS صفحه ای ساده و زیباتر خواهیم داشت. کد های نهایی فایل wp-die.php به شکل زیر خواهد شد:

<?php
if (!headers_sent()) {
    status_header($r['response']);
}
?>
<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>خطا</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            gap: 3em;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: IRANSansX;
            direction: rtl;
            background-color: #222;
            color: #fff;
        }

        img {
            width: 10em;
        }
    </style>
</head>

<body>
    <img src="http://localhost/wp/wp-content/uploads/2024/06/warning.png">
    <h2><?php echo $message; ?></h2>
</body>

</html>

در اینجا با استفاده از flex، المان های خود را به وسط صفحه می بریم. از یک تصویر نیز برای جذابیت بیشتر استفاده می کنیم.

  1. مهدی برومند گفت:

    بسیار عالی بود دم شما گررررم با محتواهای خفن تون ❤️‍🔥

ثبت دیدگاه جدید:

جهت رسیدگی به دیدگاه خود از زبان فارسی استفاده کنید!