تحويل قالب ووردبريس عادي إلى قالب متجاوب باستخدام Media Queries

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

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

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

أهمية القوالب المتجاوبة في ووردبريس

قبل الخوض في الجانب الفني، من الضروري فهم الأسباب التي تجعل القالب المتجاوب أمرًا لا يمكن تجاهله:

• تجربة المستخدم: المستخدمون اليوم يتصفحون الإنترنت من خلال أجهزة مختلفة الأحجام، لذا يجب أن يكون التصميم مناسبًا لسهولة القراءة والتنقل.

• تحسين ترتيب الموقع في محركات البحث (SEO): جوجل ومحركات البحث الأخرى تفضل المواقع المتجاوبة وتعطيها أولوية في نتائج البحث.

• زيادة معدلات التحويل: المواقع التي تقدم تجربة مستخدم متكاملة تؤدي إلى بقاء الزائر لفترة أطول وزيادة فرص التفاعل مثل الشراء أو التسجيل.

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

ماهي Media Queries وكيف تعمل؟

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

تركيب Media Query الأساسي:

css
CopyEdit
@media (max-width: 768px) {
  /* قواعد CSS هنا تطبق فقط على الشاشات التي عرضها أقل أو يساوي 768 بكسل */
}

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

أنواع Media Queries الأساسية التي تُستخدم عادة في التصميم المتجاوب:

• max-width: لتطبيق قواعد عند حجم شاشة أقل من أو يساوي القيمة المحددة.

• min-width: لتطبيق قواعد عند حجم شاشة أكبر من أو يساوي القيمة المحددة.

• orientation: للتحكم حسب اتجاه الجهاز (portrait أو landscape).

• resolution: للتحكم في جودة الشاشة ودقة العرض.

خطوات عملية لتحويل قالب ووردبريس عادي إلى قالب متجاوب باستخدام Media Queries

1. فهم هيكل القالب الحالي

قبل الشروع في كتابة أي كود، يجب فهم البنية الهيكلية للقالب الموجود:

• الاطلاع على ملفات القالب الأساسية: مثل header.php, footer.php, index.php, وstyle.css.

• التعرف على القواعد الحالية في ملف CSS ومعرفة كيف تم بناء تخطيط الصفحة (layout).

• التعرف على العناصر التي تحتاج إلى تعديل لتصبح متجاوبة، مثل القوائم، الأعمدة، الصور، الجداول، والنصوص.

2. تحديد نقاط التوقف (Breakpoints)

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

• 320px إلى 480px (الهواتف المحمولة الصغيرة)

• 481px إلى 768px (الهواتف الذكية والأجهزة اللوحية الصغيرة)

• 769px إلى 1024px (الأجهزة اللوحية الأكبر وأجهزة الكمبيوتر المحمولة)

• 1025px فأكثر (الشاشات الكبيرة وأجهزة الكمبيوتر المكتبية)

يتم اختيار نقاط التوقف بناءً على الجمهور المستهدف والأجهزة الأكثر استخدامًا لزيارة الموقع.

3. كتابة Media Queries أساسية للهيكل العام

في البداية، يمكن وضع Media Queries تتحكم في عرض وتخطيط العناصر الأساسية مثل:

• العناوين: تغيير حجم الخط لتتناسب مع شاشة أصغر.

• الأعمدة: تحويل الأعمدة إلى تخطيط عمودي بدلاً من أفقي.

• الصور: جعل الصور مرنة (responsive) بحيث لا تتجاوز عرض الشاشة.

• القوائم: تحويل القوائم الأفقية إلى قوائم منسدلة أو أيقونات “قائمة” (hamburger menu) في الشاشات الصغيرة.

مثال توضيحي:

css
CopyEdit
/* الشكل الأساسي في الشاشات الكبيرة */
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

/* عند شاشات أصغر من 768 بكسل، تحويل الأعمدة إلى عمود واحد */
@media (max-width: 768px) {
  .container {
    width: 100%;
    flex-direction: column;
    padding: 0 10px;
  }
}

4. استخدام وحدات قياس مرنة (Relative Units)

يُنصح في التصميم المتجاوب باستخدام وحدات قياس مرنة بدلًا من الوحدات الثابتة (مثل البكسل):

• النسبة المئوية (%): مناسبة للعناصر التي يجب أن تشغل نسبة من الشاشة أو الحاوية.

• الوحدات النسبية مثل em و rem: تُستخدم لحجم الخط والمساحات بحيث تكون متناسبة مع حجم الخط الأساسي.

• vw و vh: وحدة عرض وارتفاع الشاشة (viewport width/height).

مثال لتغيير حجم الخط بشكل نسبي:

css
CopyEdit
body {
  font-size: 16px; /* الحجم الأساسي */
}

@media (max-width: 600px) {
  body {
    font-size: 14px; /* حجم أصغر في الشاشات الصغيرة */
  }
}

5. تحسين القوائم والتنقل

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

الحل الشائع:

• إخفاء القائمة الأفقية وتحويلها إلى زر “قائمة” يظهر عند الضغط عليه القائمة بشكل عمودي.

• استخدام JavaScript أو مكتبات جاهزة مثل Responsive Nav أو MeanMenu مع تخصيص CSS لجعلها تتناسب مع القالب.

6. ضبط الصور والوسائط المتعددة

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

الطرق المستخدمة:

• استخدام خاصية CSS max-width: 100% وheight: auto لجعل الصور مرنة.

• استخدام تقنيات مثل srcset وsizes في وسم الصور HTML لتقديم صور بأحجام مختلفة حسب نوع الجهاز.

مثال CSS لجعل الصور مرنة:

css
CopyEdit
img {
  max-width: 100%;
  height: auto;
  display: block;
}

7. التعامل مع الجداول

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

حلول متقدمة:

• تحويل الجداول إلى تخطيطات قائمة أو بطاقات على الأجهزة الصغيرة.

• السماح بتمرير الجدول أفقيًا داخل حاوية تحتوي خاصية overflow-x: auto.

مثال:

css
CopyEdit
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* لتحسين التمرير في أجهزة iOS */
}

ثم في قالب ووردبريس يمكن وضع الجداول داخل

css
CopyEdit
/* التصميم الأساسي مع شريط جانبي */
.content-area {
  width: 70%;
  float: left;
}

.sidebar {
  width: 30%;
  float: left;
}

/* في الشاشات الصغيرة، تحويل الشريط الجانبي تحت المحتوى */
@media (max-width: 768px) {
  .content-area, .sidebar {
    width: 100%;
    float: none;
  }
}