حل مشكلة وميض الشعار في قالب Astra عند تحميل الصفحة

🧩 المقدمة

إذا كنت تستخدم قالب Astra الشهير في موقع ووردبريس، فربما لاحظت مشكلة مزعجة تحدث عند تحميل الصفحة:
وميض الشعار (Logo Flicker) أو اختفاءه لجزء من الثانية قبل أن يظهر بشكل طبيعي.

هذه المشكلة تحدث عادة أثناء الانتقال بين “الهيدر المخصص للموبايل” و”الهيدر الخاص بالكمبيوتر”، مما يؤدي إلى عرض لحظي غير مستقر لعناصر الهيدر، وخصوصًا الشعار.

🔍 ما سبب وميض الشعار في قالب Astra؟

تتمثل أسباب هذه المشكلة في:

  • وجود تبديل سريع بين الهيدر المخصص للموبايل والهيدر الخاص بالديسكتوب عند نقطة التحول (Break Point).
  • تأخر تحميل بعض ملفات CSS أو JavaScript الخاصة بتصميم Astra.
  • عدم استخدام تقنية Preload أو Display Rules بشكل فعّال.

هذه العوامل مجتمعة قد تؤدي إلى “وميض الشعار” أو ظهور شعارين بشكل خاطف قبل استقرار العرض النهائي.

🛠️ الحل الفعّال لإيقاف وميض الشعار

بعد بحث وتجارب عديدة، تم التوصل إلى كود CSS بسيط وفعّال يعمل على إخفاء العناصر التي تسبب الوميض عند تحميل الصفحة، وبالتالي يمنع حدوث المشكلة نهائيًا.

@media screen and (min-width: 921px){
.ast-header-break-point .main-navigation {
display: none;
}
#ast-mobile-header {
display: none !important;
}
}

طريقة التركيب:

  1. ادخل إلى لوحة تحكم ووردبريس.
  2. من القائمة الجانبية، اختر المظهر ← تخصيص.
  3. اذهب إلى CSS إضافي (Additional CSS).
  4. ألصق الكود أعلاه.
  5. اضغط “نشر”.

💡 ملاحظة: هذا الكود يخبر المتصفح بإخفاء الهيدر المخصص للموبايل والهيدر الخاص بوضع التحول (Break-point) عندما تكون الشاشة أكبر من 921px، أي على الشاشات المكتبية فقط. وهذا يمنع أي تبديل بصري مفاجئ بينها.

✅ هل الكود آمن؟

نعم. الكود لا يحذف أي عنصر، بل فقط يخفي العناصر غير الضرورية في الوضع المكتبي التي كانت تظهر لفترة قصيرة أثناء تحميل الصفحة. وهو يعمل ضمن حدود CSS فقط، دون أي تأثير على الأداء أو البنية.

📝 كلمة شكر

هذا الحل تم الوصول إليه بفضل أحد المطورين المجهولين الذين شاركوا تجربتهم، فكل الشكر والتقدير له.

🎯 الخلاصة

مشكلة وميض الشعار في قالب Astra مزعجة، لكنها قابلة للحل عبر هذا الكود البسيط.
إذا كنت تستخدم قالب Astra وتواجه هذه المشكلة، لا تتردد بتجربة هذا الحل الفوري لتقديم تجربة مستخدم أكثر احترافية لزوار موقعك.

هل كان هذا المقال مفيداً؟

شكرا على تعليقاتك!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *