هيلبرنت | Helpernt - [ BBcode] : [ حصريا ]- صفحة الخطأ 404 xenforo مع إمكانية التحويل تلقائيا بعد مدة من اختيارك

مقدمة:
على الرغم من أنّ رسالة الخطأ 404 قد تسبب إرباكًا للمستخدمين (والتي تدّل على أنّ الموقع لم يستطع إيجاد الصفحة المطلوبة)، ولكن ليس بالضرورة أن يكون الأمر كذلك. فهذا الكود سيجعل من صفحة الخطأ 404 فعّالة لتوجيه مستخدميك إلى المسار الصحيح.
[ توافق الكود:]- XENFORO 1-2
مميزات الكود:
1-إمكانية إغلاق النافدة باللون الأحمر أثناء فترة الإنتضار.
2- إمكانية تغيير لون خلفية النافدة التي ذكرناها قبل.
3- إمكانية تحويل الزائر لصفحة من اختيارك أو الصغحة الرئيسية
4- إمكانية تغيير وقت الإنتضار إما تختار 0 سيتم تحويل الزائر دون إنتضار أو وضع رقم من اختيارك 10 أي 10 ثواني على سبيل المثال
5- ‘إمكانية تغيير الخلفية الصفراء لتتناسب مع منتداك أو مع ذوقك
هام جدا: أنا أنصح بشدة بعدم تجاوز 5 ثواني كفترة انتضار حتى لا يقوم الزائر بإغلاق منتداك .... من كثرة الملل الذي سببته له أثناء فترة الإنتضار

اقتباس:

هذا الكود والشرح لن تجده في أي موقع عربي أو أجنبي فهو حصري لقناة المسيرة وموقع هيلبرنت

https://i.imgur.com/WhR8ul2.png

النتيجة:

https://s2.gifyu.com/images/555c2da36b16c59e002.gif

https://s2.gifyu.com/images/2018-11-19_17-12-56.gif

لماذا عليك إنشاء صفحة الخطأ 404 وكيف تنشأها؟

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

كود صفحة الخطأ 404 xenforo مع إمكانية التحويل تلقائيا بعد مدة من اختيارك

كود:

<center>



<meta name="viewport" content="width=device-width, initial-scale=1">



<style>



.alert {



    padding: 20px;



    background-color: #f44336;



    color: white;



}



.closebtn {



    margin-left: 15px;



    color: white;



    font-weight: bold;



    float: right;



    font-size: 22px;



    line-height: 20px;



    cursor: pointer;



    transition: 0.3s;



}





.closebtn:hover {



    color: black;



}



</style>



</head>



<body>



<div class="alert">



  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>



  <strong>خبر عاجل:</strong> صفحة الخطأ 404 حصرية لفائدة قناة المسيرة على اليوتيوب وموقع هيلبرنت



</div>



<style>



body {



    background-color: #ffcc1b;



}



</style>



    <div id='oopss'>



    <div id='error-text'>



        <img src="https://cdn.rawgit.com/ahmedhosna95/upload/1731955f/sad404.svg" alt="404">



        <center>



<span>صفحة الخطأ 404 </span>



        <p class="p-a">هذه الصفحة غير موجودة! إما أن تم حذفها او تغيير العنوان الخاص بها.</p>



        <p class="p-b">سيتم توجيهك الى الصفحة الرئيسية في غضون 5 ثوانٍ...</p>



            </head><META http-equiv="refresh" content="5;URL=index.php"><body></html>



        </center>



    </div>



</center>

شرح التركيب:

فيديو توضيحي:

في قالب

كود:

error

إبحث عن الكود أسفله غالبا ستجده في السطر الأول

إبحث عن

كود:

<xf:title>{{ phrase('oops_we_ran_into_some_problems') }}</xf:title>

بعده أضف مباشرة كود صفحة الخطأ 404 xenforo مع إمكانية التحويل تلقائيا بعد مدة من اختيارك

https://i.imgur.com/SVDIjyi.png

https://i.imgur.com/1Eh0m3K.png
لتغيير لون الخلية العاجل أي الخفية الحمراء:

كود:

background-color: #f44336;

لتغيير لون الخلية الصفراء:

كود:

background-color: #ffcc1b;

لتغيير emoji:

كود:

<img src="https://cdn.rawgit.com/ahmedhosna95/upload/1731955f/sad404.svg" alt="404">

لتغيير وقت الإنتضار قبل إعادة التوجيه:

كود:

</head><META http-equiv="refresh" content="5;URL=index.php"><body></html>

غير الرقم 5 لوقت يناسبك 0 كي يتم التحويل مباشرة دون إنتضار
لتغيير رابط التحويل لرابط من اختيارك:
غير index.php لصفحة من اختيارك

بخصوص الجيل الأول نعم نفس الشرح مع اختلاف بسيط ضع الكود مباشرة بعد

كود:

<xen:h1>{$xenOptions.boardTitle} - {xen:phrase error}</xen:h1>

صورة من الجيل الأول:

https://i.imgur.com/Ez9alJd.png