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

Mohamed Refaat10 · 13 فبراير 2017

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

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

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

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

Hussam Barbour · 15 فبراير 2017

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

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

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

هشام رزق الله · 13 فبراير 2017

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

* {
  margin: 0;
  padding: 0;
}

Mohamed Refaat10 · 14 فبراير 2017

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

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

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

Mohamed Refaat10 · 16 فبراير 2017

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

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

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

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

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

محمد البدراني · 28 فبراير 2017

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

Mohamed Refaat10 · 6 مارس 2017

بتاريخ On ١‏/٣‏/٢٠١٧ at 00:35 قال محمد البدراني:

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

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

محمد البدراني · 6 مارس 2017

بتاريخ 50 دقائق مضت قال mohamed refat:

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

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

Mohamed Refaat10 · 7 مارس 2017

بتاريخ 10 ساعات قال محمد البدراني:

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

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

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

header.php

محمد البدراني · 7 مارس 2017

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

جرب استخدام الترميز 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(  ); ?> >

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

Mohamed Refaat10 · 26 أبريل 2017

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

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

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

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

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

السؤال

Mohamed Refaat10

10 أجوبة على هذا السؤال

Recommended Posts

Hussam Barbour

هشام رزق الله

Mohamed Refaat10

Mohamed Refaat10

محمد البدراني

Mohamed Refaat10

محمد البدراني

Mohamed Refaat10

محمد البدراني

Mohamed Refaat10

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية