كيف تجعل موقع WordPress الخاص بك مناسبًا للجوّال

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

لجعل موقع WordPress الخاص بك مناسبًا للجوّال ، تحتاج إلى:

1. افهم سبب أهمية تصميم الويب سريع الاستجابة
2. قم بإجراء اختبار التوافق مع الأجهزة الجوّالة من Google
3. استخدم سمة WordPress سريعة الاستجابة (أو قم بإنشاء قالب خاص بك)
4. ضع في اعتبارك مكونات WordPress الإضافية المتوافقة مع الجوّال
5. استخدم عمليات التمكين الملائمة للجوّال
6. فكر في وسائل الإعلام المتجاوبة
7. إعطاء الأولوية لأداء الموقع

مستعد؟ دعنا نتعمق!

1. لماذا تعتبر المواقع المتوافقة مع الجوال مهمة؟

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

إلى جانب تجربة المستخدم ، هناك سبب مهم آخر يجعل موقعك متوافقًا مع الجوّال: Google. بدءًا من عام 2015 (عام "Mobilegeddon") ، نفذت Google إصلاحًا شاملاً لخوارزمية البحث الخاصة بها لمكافأة المواقع التي تعتبر "متوافقة مع الجوّال". جاء التغيير إلى نقطة بيانات مهمة واحدة: ما إذا كان موقع الويب الخاص بك مستجيبًا أم لا.

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

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

2. قم بإجراء الاختبار المناسب للجوّال

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

لتبسيط الأمور ، منحتنا Google جميعًا أداة اختبار مجانية متوافقة مع الجوّال ستخبرك ما إذا كان موقعك مؤهلاً ليكون "متوافقًا مع الجوّال" أم لا. ما عليك سوى إدخال عنوان URL الخاص بموقعك للحصول على تقييم سريع لتصميم الهاتف المحمول لموقعك. إذا تم تحسين موقع الويب الخاص بك بالكامل للأجهزة المحمولة ، فستتلقى رسالة نجاح صغيرة متحمسة تبدو كالتالي:

إذا كنت ترى اللون الأحمر ، فلديك القليل من العمل للقيام به. (سنصل إلى ذلك في ثانية!)

أداة صغيرة جميلة ، أليس كذلك؟ حسنًا ، إنها تتحسن.

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

بمجرد استخدامك لأداة Google المتوافقة مع الجوّال لقياس أداء موقعك ، فقد حان الوقت لبدء إجراء التحسينات. لنبدأ بموضوع WordPress الخاص بك.

3. استخدم (أو أنشئ) سمة WordPress سريعة الاستجابة

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

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

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

أفضل ثيمات WordPress المتوافقة مع الجوّال

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

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

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

لست متأكدا من أين تبدأ؟ عندما تستضيف موقع WordPress الخاص بك على WP Engine ، ستتمكن من الوصول إلى سمات StudioPress (بما في ذلك Genesis Framework!) مجانًا مع خطتك. تستجيب هذه السمات تمامًا لذا ستبدو رائعة على أي جهاز ، بالإضافة إلى أنه يمكنك التبديل بينها بسهولة (بدلاً من الشعور بالتعثر مع السمة المميزة "الوحيدة" التي قررت شرائها).

كيفية إنشاء سمة WordPress سريعة الاستجابة الخاصة بك

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

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

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

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

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

• كيفية إنشاء قائمة تنقل سريعة الاستجابة في WordPress
• 7 نصائح لأفضل الممارسات لتصميم الويب سريع الاستجابة
• العمل مع الصور المتجاوبة في ووردبريس

4. استخدام الإضافات المستجيبة

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

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

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

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

5. تجنب إضافة النوافذ المنبثقة على الأجهزة المحمولة

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

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

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

6. وضع إستراتيجيات لوسائل الإعلام المستجيبة

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

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

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

7. إعطاء الأولوية لأداء الموقع

كانت سرعة الصفحة مهمة لفترة طويلة من حيث كيفية تصنيف موقعك في عمليات بحث سطح المكتب من Google ، ولكن اعتبارًا من يوليو 2018 ، أصبح هذا هو الحال أيضًا بالنسبة لتصنيفات الأجهزة المحمولة. قم بإقران ذلك بالإحصائيات الواردة أعلاه حيث أن أكثر من 60٪ من عمليات البحث على الإنترنت تستخدم الأجهزة المحمولة ، وأصبح أداء موقعك (على كل جهاز) الآن أكثر أهمية من أي وقت مضى.

تعد الصور جزءًا كبيرًا من معادلة الأداء ، لكن الكود ومضيف WordPress يلعبان دورًا كبيرًا أيضًا.

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

بالنسبة إلى مضيف WordPress الخاص بك ، تأكد من أنك تستخدم شريكًا عالي الجودة يتضمن خدمات مثل تقنية التخزين المؤقت و CDN والبنية التحتية المدعومة من مزودين موثوقين مثل Google Cloud Platform. إذا كنت تستضيف موقعك على WP Engine ، فأنت في كل هذه المجالات.

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

احصل على إمكانية الوصول إلى أكثر من 30 سمة مميزة (ومتوافقة مع الجوّال!)

وفر على نفسك بعض الوقت (والمال!) مع استضافة WordPress بواسطة WP Engine والوصول إلى سمات StudioPress و Genesis Framework. السمات سريعة الاستجابة وسهلة التخصيص ، مما يوفر لك الوقت عند محاولة إنشاء موقع متوافق مع الأجهزة المحمولة. ستحافظ منصة Plus WP Engine القوية على أداء موقعك محسنًا ، مما يساعد على الحفاظ على سرعات الصفحة هذه سريعًا وترتيب موقعك جيدًا.