401، 403، و 404 - لقد واجهنا جميعًا هذه الأكواد الخاصة بحالة HTTP أثناء استكشافنا للشبكة العالمية على الأقل مرة واحدة في حياتنا. كيف تشعر عندما تظهر هذه الصفحات الخاطئة بدلاً من ما تبحث عنه؟

عدم العثور على ما تبحث عنه يثير الإحباط للغاية. لذا، يجب أن تكون هذه الصفحات غير محبطة بقدر الإمكان للتعويض عن الخيبة الأولية وتشجيع المستخدمين على متابعة تصفح الموقع.

بينما تأتي صفحات الخطأ مضمنة بشكل افتراضي عند بناء موقع ويب، السؤال الحقيقي هو: هل يجب أن نتركها بسيطة وغير مزينة، أم يجب أن نحاول جعل تجربة المستخدم معها أكثر تفاعلية؟

خلال DrupalCamp London، اكتشفت أن العديد من المطورين يواجهون تحدي إنشاء وتخصيص هذه الصفحات. كل شيء يبدأ بالمصممين الذين يحاولون جعل كل شيء جذاب وغير مجهد. ثم، يعمل المطورون على تخصيص وإحياء هذه التصميمات.

من تجربتي، يجب ألا تترك هذه الصفحات كما هي. يمكن لهذه الصفحات أن تحتوي على عناصر صغيرة وغريبة تساعد المستخدمين على نسيان أنهم لم يحصلوا على النتيجة المتوقعة - لنسيان وتسامح الخطأ.

كانت تقريبًا جميع مشاريعي السابقة تحتوي على صفحات خطأ مزينة. أشعر أنه من مسؤوليتي طلب تصميمات لهذه الصفحات كلما تم تجاهلها.

كيفية تخصيص صفحات الخطأ في Drupal

دعونا ننظر في الطرق المختلفة المتاحة:

نهج Drupal 7

في Drupal 7، لديك نهجين رئيسيين:

استخدام القالب الخاطئ العام:

// page--error.tpl.php
<div class="error-page">
 <?php if ($messages): ?>
   <div class="messages">
     <?php print $messages; ?>
   </div>
 <?php endif; ?>
 
 <div class="error-content">
   <?php print render($page['content']); ?>
 </div>
</div>

2. إنشاء قوالب محددة لكل نوع خطأ باستخدام خطاف في السمة الخاصة بك:

// template.php
function YOURTHEME_preprocess_page(&$variables) {
 // Get the current HTTP status code
 $status = drupal_get_http_header("status");
 
 if ($status == "404 Not Found") {
   // Create template suggestion for 404
   $variables['theme_hook_suggestions'][] = 'page__404';
 }
 elseif ($status == "403 Forbidden") {
   // Create template suggestion for 403
   $variables['theme_hook_suggestions'][] = 'page__403';
 }
 elseif ($status == "401 Unauthorized") {
   // Create template suggestion for 401
   $variables['theme_hook_suggestions'][] = 'page__401';
 }
}

ثم إنشاء ملفات القالب المحددة:

// page--404.tpl.php
<div class="error-404">
 <h1>Page Not Found</h1>
 <p>Sorry, but the page you were looking for could not be found.</p>
 <?php print theme('search_block_form'); // Optional: Add a search form ?>
</div>

// page--403.tpl.php
<div class="error-403">
 <h1>Access Denied</h1>
 <p>You don't have permission to access this page.</p>
 <?php if (!$logged_in): ?>
   <?php print drupal_render(drupal_get_form('user_login_block')); ?>
 <?php endif; ?>
</div>

يمكنك بعد ذلك تصميم هذه القوالب باستخدام CSS للسمة الخاصة بك:

.error-404, .error-403 {
 text-align: center;
 padding: 50px 20px;
 max-width: 600px;
 margin: 0 auto;
}
.error-404 h1, .error-403 h1 {
 font-size: 48px;
 color: #e74c3c;
 margin-bottom: 20px;
}
.error-404 p, .error-403 p {
 font-size: 18px;
 line-height: 1.6;
 color: #555;
}

من خلال تنفيذ هذه التخصيصات، يمكنك إنشاء صفحات خطأ تعلم المستخدمين ليس فقط عن ما حدث خطأ ولكن أيضًا توفر تجربة مستخدم أفضل مع خيارات مفيدة مثل وظائف البحث أو نماذج تسجيل الدخول عند الحاجة.

تذكر أن تمسح ذاكرة التخزين المؤقت لسجل السمة بعد إضافة ملفات القالب الجديدة حتى يتعرف Drupal عليها في bash

drush cc all