أحد مكونات تصميم الويب سريع الاستجابة هو CSS Media Query. يستخدم مطورو WordPress تقنية استعلام الوسائط لضمان عمل موقع الويب على النحو الأمثل عبر جميع الأجهزة وأحجام الشاشة. إذا كانت هناك مشكلة في عمل تقنية CSS هذه ، فقد يؤدي ذلك إلى ظهور رسالة الخطأ "استعلام الوسائط لا يعمل في WordPress".
يعد إصلاح الخطأ "استعلام الوسائط لا يعمل في WordPress" أمرا ضروريا لضمان وصول الجميع إلى موقع الويب الخاص بك ، بغض النظر عن نوع الشاشة وحجمها. أدناه قدمنا بعض النصائح لإصلاح الخطأ "استعلام الوسائط لا يعمل في WordPress". ولكن ، قبل ذلك ، إليك شرح موجز لاستفسارات وسائط CSS.
ما هي استعلامات وسائط CSS؟
كإحدى ميزات CSS (أوراق الأنماط المتتالية) ، تمكن استعلامات الوسائط المطورين من تطبيق مجموعات مختلفة من قواعد CSS بناء على الشروط المحددة. يساعدهم على إنشاء تخطيطات تصميم متنوعة بناء على نوع الجهاز أو حجم منفذ عرض المتصفح. يتم استخدام استعلام الوسائط في فرد. CSS ، أو يمكنك إدراجه في HTML لصفحة الويب.
إنه معيار موصى به من W3C لتصميم الويب سريع الاستجابة. بالإضافة إلى ذلك ، فإنه يضمن أن المحتوى المقدم قابل للتكيف مع الظروف المختلفة ، مثل دقة الشاشة وعرض المتصفح ونوع الجهاز.
استخدام استعلامات وسائط CSS
يعد ضمان حصول المستخدم على تجربة محسنة عند تصفح موقع ويب أحد عوامل تحسين ترتيب موقع الويب في نتيجة البحث ، وهذا هو المكان الذي يمكن أن يساعد فيه CSS Media Query.
تساعد استعلامات الوسائط في تخصيص مظهر صفحات الويب عبر جميع الأجهزة وأحجام الشاشات والدقة. يوفر إرشادات محددة تخبر المتصفح بكيفية عرض صفحات الويب عند عرضها على الهاتف المحمول أو سطح المكتب أو الأجهزة الأخرى.
باستخدام استعلام وسائط CSS، يمكن للمطورين إنشاء مواقع ويب يمكن الوصول إليها وقراءتها على جميع الأجهزة دون الحاجة إلى إنشاء موقع ويب منفصل للجوال.
ذات صلة: الفرق بين موقع الجوال والموقع المتجاوب
فيما يلي مثال على استعلام وسائط:
@media screen and (max-width: 480px){header { height: 70px; }article { font-size: 14px; }img { max-width: 480px; }}تستخدم استعلامات الوسائط من أجل:
- تطبيق الأنماط الشرطية مع @media CSS وقواعد @import.
- نقل شريط جانبي أسفل محتوى الموقع عند عرض صفحة في الوضع الرأسي على جهاز جوال.
- Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.
- ضبط عرض العمود بناء على حجم شاشة الجهاز.
- تغيير التخطيطات على الأجهزة المحمولة من تخطيط من عمودين إلى عمود واحد.
بناء جملة استعلامات الوسائط
يتكون استعلام الوسائط من العناصر الأربعة التالية. من خلال فهم بناء الجملة ، يمكنك استخدام استعلامات الوسائط بشكل صحيح.
@media القاعدة
يساعد هذا العنصر في إعلان (تحديد) نية إعداد استعلام وسائط في CSS. أدخل @media بدون مسافة بينهما.
نوع الوسائط
يشير نوع الوسائط إلى نوع الجهاز الذي يتم استخدام استعلام الوسائط له. يتضمن القواعد التالية:
- الكل: مناسب لجميع الأجهزة ، وفي الحالات التي لا يتم فيها تحديد نوع الوسائط ، يتم استخدام "الكل".
- الكلام: يتم تطبيق نوع الوسائط هذا (أو مخصص له) برامج قراءة الشاشة.
- طباعة: إذا كانت مادة الصفحة أو المستند في وضع معاينة الطباعة، تطبيق نوع الوسائط "طباعة". يستخدم هذا النوع من الوسائط للطابعات.
- الشاشة: تنطبق قاعدة CSS هذه على الشاشات - الهواتف الذكية وأجهزة الكمبيوتر المكتبية والأجهزة اللوحية والمزيد.
ميزات الوسائط
يتم استخدام عنصر ميزات الوسائط لإضافة تفاصيل محددة. يتم وضع جميع تعبيرات ميزات الوسائط بين قوسين، مثل عرض 400 بكسل كحد أقصى (الأجهزة المحمولة). هنا ، يتم استخدام ميزة الوسائط ذات العرض الأقصى للأجهزة المحمولة.
ميزات الوسائط الأخرى ووظائفها هي كما يلي:
- العرض: يشير هذا إلى عرض إطار العرض.
- الحد الأقصى للعرض: يحدد "الحد الأقصى للعرض" لنافذة المتصفح.
- الارتفاع: يشير هذا إلى ارتفاع إطار العرض.
- أقصى ارتفاع: يحدد "الحد الأقصى للارتفاع" لنافذة المتصفح.
- الحد الأدنى للارتفاع: يحدد "الحد الأدنى للارتفاع" لنافذة المتصفح.
- الاتجاه: يشير هذا إلى اتجاه إطار العرض. (الوضع الأفقي أو الرأسي).
العوامل المنطقية
تساعد عوامل التشغيل المنطقية في إنشاء استعلامات وسائط معقدة وتضمين العناصر غير و والعناصر فقط. يمكن للمرء أيضا استخدام الفواصل لدمج استعلام وسائط واحد أو أكثر في قاعدة واحدة.
- لا: إذا كنت تستخدم "ليس المشغل" ، فأنت بحاجة إلى تحديد نوع وسائط. عادة ما ينفي "ليس عامل التشغيل" استعلام الوسائط.
- و: لدمج ميزتين أو أكثر من ميزات الوسائط في استعلام وسائط واحد، استخدم "وعامل التشغيل". يمكن أن يساعد عامل التشغيل هذا أيضا في الانضمام إلى أنواع الوسائط باستخدام ميزات الوسائط.
- فقط: "المشغل الوحيد" ضروري للمتصفحات القديمة. يساعد المتصفحات القديمة على تفسير استعلام الوسائط بشكل صحيح ، وبالتالي منع حدوث مشكلات مثل خطأ "استعلام الوسائط لا يعمل في WordPress". أيضا ، حدد نوع الوسائط عند استخدام "ليس عامل التشغيل".
- ، (فاصلة): يستخدم عامل التشغيل هذا لدمج استعلامات وسائط متعددة في قاعدة واحدة. عند استخدام فاصلة لفصل عدة استعلامات، تتم معالجة كل استعلام على حدة. بالإضافة إلى ذلك ، إذا كانت قائمة الاستعلامات صحيحة ، فستظل قائمة استعلام الوسائط بأكملها صحيحة.
نصائح لإصلاح استعلام الوسائط لا يعمل في WordPress
يمكن أن يؤدي استعلام وسائط CSS إلى حدوث خطأ لعدة أسباب. في بعض الأحيان قد يعمل استعلام الوسائط على جهاز محمول ولكن ليس على سطح المكتب. في بعض الأحيان قد لا يعمل على جميع الأجهزة. للتحقق من طلب بحث الوسائط في موقعك، استخدم أدوات مطوري البرامج في المتصفح وافحص CSS لموقعك. انقر فوق علامة التبويب "الأنماط" لمعرفة النمط الذي يتم تطبيقه على العنصر (بناء الجملة) المعني.
في معظم الأوقات ، يكون سبب "استعلام الوسائط لا يعمل في WordPress" شائعا جدا. على هذا النحو ، إليك بعض الطرق لإصلاح هذا الخطأ.
تحقق من وجود إعلان CSS مضمن
إذا كنت قد أعلنت CSS داخل مستند HTML ، فقد يتسبب ذلك في خطأ "استعلام الوسائط لا يعمل في WordPress". يمكنك إصلاح ذلك عن طريق إزالة "CSS المعلن عنه مضمنا" من مستند HTML.
طريقة أخرى هي تجاوز هذا الإعلان ب !important. على سبيل المثال ، لتغيير لون نص الفقرات إلى "رمادي" على الأجهزة المحمولة ، استخدم الأسطر التالية من CSS.
@media screen and (max-width: 1024px){ p{ color: gray; }}ومع ذلك ، في بعض الأحيان قد لا يعمل هذا بسبب النمط المضمن المطبق على نفس العنصر. في مثل هذه الحالات، استخدم قاعدة !important لتجاوز النمط المضمن وإصلاح المشكلة.
@media screen and (max-width: 1024px){ p{ color: gray !important; }}وضع استعلامات الوسائط بشكل صحيح
سبب آخر لخطأ "استعلام الوسائط لا يعمل في WordPress" هو الموضع غير الصحيح لاستعلامات الوسائط. لإصلاح ذلك، أضف استعلام الوسائط في نهاية ورقة الأنماط.
نظرا لأن المتصفحات تقرأ ورقة الأنماط من أعلى إلى أسفل ، يمكن للرموز المذكورة في نهاية ورقة الأنماط تجاوز الإعلانات التي تم إجراؤها في البداية (باستثناء عند استخدام !important). بالإضافة إلى ذلك ، بالنسبة للاستعلامات الصغيرة ، ضع استعلامات الوسائط أمام الشاشة الكبيرة.
تحقق من هذا المثال
body {background-color: black;}@media screen and (min-width: 480px) {body {background-color: blue;}}@media screen and (min-width: 850px) {body {background-color: light blue;text-align: center;}}- في القاعدة الأولى ، يكون لون الخلفية "أسود" إذا كانت الشاشة أقل من 480 بكسل.
- في استعلام الوسائط الثاني ، يكون لون الخلفية "أزرق" إذا كانت الشاشة بين 480 إلى 849 بكسل.
- أخيرا ، إذا كانت الشاشة 580 بكسل أو أكثر ، فسيكون لون الخلفية "أزرق فاتح" مع محاذاة مركزية.
سطح المكتب مقابل الهاتف المحمول
بمجرد تعيين استعلام وسائط ، يجب أن يعمل على النحو الأمثل على كل من سطح المكتب والجوال. ومع ذلك ، إذا كان هناك خطأ في أي من الاثنين ، فاستخدم النصائح التالية لحل المشكلة.
استعلام الوسائط لا يعمل على سطح المكتب
إذا كنت قد استخدمت ميزة الوسائط "max-device-width" بدلا من "max-width" ، فقد يؤدي ذلك إلى عدم عمل استعلام الوسائط على خطأ سطح المكتب. هنا ، يشير "max-width" إلى حجم منطقة عرض الجهاز ، بينما يشير "max-location-width" إلى حجم شاشة الجهاز (الهاتف المحمول).
لإصلاح خطأ "استعلام الوسائط لا يعمل على سطح المكتب" ، قم بتغيير ميزة الوسائط إلى "max-width". يحدد هذا منطقة عرض المتصفح ، وليس حجم الشاشة الفعلي للجهاز.
استعلام الوسائط لا يعمل على الأجهزة المحمولة
Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>هنا ، "العرض" هو حجم إطار العرض ، مضبوطا على عرض الجهاز. يرشد المتصفح إلى جعل موقع الويب مناسبا للشاشة بشكل طبيعي. في حين أن "المقياس الأولي" يحدد مستوى التكبير.
قراءة: كيفية تجنب @import CSS لتحسين سرعة تحميل الصفحة
استنتاج
من المهم ضمان وصول الجميع إلى موقع الويب الخاص بك ، بغض النظر عن نوع أجهزتهم. يمكن أن يساعدك تصميم موقع الويب سريع الاستجابة في توليد حركة مرور من مصادر مختلفة. مع فهرسة Google للجوال أولا ، يمكن أن يؤدي أيضا إلى فهرسة أسرع لصفحات الويب. بالإضافة إلى ذلك ، سيوفر تجربة محسنة للمستخدمين الذين يتصفحون موقع الويب الخاص بك على أجهزة الجوال ، مما قد يحسن ترتيب موقعك.
يعد إصلاح الخطأ "استعلام الوسائط لا يعمل في WordPress" أمرا بسيطا بمجرد تحديد السبب. يمكنك إجراء التغييرات كما هو مطلوب باتباع النصائح المذكورة أعلاه.
لتجنب حدوث الخطأ "استعلام الوسائط لا يعمل في WordPress" مرة أخرى ، استخدم المكونات الإضافية مثل Simple Custom CSS و WP Add Custom CSS لإضافة استعلام وسائط إلى موقع الويب الخاص بك.
علاوة على ذلك ، إذا لم تتمكن من استكشاف خطأ "استعلام الوسائط لا يعمل في WordPress" وإصلاحها ، فاتصل بنا. نحن وكالة WordPress تساعد الشركات على إصلاح أخطاء WordPress الشائعة على موقعها على الويب دون التسبب في أي توقف.
هل تريد إنشاء موقع ويب WordPress سريع الاستجابة؟
يمكن لمطورينا إنشاء مواقع ويب سريعة الاستجابة وخالية من الأخطاء.
