كيفية جعل أي موقع ووردبريس مستجيب للجوال أولاً

هذه المرة سوف نوجهك إلى كيفية إنشاء أي موقع WordPress سريع الاستجابة للجوال أولاً ولماذا تحتاج إلى القيام بذلك.

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

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

اليوم ، يعد مستودع قوالب WordPress غنيًا بهذه السمات: المجانية والمتميزة. تشترك جميع القوالب التي أنشأناها في SKT Themes أيضًا في تلك الصفات مما يسمح لأي جانب يعتمد عليها ليتم عرضها بدقة عبر الهواتف المحمولة والأنظمة الأساسية المختلفة.

لذا ، إذا تم استخدام التصميم سريع الاستجابة أو سهل الاستخدام على الهاتف المحمول على نطاق واسع ويبدو أنه يعمل بسلاسة ، فما الهدف من محاولة جعل أي موقع WordPress سريع الاستجابة للجوال أولاً وما هي فوائده؟

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

ما هو تصميم الويب سريع الاستجابة؟

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

ما هو تصميم الجوال الأول؟

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

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

بالنسبة للتصميم الأول للجوال ، فإنه يقترح أن يتم التصميم سريع الاستجابة للهواتف المحمولة والأجهزة الصغيرة أولاً.

لماذا تحتاج إلى إنشاء أي موقع ويب WordPress سريع الاستجابة للجوال أولاً؟

هل تتساءل لماذا تحتاج إلى بدء المشروع باعتبارات للجوال أو جعل أي موقع WordPress سريع الاستجابة للجوال أولاً؟ دعنا نلقي نظرة على إحصائيات استهلاك المحمول.

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

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

وبالتالي ، فأنت لا تريد أن تخيب آمال غالبية ضيوف موقعك وتجعل أقلية مستخدمي سطح المكتب تشعر بالراحة في موقعك ، أليس كذلك؟

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

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

كيف أجعل أي موقع ووردبريس سريع الاستجابة للجوال أولاً؟

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

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

بناءً على تخطيط موقعك ، يمكن أن يكون تصميم التخطيط شيئًا من هذا النوع:

رأس
.الأساسية،
تذييل {
  العرض: 96٪؛
  أقصى عرض: 1000 بكسل ؛
  الهامش: 10 بكسل تلقائي ؛
  واضحة على حد سواء؛
}
.المحتوى {
  العرض: 60٪؛
  الهامش الأيمن: 5٪ ؛
  تعويم: اليسار؛
}
.sidebar {
  العرض: 35٪؛
  تعويم: صحيح ؛
}

ونظرًا لاستجابة موقعك ، يجب أن يتضمن هذا النمط أيضًا استعلامات وسائط للشاشات الأصغر:

شاشةmedia و (أقصى عرض: 500 بكسل) {

  رأس
  .الأساسية،
  تذييل،
  .المحتوى،
  .sidebar {
    العرض: 98٪؛
  }
  
  .المحتوى،
  .sidebar {
    تعويم: لا شيء ؛
    الهامش: 0 تلقائي ؛
  }

}

كما ترى ، هناك كتلتان: واحدة لسطح المكتب والأخرى للجوال.
لاستبداله بالجوال أولاً ، احذف كليهما وابدأ بتصميم محدد للشاشات الصغيرة:

رأس
.الأساسية،
تذييل {
  الهامش: 10 بكسل 1٪ ؛
}

حان الوقت الآن لإنشاء استعلام الوسائط باستخدام min-width.

شاشةmedia و (الحد الأدنى للعرض: 500 بكسل) {

  رأس
  .الأساسية،
  تذييل {
    العرض: 96٪؛
    أقصى عرض: 1000 بكسل ؛
    الهامش: 10 بكسل تلقائي ؛
    واضحة على حد سواء؛
  }
 
  .المحتوى {
    العرض: 60٪؛
    الهامش الأيمن: 5٪ ؛
    تعويم: اليسار؛
  }
  .sidebar {
    العرض: 35٪؛
    تعويم: صحيح ؛
  }
  
}

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

من الناحية النظرية ، انتهينا من التحول إلى التصميم الأول للجوّال. في حالات محددة ، قد تحتاج إلى تعديلات وتهيئة إضافية للحفاظ على سير الأمور بسلاسة.

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