شاشة الإنتظار

لغة القالب

انشاء صفحات الخطأ أو اعادة توجيهها

كن مدون
الأحد, أغسطس 24, 2014
Error Page 404 Redirect
ان صفحات الخطأ تعتبر من الأشياء الأساسية في بلوجر سنتطرق  لأهم خصائص تلك الصفحات وطرق اعدادها أو حتى ان يتم إعادة توجيهها وحتى ضبط القوالب التي لا تدعم عمل صفحات الخطأ نبدأ أولا بطريقة تفعيل صفحة الخطأ
  1. من إعدادات المدونة
  2. نختار تفضيلات البحث
  3. الاخطاء وعمليات إعادة التوجيه 
  4. لم يتم العثور على الصفحة المخصصة
  5. نضغط على كلمة تحرير التي بجانبها
صورة توضيحية

في المكان المخصص لإضافة الأكواد نضيف الكود التالى
<style>
#cnmu-Error-page {
  background:#FFFFFF;
  border-radius: 8px;
  box-shadow: 0 0 4px #222222;
  color: #555555;
  font: 25px/2em tahoma;
  margin: 20px auto;
  padding: 1px 10px 50px;
  width: 500px;
}
.cnmu-e-title {
  color: #F10018;
  font: bold 40px tahoma;
  text-shadow: 0 0 1px #222222;
}
.Home-e {
  background: url("https://lh4.googleusercontent.com/-9cuZu6qEDO8/U_mAN1ujmyI/AAAAAAAAEjA/D7PahwoU4lA/s64/home.png") no-repeat scroll 97% center #000000;
  border-radius: 8px;
  box-shadow: 0 0 2px #000000;
  color: #FFFFFF;
  display: inline-block;
  margin: 5px auto;
  padding: 8px 80px 15px 20px !important;
  text-decoration: none !important;
  transition: all 0.7s ease 0s;
}
.Home-e:hover {
  background: url("https://lh4.googleusercontent.com/-9cuZu6qEDO8/U_mAN1ujmyI/AAAAAAAAEjA/D7PahwoU4lA/s64/home.png") no-repeat scroll 97% center #B10418;
}
#cnmu-e-search {
  border: 4px solid #FFFFFF;
  display: inline-block;
  box-shadow: 0 0 4px #000000;
}
#search-text-e {
  background:#000000;
  border: 0 none;
  color: #DDDDDD;
  font: 20px tahoma;
  padding: 15px 5px 20px;
  width: 200px;
}
#search-submit-e {
  background:#B10418;
  border: 0 none;
  color: #FFFFFF;
  cursor: pointer;
  font: 20px tahoma;
  margin-right: -8px;
  padding: 14px 20px 19px;
  transition: all 0.7s ease 0s;
}
#search-submit-e:hover {
  background:#555555;
}
</style>
<div id="cnmu-Error-page">
<p class="cnmu-e-title">صفحة خطأ</p>
<p>الموضوع أو الصفحة التي تبحث عنها إما انها حذفت أو غير موجودة من البداية اضغط على الرابط التالي للعودة للرئيسية</p>
<a class="Home-e" href="/">الرئيسية</a>
<p>أو إستخدم محرك البحث التالي لإيجاد ما تريد</p>
<div id='cnmu-e-search'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='search-text-e' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البحث ...&quot;;}' onfocus='if (this.value == &quot;البحث ...&quot;) {this.value = &quot;&quot;;}' type='text' value='البحث ...'/>
<input id='search-submit-e' type='submit' value='بحث'/>
</form>
</div>
</div>
هذا هو كود صفحة خطأ يمكنك معاينتها من هنـــــــــــــا
هذا اللون #FFFFFF هو لون الخلفية يمكنك تغيره بلون آخر او ازالة هذه الأسطر إن اردتها بلون خلفية القالب
  background:#FFFFFF;
  border-radius: 8px;
  box-shadow: 0 0 4px #222222;
أما الرقم 500 هو المقاس يمكنك تغيره أو جعله نسبة مئوية ليكون متجاوب 98%
طبعا هناك الوان اخرى بقليل من الخبرة يمكنك تعديلها

إعادة التوجيه

غاليا ما تستخدم إعادة التوجيه لسببين
الاول من لا يريد ان يضيف صفحة خطأ فيعيد التوجيه الى الرئيسية
الثاني القالب محذوف منه صفحات الخطأ أو به مشكلة هنا الحل كالتالي
أضف الكود التالي فوق الوسم</head>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
html {
  background: url(https://lh3.googleusercontent.com/-yuSvWA6ps4o/VALzDMz0TqI/AAAAAAAAElo/uOmRhgcAHVs/s320/Error.png) no-repeat scroll center 50% rgba(0, 0, 0, 0);
}
  body {display:none;}
</style>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function() {
location.pathname= &quot;/&quot;
}, 5000);
</script>
</b:if>
الكود سيعيد التوجيه الى الصفحة الرئيسية
ويمكنك استبدال رابط الصورة المعلم بالاخضر التي تظهر عند إعادة التوجيه برابط صورة أخرى
وان اردت التوجيه الى صفحة أخرى غير الرئيسية
انسخ رابطها واضفه بدلا من علامة /
على أن يكون الشكل كالتالي
مثال هذا رابط موضوعنا
http://cnmu.blogspot.com/2014/08/Error-page.html
لو اردنا اعادة توجيه صفحة الخطأ للموضوع نضيف بدلا من علامة /
الجزء الأحمر فقط من الرابط وهذا ينطبق على أى رابط في المدونة ان اردنا ان نوجه صفحات الخطأ اليه
هذه هي اهم طرق عمل صفحات الخطأ مع أى قالب وتجنب الأخطاء التي تكون عائقاً في انشاء الصفحة في بعض القوالب
تحياتي

نظام التعليقات المتاح حالياً هو الخارجي وذلك بسبب تجارب أقوم بها حالياً على نظام التعليقات وسيعود النظام السابق في أقرب وقت ممكن

‏قال dfghjkl
عاشت ايدك هذا الموضوع كنت انتضرة بشدة =d
‏قال Unknown
الله ينور عليك ياغالى تسلم ايدك
‏قال كن مدون
حياكم الله اخواني الكرام
أسعدني مروركم =r
وموفقين في تطبيق الشرح تحياتي
‏قال ahmed hegazy
موضوع جميل ميزة اخى عمرو الشرح بالتفصيل والتنسيق شكرا لمجهودك الرائع
‏قال كن مدون
نورت الموضوع أخي احمد وشكراً على مرورك يا طيب
‏قال مدون محترف
شكرا لك اخي عمرو هذا الموضوع من اهم المواضيع و يحتاجه كل مدون في مدونته =r
‏قال كن مدون
لا تحرمنا من مرورك العطر أخي منير تحياتي لك
‏قال غير معرف…
للأسف كل هذه الطرق لكن لم تظهر صفحو الخطأ..ما المشكل
‏قال كن مدون
ربما يكون خلل في القالب عموما تم عمل تعديل على الجزء الخاص بإعادة التوجيه راجعه مرة أخرى وجرب الكود الجديد
‏قال Unknown
في البداية اجب اشكر علي المجهود الرائع في كل اعمالك المميزة
ولكن عند تجربة الكود لا تظهر الرسال تظهر الرسالة الموضعة في القالب الخا بك هو Food-Less-up
لم ارسالك الا بعد محولات كثيرة ارجو الرد في اقرب وقت

‏قال كن مدون
أخي الفاضل انا جربت تركيب الصفحة على القالب وعملت جيداً دون مشاكل
http://t-cnmu.blogspot.com/404
‏قال Ibrahim Al-Nuaimy
شكراً لك اخي الكريم على هذه التدوينة فهي مهمة جداً
حقيقة انا متابع لمدونتك وقد استفدت من خبرتك كثيراً
ارجو ان تعطيني رأيك بمدونتي .. فرأيك يهمني (خاصة انك خبير بلوجر)
http://www.bramij-online.com/
شكراً مقدماً
‏قال كن مدون
مدونة جيدة اخي الكريم إستمر
موفق بإذن الله
اللي ما ظهرت عنده صفحة الخطأ يغير القيمة scroll center 50% الى scroll center 0%
وحياكم الله لوتبون استفسار انا في خدمتكم
‏قال Mohamed
فى القالب الخمسة النمطية الاول افعل انى طريقة
‏قال كن مدون
الطريقة التي تناسبك أخي كلاهما سيعمل على القوالب النمطية
ويمكنك مراجعة الطريقة التالية تعد أفضلهم
http://cnmu.blogspot.com/2015/10/Customize-Error-Page.html

عدد المواضيع