• 0

ظهور فراغ في الهيدر عند تحويل قالب html إلى WordPress؟

تواجهنى مشكلة عند تحويل قالب أى html إلى WordPress وذلك أجد فراغ قبل بداية الهيدر تقريبا  بمساحة 40 بيكسل أو أكثر

ومن خلال فخص العنصر من متصفح جوجل كروم أجد أن أكواد وملفات css داخل وسم <body> وليس <head>  مع أنها فى الحقيقة ما بين وسم <head></head>  وأجد رموز غريبة وعند حذفها تختفى المساحة الفارغة مع أن هذه الرموز غير موجودة  فى ملف الهيدر وهى تظهر فقط من خلال فحص العنصر من جوجل كروم .. مثل الصورة التالية https://i.suar.me/jPx1/m

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

ما هي المشكلة ..؟

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

سببب الفراغ الذي تشاهده كان بالأصل شريط التحكم للمدير.

هذا يعني أن شريط التحكم لا يظهر على القالب الجديد

جرب سجل خروج سترى الفراغ اختفى

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يبدو أن المشكلة ناتجة من اختلاف مفسرات css3 والقيم الافتراضية بين المتصفحات، حاول وضع الشيفرة البرمجية التالية في ملف/جزء css الخاص بصفحتك/موقعك والتي على الأغلب ستحل هذه المشكلة:

* {
  margin: 0;
  padding: 0;
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 11 ساعات قال هشام رزق الله:

يبدو أن المشكلة ناتجة من اختلاف مفسرات css3 والقيم الافتراضية بين المتصفحات، حاول وضع الشيفرة البرمجية التالية في ملف/جزء css الخاص بصفحتك/موقعك والتي على الأغلب ستحل هذه المشكلة:


* {
  margin: 0;
  padding: 0;
}

 

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

http://download-combo-net.eb2a.com/wp

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On ١٥‏/٢‏/٢٠١٧ at 11:14 قال Hussam Barbour:

سببب الفراغ الذي تشاهده كان بالأصل شريط التحكم للمدير.

هذا يعني أن شريط التحكم لا يظهر على القالب الجديد

جرب سجل خروج سترى الفراغ اختفى

مسجل الخروج بالفعل والفراغ يوجد فقط فى متصفح جوجل كروم حتى بعد حذف الكوكيز

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

اخي السبب في كود صفحة الهيدر header.php تداخل الاكواد
اذا امكن ضع كود الهيدر 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On ١‏/٣‏/٢٠١٧ at 00:35 قال محمد البدراني:

اخي السبب في كود صفحة الهيدر header.php تداخل الاكواد
اذا امكن ضع كود الهيدر 

يمكنك زيارة http://download-combo-net.eb2a.com/wp ومعرفة الكود من خلال فحص العنصر علما أن هذه المشكلة تظهر فقط على جوجل كروم وعلى أى تصميم خاص بالوردبريس حتى لو كان هيدر فقط

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 50 دقائق مضت قال mohamed refat:

يمكنك زيارة http://download-combo-net.eb2a.com/wp ومعرفة الكود من خلال فحص العنصر علما أن هذه المشكلة تظهر فقط على جوجل كروم وعلى أى تصميم خاص بالوردبريس حتى لو كان هيدر فقط

 

اخي العزيز قراءة المتصفحات تختلف لكن المشكلة في الهايدر يوجد رمز &#65279; لان الرمز المكتوب ترميزه والله اعلم غير UTF-8 
ولهذا قلت لك اردج ملف الهايدر حتى يتبين عندي

ddd.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 10 ساعات قال محمد البدراني:

اخي العزيز قراءة المتصفحات تختلف لكن المشكلة في الهايدر يوجد رمز &#65279; لان الرمز المكتوب ترميزه والله اعلم غير UTF-8 
ولهذا قلت لك اردج ملف الهايدر حتى يتبين عندي

ddd.png

الهيدر في المرفقات

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

header.php

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

اخي المشكلة بسبب الترميز 

جرب استخدام الترميز UTF-8 بدلا من UTF-8-BOM

وايضا ادارج كود الهيد (Head) فهذا الكود الذي قمت بادارجه  غير صحيح

<head>
<title><?php bloginfo('name'); ?> | <?php wp_title(); ?></title>
<meta content='width=device-width, initial-scale=1' name='viewport'/> 
<link rel='stylesheet' href='<?php bloginfo('template_url');?>/style.css' type='text/css' media='screen'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='http://fontawesome.io/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
 </head>
 

الصحيح الكود التالي بعد تعديل النقاط الاتية
اولا كود العنوان لا تحتاجه لان الووردبريس يضمنه تلقائيا ووتستطيع التحكم به من لوحة التحكم

ثم ادراج كود الترميز وهو

<meta charset="<?php bloginfo( 'charset' ); ?>" />

ثانياً يجب عليك تضمين وتسجيل ملفات css والجافا بشكل صحيح للمزيد اقرا مقدمة في تطوير القوالب

ثالثا: ادراج كود اللغة في في تاك HTML وهو

<html <?php language_attributes(); ?>>

رابعا ادراج الكود التالي قبل غلق ملف الهيد </head> مباشرة 

<?php wp_head(); ?>


ليكون الشكل الصحيح كالتالي

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content='width=device-width, initial-scale=1' name='viewport'/> 
<?php wp_head(); ?>
</head>
<body  <?php body_class(  ); ?> >

في حال لم تنحل المشكلة ارجو الرد بالموافقية

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

لم تنجح الطريقة السابقة لقد وجدت الحل وهو بسيط جد

كنت لا أضع وسم <html> بعد هذا الوسم <!DOCTYPE html>

هذا كان سبب المشكلة

وعندما وضعت وسم <html> بعد هذا الوسم <!DOCTYPE html> مباشرة تم حل المشكلة

 

 

 

 

 

 

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن