اذهب إلى المحتوى

كيف تنشأ صفحة خطأ 404 مخصصة في ووردبريس


Mohammad Hammal

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

فهم الخطأ 404

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

الصفحة الافتراضية للخطأ 404

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

ملف 404.php

<?php get_header(); ?>


<h2>Error 404 - Page Not Found.</h2>


<?php get_sidebar(); ?>

<?php get_footer(); ?>

التعليمات البرمجية السابقة ستقوم بإظهار مخرجات بسيطة، ضمن وسم h2. كما تستدعي أيضًا رأس الموقع (header)، الشريط الجانبي (sidebar)، وتذييل الموقع (footer) وكل هذه العناصر افتراضية ويمكنك تعديلها طبعًا لتناسب القالب الذي تقوم بتصميمه.

العمل على قالب الصفحة

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

ملف 404 – مع إضافة مربع البحث

<?php get_header(); ?>

<h2>Error 404 - Page Not Found.</h2>

Search:

<?php include(TEMPLATEPATH . "/searchform.php"); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

جعل الصفحة أكثر ديناميكية

كي نجعل صفحة 404 أكثر ديناميكية يمكننا استخدام ميزة إعادة التوجيه بحيث تظهر صفحة الخطأ للمستخدم لفترة وجيزة من الزمن ومن ثم يتم إعادة توجيه المستخدم إلى الصفحة الرئيسية للموقع. كما يمكن الاستفادة من هذه الصفحة في ارتفاع ترتيب الموقع في محركات البحث.
في المثال التالي يمكننا البدء بتعديل ملف header.php من القالب الخاص بك. وإضافة ما يلي:

<?php if (is_404()) { $redirectHome = get_option('home'); ?>
<?php echo $redirectHome; ?>

بعد إضافة هذه التعليمات، سنقوم الآن بتعديل ملف 404.php ليصبح بالشكل التالي:

<?php get_header(); ?>

<h1>Error 404 - File Not Found.</h1>

<h3>Please <a href="<?php bloginfo('home'); ?>" Click here</a> to return to our home page, or you can wait to be redirected in 15 seconds.</h3>

<?php get_footer(); ?>

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

التأكد من عمل الصفحة

يمكن التأكد أن صفحة 404 تعمل بكتابة رابط موقعك وإلحاقها بعنوان صفحة أو مقال تعرف أنه غير متواجد في موقعك.
مثال: http://www.yourwebsitedomain.com/test404page.php

إذا لم تعمل

إذا لم يتم توجيهك إلى الصفحة هذا يعني أنه علينا تعديل ملف htaccess. على الخادم (server) كي نجعل صفحة 404 تعمل ابحث عن ملف htaccess. في تنصيب ووردبريس الخاص بك وأضف السطر التالي له:

ErrorDocument 404 /index.php?error=404

لكن إذا لم يكن تنصيب الووردبريس في المجلد الجذر للخادم الخاص بك يجب الإشارة إلى المجلد الفرعي الذي نصبت عليه ووردبريس:

ErrorDocument 404 /YOURSUBFOLDERNAME/index.php?error=404

هذا سيجبر الخادم على استخدام ملف 404.php

مثال كامل

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

<?php get_header(); ?>

<h1>404 Error</h1>

We cannot seem to find what you were looking for.

Maybe we can still help you.

<ul>

<li>You can search our site using the form provided below.</li>

<li>You can visit <a href="<?php bloginfo?>"</a></li>

<a href="<?php ('url'); ?>" the homepage.</a>

<li>Or you can view some of our recent posts.</li>

</ul>

Search:

TEMPLATEPATH . "/searchform.php"); ?>

<h3>Recent Posts</h3>

<ul>
	<?php query_posts('posts_per_page=5'); if (have_posts()) : while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" title="Permalink for : <?php the_title(); ?>"><?php the_title(); ?></a>
	endwhile; endif; ?>
	</ul>

<?php get_footer(); ?>

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

جعل الصفحة أكثر ملائمة وبهجة للمستخدم

لجعل هذه الصفحة أكثر جاذبية للمستخدم، يمكن استخدام العديد من الأفكار كوضع صور خلفية لهذه الصفحة أو كتابة تعليمات html خاصة لجعل هذه الصفحة أكثر قوة وتنوعًا وإليك بعض الأمثلة لصفحات 404 مميزة:

  1. Mundofox.com

error404_example1.jpeg

  1. CSSRemix.com

error404_example2.jpeg

  1. CSSRemix.com

error404_example3.jpeg

  1. ChrisJennings.com

error404_example4.jpeg

  1. ook.co.uk

error404_example5.jpeg

  1. Youcastr.com

error404_example6.jpeg

  1. Mixx.com

error404_example7.jpeg

  1. JustCreativeDesign.com

error404_example8.jpeg

  1. Agens.no

error404_example9.jpeg

  1. Mushroomdigital.co.uk

error404_example10.jpeg

استخدمها بحكمة

من الجيد دائمًا استخدام صفحة الخطأ 404 سواءً في ووردبريس أو في مواقع html الثابتة (static)، والاستفادة منها بوضع إعلانات مثلًا.
هناك العديد من الطرق لتصميم صفحة 404 الخاصة بك، والعديد من الطرق أيضًا لمساعدة زوار الموقع في الوصول إلى ما يبحثون عنه، استخدم الأمثلة المذكورة أعلاه كما ترغب واختر ما يناسبك للوصول إلى أفضل نتيجة.

ترجمة -وبتصرّف- للمقال How to Create a Custom WordPress 404 Error Page 

حقوق الصورة البارزة محفوظة لـ Freepik

تم التعديل في بواسطة zahershullar


تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...