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

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

Mohamed Refaat10

السؤال

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

* {
  margin: 0;
  padding: 0;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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


* {
  margin: 0;
  padding: 0;
}

 

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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> مباشرة تم حل المشكلة

 

 

 

 

 

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...