كيفية إصلاح مشكلة عدم عمل استعلام الوسائط في ووردبريس؟

يُعدّ استعلام الوسائط في CSS أحد مكونات تصميم المواقع الإلكترونية المتجاوبة. مطورو ووردبريس تقنية استعلام الوسائط لضمان عمل الموقع الإلكتروني على النحو الأمثل عبر جميع الأجهزة وأحجام الشاشات. في حال وجود مشكلة في عمل هذه التقنية، فقد يظهر خطأ "استعلام الوسائط لا يعمل في ووردبريس".

يُعدّ إصلاح خطأ "استعلام الوسائط لا يعمل في ووردبريس" أمرًا بالغ الأهمية لضمان إمكانية الوصول إلى موقعك الإلكتروني للجميع، بغض النظر عن نوع الشاشة وحجمها. فيما يلي بعض النصائح لإصلاح هذا الخطأ. ولكن قبل ذلك، إليك شرح موجز لاستعلامات الوسائط في CSS.

ما هي استعلامات الوسائط في CSS؟

تُتيح استعلامات الوسائط، كإحدى ميزات لغة CSS (أوراق الأنماط المتتالية)، للمطورين تطبيق مجموعات مختلفة من قواعد CSS بناءً على شروط محددة. وهذا يُساعدهم على إنشاء تصميمات متنوعة تتناسب مع نوع الجهاز أو حجم نافذة المتصفح. يُمكن استخدام استعلامات الوسائط في ملف CSS منفصل، أو إدراجها ضمن كود HTML.

هو معيار موصى به من قبل اتحاد شبكة الويب العالمية (W3C) لتصميم مواقع الويب المتجاوبة. بالإضافة إلى ذلك، فهو يضمن أن يكون المحتوى المعروض قابلاً للتكيف مع مختلف الظروف، مثل دقة الشاشة وعرض المتصفح ونوع الجهاز.

استخدام استعلامات الوسائط CSS

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

تساعد استعلامات الوسائط في تخصيص مظهر صفحات الويب على جميع الأجهزة وأحجام الشاشات ودقتها. فهي توفر تعليمات محددة تخبر المتصفح بكيفية عرض صفحات الويب عند عرضها على الهاتف المحمول أو سطح المكتب أو غيرها من الأجهزة.

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

موضوع ذو صلة: الفرق بين موقع الجوال والموقع المتجاوب

فيما يلي مثال على استعلام الوسائط:

@media screen and (max-width: 480px)

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

تُستخدم استعلامات الوسائط للأغراض التالية:

• تطبيق الأنماط الشرطية باستخدام قواعد CSS @media و @import.

• نقل الشريط الجانبي أسفل محتوى الموقع عند عرض الصفحة في الوضع الرأسي على جهاز محمول.

• استهداف وسائل الإعلام المحددة <style>, <source>, and other HTML elements with the media= attribute.

• ضبط عرض العمود بناءً على حجم شاشة الجهاز.

• تغيير التخطيطات على الأجهزة المحمولة من تخطيط ذي عمودين إلى تخطيط ذي عمود واحد.

بناء جملة استعلامات الوسائط

يتكون استعلام الوسائط من العناصر الأربعة التالية. بفهمك لبنية الاستعلام، يمكنك استخدامه بشكل صحيح.

@media Rule

يساعد هذا العنصر في تحديد الغرض من إعداد استعلام الوسائط في CSS. أدخل @media بدون مسافة بينهما.

نوع الوسائط 

يشير نوع الوسائط إلى نوع الجهاز الذي يُستخدم معه استعلام الوسائط. ويتضمن القواعد التالية:

• الكل: مناسب لجميع الأجهزة، وفي الحالات التي لا يتم فيها تحديد نوع الوسائط، يتم استخدام "الكل". 
• الكلام: يتم تطبيق هذا النوع من الوسائط (أو يُقصد استخدامه) من قبل قارئات الشاشة.
• الطباعة: إذا كانت صفحة أو مستند في وضع معاينة الطباعة، فسيتم تطبيق نوع الوسائط "طباعة". يُستخدم هذا النوع من الوسائط للطابعات.
• الشاشة: تنطبق قاعدة CSS هذه على الشاشات - الهواتف الذكية وأجهزة الكمبيوتر المكتبية والأجهزة اللوحية وغيرها. 

ميزات إعلامية 

يُستخدم عنصر خصائص الوسائط لإضافة تفاصيل محددة. تُوضع جميع تعبيرات خصائص الوسائط بين قوسين، مثل الحد الأقصى للعرض 400 بكسل (للأجهزة المحمولة). هنا، تُستخدم خاصية الحد الأقصى للعرض للأجهزة المحمولة.

أما الميزات الإعلامية الأخرى ووظائفها فهي كالتالي:

• العرض: يشير هذا إلى عرض نافذة العرض.
• Max-width: يحدد "الحد الأقصى لعرض" نافذة المتصفح.
• الارتفاع: يشير هذا إلى ارتفاع نافذة العرض.
• Max-height: يحدد "الارتفاع الأقصى" لنافذة المتصفح.
• Min-height: يحدد "الحد الأدنى لارتفاع" نافذة المتصفح.
• الاتجاه: يشير هذا إلى اتجاه نافذة العرض (الوضع الأفقي أو الوضع الرأسي).

عوامل التشغيل المنطقية

تساعد عوامل التشغيل المنطقية في تكوين استعلامات الوسائط المعقدة، وتشمل عناصر النفي والربط والشرط فقط. كما يمكن استخدام الفواصل لدمج استعلام وسائط واحد أو أكثر في قاعدة واحدة.

• ملاحظة: إذا كنت تستخدم عامل النفي، فيجب عليك تحديد نوع الوسائط. عادةً، ينفي عامل النفي استعلام الوسائط.

• و: لدمج ميزتين أو أكثر من ميزات الوسائط في استعلام وسائط واحد، استخدم عامل التشغيل "و". يمكن أن يساعد هذا العامل أيضًا في ربط أنواع الوسائط بميزات الوسائط.

• فقط: يُعدّ عامل "only" ضروريًا للمتصفحات القديمة. فهو يساعدها على تفسير استعلام الوسائط بشكل صحيح، وبالتالي يمنع حدوث مشكلات مثل خطأ "استعلام الوسائط لا يعمل في ووردبريس". كذلك، حدد نوع الوسائط عند استخدام عامل "not".

• الفاصلة (,): تُستخدم هذه العلامة لدمج استعلامات الوسائط المتعددة في قاعدة واحدة. عند استخدام الفاصلة لفصل عدة استعلامات، يُعالج كل استعلام على حدة. بالإضافة إلى ذلك، إذا كانت قائمة الاستعلامات صحيحة، فإن قائمة استعلامات الوسائط بأكملها تظل صحيحة.

الأسباب الشائعة لعدم عمل استعلامات الوسائط في ووردبريس

تُعدّ استعلامات الوسائط ضرورية لتحقيق تصميم متجاوب على مختلف الأجهزة، ولكنها قد لا تعمل أحيانًا كما هو متوقع في ووردبريس. فيما يلي الأسباب الأكثر شيوعًا لهذه المشكلة وكيفية حلّها:

• ملف CSS غير مرتبط بشكل صحيح أو تم تجاوزه: من أكثر المشاكل شيوعًا عدم تطبيق CSS المخصص بشكل صحيح. يحدث هذا غالبًا عندما لا يتم ربط ملف الأنماط بشكل صحيح أو عندما يقوم مكون إضافي أو قالب آخر بتجاوز أنماطك.

• خطأ في بناء جملة استعلام الوسائط: يجب كتابة استعلامات الوسائط باستخدام بناء جملة صحيح لكي تعمل بفعالية. قد تؤدي أخطاء مثل نقص الأقواس أو استخدام كلمات مفتاحية خاطئة مثل "only screen" إلى فشلها تمامًا. اتباع مثال بسيط لهيكلة استعلاماتك سيساعدك في تحديد الخطأ.

• مشاكل التخزين المؤقت (المتعلقة بالمتصفح أو الإضافات): حتى مع ضبط ملفات CSS المخصصة واستعلامات الوسائط بشكل صحيح، قد يُظهر التخزين المؤقت أن شيئًا لم يتغير. غالبًا ما تُقدّم إضافات التخزين المؤقت في ووردبريس، بالإضافة إلى ذاكرة التخزين المؤقت الخاصة بالمتصفح، ملفات قديمة.

نصائح لإصلاح مشكلة عدم عمل استعلامات الوسائط في ووردبريس

قد يؤدي استخدام استعلام الوسائط في CSS إلى حدوث خطأ لعدة أسباب. أحيانًا، قد يعمل الاستعلام على الأجهزة المحمولة ولكنه لا يعمل على أجهزة الكمبيوتر المكتبية. وفي بعض الأحيان، قد لا يعمل على جميع الأجهزة. للتحقق من استعلام الوسائط في موقعك، استخدم أدوات مطوري المتصفح وافحص ملف CSS الخاص بموقعك. انقر على علامة التبويب "الأنماط" لمعرفة النمط المُطبق على العنصر (الصيغة) المعني.

في أغلب الأحيان، يكون سبب مشكلة "عدم عمل استعلام الوسائط في ووردبريس" شائعًا جدًا. لذا، إليك بعض الطرق لإصلاح هذا الخطأ.

تحقق من تعريف CSS المضمن

إذا قمتَ بتعريف CSS داخل مستند HTML، فقد يتسبب ذلك في ظهور خطأ "استعلام الوسائط لا يعمل في ووردبريس". يمكنك حل هذه المشكلة بإزالة تعريف CSS المضمن من مستند HTML.

هناك طريقة أخرى وهي تجاوز هذا التصريح باستخدام !important. على سبيل المثال، لتغيير لون نص الفقرات إلى "الرمادي" على الأجهزة المحمولة، استخدم أسطر CSS التالية.

@media screen and (max-width: 1024px){

  p{        

        اللون: رمادي؛

    }

}

مع ذلك، قد لا ينجح هذا أحيانًا بسبب تطبيق نمط مضمّن على العنصر نفسه. في هذه الحالة، استخدم قاعدة !important لتجاوز النمط المضمّن وحل المشكلة.

@media screen and (max-width: 1024px){

  p{        

        اللون: رمادي !مهم؛

    }

}

تحديد موقع استفسارات الوسائط بشكل صحيح

سبب آخر لظهور خطأ "استعلام الوسائط لا يعمل في ووردبريس" هو وضع استعلامات الوسائط في غير موضعها الصحيح. لحل هذه المشكلة، أضف استعلام الوسائط في نهاية ملف أنماط CSS.

بما أن المتصفحات تقرأ ملف أنماط CSS من الأعلى إلى الأسفل، فإن الأكواد المذكورة في نهاية الملف قد تلغي التصريحات الواردة في بدايته (باستثناء استخدام !important). إضافةً إلى ذلك، بالنسبة للاستعلامات الصغيرة، ضع استعلامات الوسائط قبل الشاشة الكبيرة.

اطلع على هذا المثال

جسم {

لون الخلفية: أسود؛

}

@media screen and (min-width: 480px) {

جسم {

لون الخلفية: أزرق؛

}

}

@media screen and (min-width: 850px) {

جسم {

لون الخلفية: أزرق فاتح؛

text-align: center;

}

}

• في القاعدة الأولى، يكون لون الخلفية "أسود" إذا كانت الشاشة أقل من 480 بكسل.
• في استعلام الوسائط الثاني، يكون لون الخلفية "أزرق" إذا كانت الشاشة بين 480 و 849 بكسل.
• وأخيرًا، إذا كانت الشاشة بحجم 580 بكسل أو أكثر، فسيكون لون الخلفية "أزرق فاتح" مع محاذاة مركزية.

مقارنة بين أجهزة الكمبيوتر المكتبية والهواتف المحمولة

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

استعلام الوسائط لا يعمل على سطح المكتب

إذا استخدمتَ خاصية الوسائط "max-device-width" بدلاً من "max-width"، فقد يؤدي ذلك إلى عدم عمل استعلام الوسائط على سطح المكتب. هنا، تشير "max-width" إلى حجم منطقة عرض الجهاز، بينما تشير "max-device-width" إلى حجم شاشة الجهاز (الجوال).

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

استعلام الوسائط لا يعمل على الأجهزة المحمولة

وبالمثل، إذا لم تقم بتعيين منطقة العرض والتكبير الافتراضي، فقد يؤدي ذلك إلى مشكلة عدم عمل استعلامات الوسائط على الأجهزة المحمولة. لحل هذه المشكلة، ما عليك سوى إضافة الكود التالي إلى رأس موقعك. تأكد من إضافة أسطر الكود هذه ضمن<head></head> عنصر.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

هنا، يُمثل "العرض" حجم نافذة العرض، ويُضبط على عرض الجهاز. وهو يُوجه المتصفح لعرض الموقع الإلكتروني بما يتناسب مع الشاشة بشكل طبيعي. بينما يُحدد "المقياس الأولي" مستوى التكبير/التصغير.

اقرأ: كيفية تجنب استخدام خاصية @import في CSS لتحسين سرعة تحميل الصفحة

خاتمة

يُعدّ ضمان سهولة الوصول إلى موقعك الإلكتروني للجميع، بغض النظر عن نوع أجهزتهم، أمرًا بالغ الأهمية. يُمكن لتصميم موقع إلكتروني متجاوب أن يُساعدك في جذب الزيارات من مصادر مُتعددة. وبفضل فهرسة جوجل التي تُعطي الأولوية للأجهزة المحمولة، يُمكن أن يُؤدي ذلك أيضًا إلى فهرسة أسرع لصفحات الويب. إضافةً إلى ذلك، سيُوفر تجربة مُحسّنة للمستخدمين الذين يتصفحون موقعك على الأجهزة المحمولة، مما قد يُحسّن ترتيب موقعك في نتائج البحث.

يُمكن إصلاح خطأ "استعلام الوسائط لا يعمل في ووردبريس" بسهولة بمجرد تحديد السبب. يُمكنك إجراء التغييرات المطلوبة باتباع النصائح المذكورة أعلاه.

لتجنب حدوث خطأ "استعلام الوسائط لا يعمل في ووردبريس" مرة أخرى، استخدم إضافات مثل Simple Custom CSS و WP Add Custom CSS لإضافة استعلام وسائط إلى موقعك الإلكتروني.

علاوة على ذلك، إذا لم تتمكن من حل مشكلة "استعلام الوسائط لا يعمل في ووردبريس"، فتواصل معنا. نحن وكالة متخصصة في ووردبريس ، نساعد الشركات على إصلاح أخطاء ووردبريس الشائعة على مواقعها الإلكترونية دون أي توقف.