✉️ دليل استكشاف أخطاء قوالب البريد الإلكتروني وإصلاحها
منشِئ النماذج السهل بواسطة WhiteStudio — تسليم وعرض البريد الإلكتروني
الإصدار 4.0
1. كيفية عمل قوالب البريد الإلكتروني
يعتمد “منشِئ النماذج السهل” على نظام السحب والإفلات لبناء قوالب البريد الإلكتروني، ويخزن بيانات التصميم في هيكل JSON يُعرف باسم EFBDATA.
عند إرسال نموذج ما، تقرأ الإضافة بيانات EFBDATA، وتحوّل كل مكون تصميمية إلى كود HTML آمن ومتوافق مع صناديق البريد (باستخدام الجداول، والأنماط المضمنة Inline Styles، وتقنية VML لبرنامج Outlook)، ثم تُرسل النتيجة عبر الدالة wp_mail().
مسار المعالجة
←
←
←
←
2. مرجع كتل البريد الإلكتروني
يدعم منشئ القوالب الكتل التالية، حيث تُعرَض كل مكون برمجياً على شكل جداول HTML مدعومة بأنماط CSS مضمنة.
| المكون | الوصف | التوافق مع تطبيقات البريد |
|---|---|---|
| Header (الترويسة) | القسم العلوي، يدعم تعيين لون خلفية مسمط أو تدرج لوني، ويمكن أن يحتوي على شعار وعنوان. | ✅ جميع التطبيقات (مع توفير لون احتياطي ثابت للتدرجات في Outlook) |
| Logo (الشعار) | يعرض صورة شعار الموقع، ويدعم التحكم في العرض والمحاذاة والنص البديل (alt). | ✅ جميع التطبيقات |
| Title (العنوان) | نص مخصص للعنوان مع خيارات شاملة لتعديل نوع الخط، حجمه، سمكه، لونه، ومحاذاته. | ✅ جميع التطبيقات |
| Text (النص) | فقرة نصية تدعم خيارات الخط، اللون، ارتفاع السطر، والحشو الهامشي (Padding). | ✅ جميع التطبيقات |
| Message (الرسالة) | محتوى النموذج الديناميكي؛ حيث يُستبدل تلقائيًا ببيانات النموذج الفعلية عند الإرسال. | ✅ جميع التطبيقات |
| Button (الزر) | زر اتخاذ إجراء يدعم الروابط، الألوان، والحواف المستديرة. يعتمد على تقنية VML لضمان توافقه مع Outlook. | ✅ جميع التطبيقات (بدعم VML احتياطي لـ Outlook) |
| Divider (الفاصل) | خط أفقي فاصل مع خيارات لتعديل اللون، السماكة، والعرض. | ✅ جميع التطبيقات |
| Spacer (المساحة) | فراغ عمودي يمكن ضبط ارتفاعه بدقة لتنظيم المساحات بين الكتل. | ✅ جميع التطبيقات |
| Image (الصورة) | عرض صورة مستضافة خارجيًا. تدعم ضبط العرض، النص البديل، المحاذاة، وإضافة رابط اختياري. | ✅ جميع التطبيقات (تتطلب رابط URL عام ومباشر) |
| Columns (الأعمدة) | تخطيط مرن يعرض المحتوى في عمودين متجاورين، يعتمد على الجداول البرمجية لضمان أعلى توافق. | ✅ جميع التطبيقات (تترتب رأسيًا تلقائيًا على الشاشات الصغيرة) |
| Social (التواصل الاجتماعي) | أيقونات وروابط حسابات التواصل الاجتماعي مع إمكانية تخصيص الألوان. | ✅ جميع التطبيقات (أيقونات بصيغة PNG) |
| Footer (التذييل) | قسم نصي مخصص لتذييل البريد، يدعم خيارات الألوان، الخطوط، المحاذاة، والخلفيات. | ✅ جميع التطبيقات |
| HTML Block (مكون HTML) | لإدراج كود HTML مخصص ومباشر، حيث يُعرَض المحتوى كما هو تمامًا دون معالجة مسبقة. | ⚠️ يعتمد كليًا على جودة الكود المكتوب ونظافته |
3. الإعدادات العامة
تُطبق الإعدادات العامة على قالب البريد الإلكتروني بأكمله وتؤثر بشكل مباشر في جميع الكتل المستخدمة.
| الإعداد | القيمة الافتراضية | الوصف |
|---|---|---|
| لون الخلفية الخارجية | f8f9fa# |
اللون المخصص للخلفية الخارجية المحيطة بالبريد بالكامل. |
| خلفية منطقة المحتوى | ffffff# |
اللون الخاص بخلفية منطقة المحتوى الرئيسية (البطاقة الداخلية). |
| عرض المحتوى | 600px |
الحد الأقصى لعرض محتوى البريد، ويُعد مقاس 600px هو المعيار القياسي عالميًا. |
| نصف قطر الحواف | 8px |
زوايا مستديرة لهيكل المحتوى الرئيسي، ويتجاهلها تطبيق Outlook عادةً. |
| نوع الخط | Segoe UI, Tahoma… إلخ | الخط الافتراضي لكتل النصوص، علماً بأن خطوط الويب غير مدعومة؛ لذا يجب استخدام خطوط النظام الآمنة. |
| اتجاه النص | كشف تلقائي (LTR/RTL) | تحديد اتجاه القراءة، ويُضبط تلقائيًا بناءً على لغة موقع ووردبريس الأساسية. |
| لون خلفية الأزرار | #202a8d |
اللون الافتراضي لخلفيات جميع كتل الأزرار المضافة. |
| لون نص الأزرار | ffffff# |
اللون الافتراضي للنصوص المكتوبة داخل كتل الأزرار. |
4. مشاكل تسليم البريد الإلكتروني
❌ المشكلة: الرسائل لا تُرسَل نهائيًا
السبب: يعتمد ووردبريس افتراضيًا على دالة mail() الخاصة بـ PHP، والتي غالبًا ما تكون معطلة أو غير مهيأة بالشكل الصحيح على سيرفر الاستضافة.
الحل:
- قم بتثبيت إضافة SMTP موثوقة مثل WP Mail SMTP أو Post SMTP أو FluentSMTP.
- اضبط إعدادات الإضافة بدقة باستخدام بيانات موفر خدمة البريد الخاص بك (مثل Gmail, Outlook, SendGrid… إلخ).
- استخدم خاصية “إرسال بريد تجريبي” المتوفرة في تلك الإضافات للتأكد من نجاح الاتصال.
- راجع سجل أخطاء ووردبريس في المسار
wp-content/debug.logللوقوف على أي مشاكل برمجية تخص الإرسال.
❌ المشكلة: البريد يُرسَل ولكن لا يصل إلى صندوق المستلم
السبب: يخرج البريد بنجاح من الموقع، ولكنه يُرفض أو يُصفى كرسالة مزعجة من قِبل سيرفر البريد المستقبِل.
الحل:
- اطلب من المستلم التحقق من مجلد البريد المزعج / Junk Email.
- تأكد من إعداد سجلات DNS الخاصة بنطاقك بشكل سليم، وتحديدًا سجلات حماية الهوية: SPF و DKIM و DMARC.
- تجنب استخدام عناوين بريد مجانية (مثل gmail.com أو yahoo.com) في حقل بريد المرسل “From” — استخدم دائمًا بريدًا رسميًا يتبع نطاق موقعك الخاص.
- تواصل مع الدعم الفني للاستضافة للتأكد من أن المنافذ (Ports) الخاصة بالبريد الصادر (مثل 25 أو 587) غير محظورة.
❌ المشكلة: تأخر وصول الرسائل
السبب: تضع بعض شركات الاستضافة المشتركة رسائل البريد الصادرة في طوابير انتظار مجدولة، أو تفرض حدودًا صارمة على معدل الإرسال اللحظي.
الحل:
- اعتمد على خدمات إرسال احترافية ومتخصصة (مثل SendGrid, Mailgun, Amazon SES) لضمان تسليم فوري وموثوق.
- تحقق من سياسة الاستضافة وحدود الإرسال المسموح بها لحسابك، وقم بترقيتها إذا لزم الأمر.
mail() الافتراضية واستبدالها بإضافة SMTP مع موفر خدمة بريد قوي لضمان وصول الإشعارات فورًا.5. العرض عبر تطبيقات البريد المختلفة
تختلف تطبيقات البريد الإلكتروني اختلافًا كبيرًا في مدى دعمها لخصائص HTML و CSS الحديثة. إليك جدولاً يوضح مستويات الدعم المتوقعة:
| الميزة | Gmail | Outlook (نسخة المكتب) | Apple Mail | Yahoo |
|---|---|---|---|---|
| CSS مضمن (Inline) | ✅ | ✅ | ✅ | ✅ |
| ألوان الخلفية | ✅ | ✅ | ✅ | ✅ |
| تدرجات CSS (Gradients) | ✅ | ❌ (لون احتياطي ثابت) | ✅ | ✅ |
| الحواف المستديرة | ✅ | ❌ (زوايا حادة) | ✅ | ✅ |
| خطوط الويب الخارجية | ❌ | ❌ | ✅ | ❌ |
| صور SVG | ❌ | ❌ | ✅ | ❌ |
| صور PNG | ✅ | ✅ | ✅ | ✅ |
| رسومات المتجهات (VML) | ❌ | ✅ | ❌ | ❌ |
| الحد الأقصى للعرض Max-width | ✅ | ❌ (تُستبدل بجداول MSO) | ✅ | ✅ |
6. مشاكل مكون الترويسة (Header)
❌ المشكلة: يظهر التدرج اللوني كلون ثابت ومصمت في Outlook
السبب: يعتمد تطبيق Microsoft Outlook لسطح المكتب على محرك عرض برمجيات Word، وهو محرك قديم لا يدعم قراءة تدرجات CSS اللولبية أو الخطية.
الحل: هذا السلوك طبيعي ومتوقع قياسًا بقيود Outlook؛ وتعمل الإضافة تلقائيًا على استخراج اللون الأول من التدرج المختار لتعيينه كلون احتياطي ثابت للبريد في Outlook، بينما يظهر التدرج بكامل جماليته في تطبيقات Gmail و Apple Mail و Yahoo.
❌ المشكلة: اختفاء لون خلفية الترويسة بالكامل
السبب: تقوم بعض التطبيقات عند تفعيل “الوضع الداكن” (Dark Mode) بتجاوز ألوان الخلفيات المحددة قسريًا وتعديلها لتناسب راحة العين.
الحل:
- يخضع هذا الأمر لسياسة تطبيق البريد نفسه ولا يمكن للمرسل التحكم فيه بشكل كامل.
- يُنصح دائمًا باختيار ألوان نصوص وخلفيات متوازنة تظل واضحة وقابلة للقراءة في كلا الوضعين الفاتح والداكن.
- قم دائمًا بإرسال معاينة تجريبية لنفسك واختبر المظهر على الهاتف مع تفعيل الوضع الداكن للاطمئنان على وضوح النص.
7. مشاكل مكون الشعار (Logo)
❌ المشكلة: صورة الشعار لا تظهر للمستلمين
السبب: إما أن الرابط المباشر للصورة غير متاح للعامة على الإنترنت، أو أن إعدادات تطبيق البريد لدى المستلم تقوم بحظر تحميل الصور التلقائي.
الحل:
- تأكد من رفع الشعار مباشرة في مكتبة وسائط ووردبريس الخاصة بالموقع، وتجنب استخدام روابط خارجية قد تقع تحت طائلة الحظر.
- تأكد من إمكانية الوصول للصورة من خارج شبكة الإدارة؛ جرب فتح رابط الشعار في نافذة تصفح خفي.
- إذا كان موقعك يعمل ببروتوكول غير آمن HTTP، فقد تحجب التطبيقات صورك؛ احرص على تفعيل بروتوكول HTTPS الآمن.
- تقوم بعض التطبيقات بحظر الصور افتراضيًا لحين قيام المستخدم بالنقر على “إظهار الصور”؛ لذا احرص على كتابة نص بديل (Alt Text) واضح ليظهر كعنوان للصورة أثناء تحميلها.
❌ المشكلة: يظهر الشعار بحجم كبير أو صغير جدًا ومشوّه
السبب: عدم تطابق أبعاد العرض المحددة في لوحة خصائص المنشئ مع الأبعاد الحقيقية لملف الصورة المرفوع.
الحل: اضبط خيار العرض (Width) من نافذة إعدادات مكون الشعار؛ ويُفضل عمومًا أن يتراوح عرض الشعار في رسائل البريد الإلكتروني بين 100px و 200px كحد أقصى.
8. مشاكل كتل النصوص والعناوين
❌ المشكلة: الخط لا يطابق شكل الخط المعروض في لوحة المعاينة
السبب: لا تدعم أغلب برامج البريد خطوط الويب الخارجية؛ والخط الذي تراه في المنشئ قد لا يكون مثبتًا على نظام التشغيل الخاص بجهاز المستلم.
الحل:
- اعتمد على عائلة الخطوط الآمنة والمضمنة في كافة الأنظمة مثل: Arial, Verdana, Tahoma, Georgia, Segoe UI.
- تقوم الإضافة بتضمين خطوط احتياطية (Fallback fonts) لضمان بقاء الرسالة مقروءة ومرتبة على أي جهاز.
❌ المشكلة: تغيّر لَوْن النص أو تشوهه عند تفعيل الوضع الداكن
السبب: يمكن لـ Gmail و Outlook و Apple Mail في الوضع الداكن عكس ألوان النصوص الفاتحة وتعديل درجات الألوان تلقائيًا لتوائم الخلفيات المظلمة.
الحل:
- تجنب استخدام نصوص ذات ألوان باهتة أو فاتحة جدًا فوق خلفيات بيضاء (لأنها قد تنعكس وتصبح غير مرئية تمامًا في الوضع المظلم).
- حافظ على تباين عالي وقوي بين لَوْن الخط ولَوْن الخلفية المحيطة به.
❌ المشكلة: يظهر النص العربي محاذيًا من اليسار إلى اليمين (LTR) بشكل مقلوب
السبب: عدم ضبط إعدادات اتجاه النص الأساسية بما يتوافق مع لغة المحتوى المكتوب.
الحل: تتعرف الإضافة على خاصية RTL (الكتابة من اليمين لليسار) تلقائيًا عبر إعدادات ووردبريس؛ فإذا كان المحتوى عربيًا، تأكد من ضبط لغة الموقع الرسمية من خلال توجهك إلى الإعدادات > عام > لغة الموقع: العربية.
9. مشاكل مكون الرسالة (Message)
❌ المشكلة: ظهور الكود القصير “shortcode_message” نصيًا بدلاً من بيانات الحقول
السبب: فشل محرك التصيير في استلام الحقول والبيانات المعبأة من قِبل المستخدم وتمريرها إلى القالب المعني.
الحل:
- تأكد من أن النموذج المعني يحتوي على حقل إدخال واحد فعال على الأقل (كالاسم، أو البريد الإلكتروني).
- تأكد من حفظ التغييرات على النموذج ونشره في صفحة عامة بشكل سليم.
- تفقد ملف سجل الأخطاء
wp-content/debug.logلرصد أي تعارضات برمجية أو أخطاء تخص لغة PHP. - جرّب الدخول إلى المنشئ وإعادة حفظ قالب البريد الإلكتروني مرة أخرى لتحديث الروابط الداخلية للكتل.
11. مشاكل مكون الصور
❌ المشكلة: عدم ظهور الصورة داخل رسالة البريد الإلكتروني
السبب: مسار عنوان الصورة غير متاح للعامة، أو استخدام روابط السيرفر المحلي المستضاف محليًا.
الحل:
- ارفع جميع الصور المستخدمة في مكتبة وسائط الموقع الرسمي؛ وتجنب نهائيًا استخدام روابط السيرفر المحلي
localhostحيث لن يتمكن سيرفر المستلم من الوصول إليها. - احرص على أن يعمل موقعك بنظام تشفير HTTPS آمن؛ لأن الروابط التي تعمل بـ HTTP العادي تُحجب صورها بشكل تلقائي لحماية أمن المستخدمين.
- أضف نصًا بديلاً (Alt Text) معبرًا لكل صورة لضمان وصول الفكرة للمستخدم في حال تأخر تحميل الصور أو حجبها من قِبل التطبيق المستقبِل.
❌ المشكلة: خروج الصورة عن الإطار وظهورها بعرض ضخم على شاشات الهواتف
السبب: تعيين أبعاد ثابتة وكبيرة للعرض تتجاوز حدود الشاشات الصغيرة للأجهزة المحمولة.
الحل: تدمج الإضافة تلقائيًا أكواد CSS متجاوبة تعتمد على القاعدة (max-width: 100%) والتي تعمل على تحجيم الصور واحتوائها برقعة الشاشة الذكية تلقائيًا دون أي تدخل يدوي.
12. مشاكل الفواصل والمساحات
❌ المشكلة: خط الفاصل (Divider) لا يظهر مطلقًا في الرسالة
السبب: تقارب درجة لَوْن الخط الفاصل مع لَوْن الخلفية العامة لمنطقة المحتوى مما يفقده التباين.
الحل: قم بتعديل لَوْن الخط الفاصل من نافذة خصائص المكون لاختيار درجة لَوْن توفر تباينًا مريحًا للعين، وتأكد أيضًا من ألا تقل السماكة (Thickness) عن 1px.
❌ المشكلة: يتجاهل تطبيق Outlook المساحة الفارغة (Spacer) ويقوم بطيها
السبب: تقوم بعض إصدارات برامج Outlook بحذف خلايا الجداول الفارغة وتصفير ارتفاعها تلقائيًا لتقليص حجم الرسالة.
الحل: يتضمن نظام المعالجة لدينا إدراج الرمز غير المرئي بشكل تلقائي داخل خلايا المساحات لمنع Outlook من طيها؛ وإذا بدت المساحة أقل من المطلوب، يمكنك زيادة قيمة الارتفاع ببكسلات إضافية من لوحة التحكم.
13. مشاكل مكون الأعمدة
❌ المشكلة: الأعمدة لا تظهر متجاورة أفقيًا في تطبيقات Outlook
السبب: يواجه تطبيق Outlook أحياناً صعوبة في معالجة وفهم نسب العرض المئوية والمرنة للجداول المتقدمة.
الحل: تعتمد الإضافة على هيكلية مرنة ومقسمة بدقة في الجداول (48% للعمود الأول | 4% فراغ بيني | 48% للعمود الثاني) وهي تركيبة يدعمها Outlook بكفاءة؛ وفي حال تكدسها الرأسي، يرجى مراجعة المحتوى الداخلي للتأكد من عدم وجود نصوص طويلة جداً أو صور ذات أبعاد ثابتة تسببت في تمدد العمود وخروجه عن النسبة المحددة.
❌ المشكلة: الأعمدة تنقسم وتترتب رأسيًا عند فتح البريد من الهاتف
السبب: هذا السلوك مقصود ومبني وفق قواعد التصميم المتجاوب (Responsive Design)؛ فحينما تقل رقعة العرض عن 600px، تترتب الأعمدة فوق بعضها لتسهيل القراءة وتجنب الحاجة للتمرير الأفقي.
الحل: هذا هو السلوك البرمجي السليم والصحيح لتوفير أفضل تجربة مستخدم على الشاشات الذكية، ولا يتطلب أي تعديل.
WhiteStudio.team
14. مشاكل مكون التواصل الاجتماعي
تُعرض أيقونات التواصل الاجتماعي كصور PNG مستضافة مباشرة على السيرفر الخاص بموقعك؛ وفي حال كان السيرفر محجوبًا أو في بيئة تطوير محلية مغلقة (مثل localhost) خلف جدار ناري، فلن تتمكن تطبيقات البريد من جلب هذه الأيقونات وعرضها للمستلم.
الحل:
public/assets/images/social/.wp-content/uploads/حيث تقوم الإضافة بحفظ النسخ الملونة للأيقونات هناك بشكل مؤقت.❌ المشكلة: ظهور الأيقونات بألوان مغايرة أو قديمة عن التعديل الجديد
السبب: تقوم الإضافة بتوليد أيقونات ملونة مخصصة بناءً على خياراتك وتخزينها مؤقتًا في المسار
wp-content/uploads/efb-icons/، وقد لا يتم تحديث الكاش تلقائيًا في بعض الأحيان.الحل: للدفع باتجاه تحديث الألوان، قم بحذف مجلد الكاش
efb-iconsمن خلال لوحة تحكم الاستضافة أو بروتوكول FTP، وستقوم الإضافة بإعادة توليد الأيقونات بالألوان الجديدة فور إرسال البريد التالي.أيقونات التواصل الاجتماعي المدعومة في النظام
facebookxinstagramlinkedinyoutubetiktokwhatsapptelegrampinterestsnapchatgithubdribbbleredditdiscordtwitchmedium