كيفية إنشاء صفحة خطأ 404 WordPress مخصصة

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

لماذا إنشاء صفحة 404 مخصصة لـ WordPress؟

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

أولاً ، دعنا نلقي نظرة على الصفحة العامة التي نحاول تجنبها.

404 صفحة عامة

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

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

يجب أن توفر لك صفحة 404 مزيدًا من المعلومات. يجب أن تكون مفيدة. يجب أن يوفر أدوات أو روابط أو نصائح أو شكلًا من أشكال المساعدة. لا تريد أن تترك بمفردك في الممر ولا تعرف إلى أين تذهب بعد ذلك.

أمثلة صفحة 404 المخصصة

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

1. جوجل

صفحة 404 الخاصة بـ Google (وليس WordPress) بسيطة. إنها مساحة صغيرة من المحتوى في وسط الشاشة. تخبرك الرسالة فقط بوجود خطأ وتوفر رسمًا لروبوت على شكل قطع. إنه لا يوفر معلومات أخرى ، ولكنه Google ، لذلك كل ما عليك فعله هو كتابة شيء آخر في شريط البحث.

2. WordPress.org

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

3. WordPress.com

تزيل صفحة 404 في WordPress.com الرأس والتذييل. يعرض رسمًا وعنوانًا ووصفًا مع روابط قابلة للنقر ومربع بحث وشعار WordPress.com. الروابط مفيدة.

4. ثيمات أنيقة

تعرض صفحة 404 للسمات الأنيقة (لأنني أعلم أنك ستبحث على أي حال) رأس ET ، وعنوانًا كبيرًا مع شرح صغير ، وزرًا باعتباره CTA. يمكنك الوصول إلى كل شيء تقريبًا من هنا.

5. واحد وعشرون

يحتوي قالب Twenty-One من WordPress على صفحة 404 تستخدم القوائم الأساسية والتذييل. لها عنوان كبير. يحتوي النص على وصف موجز ومربع بحث. تستخدم الخطوط في التصميم. الخلفية تطابق الموقع.

6. عشرون وعشرون

يعرض موضوع Twenty Twenty في WordPress الرأس والتذييل. يُظهر النص الأساسي عنوانًا كبيرًا في الوسط وشرحًا ومربع بحث. كلها تستخدم ألوان الثيم.

7. سلاك

تعرض صفحة 404 الخاصة بـ Slack (بخلاف WordPress) مربعًا في الوسط يحتوي على معلومات حول الخطأ مع رابط إلى مركز المساعدة. جميع القوائم هنا أيضًا. الجزء المثير للاهتمام هو الخلفية. إنها خلفية كرتونية يتم تمريرها يمينًا أو يسارًا لتتبع الماوس. تتحرك الحيوانات المتحركة عبر الشاشة.

8. أمازون

تتضمن صفحة 404 الخاصة بـ Amazon (وليس WordPress) شعار Amazon مع مربع بحث ، ورسالة كبيرة ، ورسالة أصغر مع رابط إلى الصفحة الرئيسية ، وصورة لحيوان مع رابط لمعرفة المزيد. يتضمن الكثير من الصور المختلفة التي يمكن عرضها. لقد تم اختيارهم عشوائيًا.

404 محتوى الصفحة

إذن ، ما الذي تحتاجه صفحة 404؟ نرى بعض العناصر المشتركة في الأمثلة أعلاه.

أولاً ، يجب أن يكون مفيدًا. لا ينبغي أن تخبر الزائر فقط بوجود خطأ. يجب أن تخبرنا ماذا يعني الخطأ. تخيل ضوء خطأ قادم في سيارتك. سيكون سؤالك الأول "ماذا يعني ذلك؟" عدم تقديم معلومات مفيدة حول الخطأ أمر محبط.

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

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

بكل بساطة. لا تحتاج صفحات 404 إلى الكثير من المحتوى. يكفي فقط ليكون مفيدا.

يتضمن المثال أعلاه:

• ألوان وأنماط الخلفية التي تتوافق مع الموقع /
• عنوان برسالة قصيرة عن الخطأ.
• نص كبير يوضح أنها صفحة 404.
• بضعة أزرار تزود الزائر ببعض الاتجاهات.

إنه بسيط ولكنه أنيق ومفيد. هذا كل ما تحتاجه.

لنلقِ نظرة على كيفية إنشاء صفحة 404 مخصصة لـ WordPress باستخدام أفكار المحتوى التي ناقشناها للتو.

كيفية إنشاء صفحة 404 مخصصة في WordPress باستخدام Divi Theme Builder

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

المثال أعلاه مأخوذ من حزمة تخطيط 4th Theme Builder. هناك الكثير من صفحات 404 المتاحة في مدونة ET. للعثور عليها ، ابحث عن "حزمة تخطيط منشئ السمات" أو تحقق منها هنا:

• قم بتنزيل أول حزمة منشئ السمات المجانية لـ Divi
• قم بتنزيل حزمة منشئ السمات الثانية المجانية لـ Divi
• قم بتنزيل حزمة منشئ القوالب المجانية الثالثة لـ Divi
• قم بتنزيل حزمة منشئ السمات الرابعة المجانية لـ Divi
• قم بتنزيل الحزمة الخامسة منشئ السمات المجانية لـ Divi
• قم بتنزيل Sixth FREE Theme Builder Pack لـ Divi

استيراد صفحة 404 مخصصة إلى Divi Theme Builder

ستجد Divi Theme Builder في لوحة معلومات WordPress بالانتقال إلى Divi > Theme Builder . هذا يفتح الصفحة حيث يمكنك إنشاء أو استيراد القوالب وتعيينها. في الزاوية اليمنى العليا ، سترى أيقونة الاستيراد. انقر فوق هذا الرمز لاستيراد قالب صفحة 404 الخاص بك.

ملاحظة - للحصول على دروس حول استخدام Divi Theme Builder ، ابحث عن "مُنشئ السمات" هنا في مدونة Elegant Themes.

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

باستيراد صفحة 404 ، يتم تعيينها تلقائيًا. بعد ذلك ، انقر فوق رمز التحرير لفتح المنشئ.

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

أخيرًا ، احفظ التغييرات لتطبيق النموذج. لديك الآن صفحة 404 مخصصة.

إنشاء صفحة 404 مخصصة باستخدام Divi Theme Builder

في Theme Builder ، حدد لإضافة قالب جديد.

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

الآن ، يمكنك إنشاء صفحة 404. معظمهم لا يستخدمون رأس أو تذييل. حدد إضافة نص مخصص .

يعرض هذا خيارين يسمحان لك ببناء جسم مخصص أو إضافة من المكتبة. حدد إنشاء جسم مخصص .

قم ببناء صفحة 404 باستخدام Divi Builder كالمعتاد. حفظ وخروج.

أخيرًا ، احفظ التغييرات. انت انتهيت.

أفكار ختامية حول إنشاء صفحة 404 مخصصة لـ WordPress

هذه هي نظرتنا إلى كيفية إنشاء صفحة 404 مخصصة لـ WordPress. يجب أن تكون صفحات 404 مفيدة. لسوء الحظ ، فإن صفحة WordPress 404 العامة ليست مفيدة ، وتوفر تجربة مستخدم سيئة. لحسن الحظ ، يمكنك إنشاء صفحة 404 الخاصة بك باستخدام Divi Theme Builder.

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

نريد أن نسمع منك. هل قمت بإنشاء صفحة 404 مخصصة لموقع الويب الخاص بك على WordPress؟ أخبرنا عن تجربتنا في التعليقات.

صورة مميزة عبر Letters-Shmetters / shutterstock.com