هل كنت على دراية بأنه يمكن لأكثر من نصف زائري موقعك مشاهدة موقعك الإلكتروني على الهاتف أو الجهاز اللوحي الخاص بهم؟ سيرشدك هذا الدليل خلال الخطوات الأساسية لتوفير تجربة مستخدم سلسة عبر جميع أحجام الشاشة، بدءًا من تحديد قالب متجاوب وصولاً إلى تحسين محتواك.
يعد اختيار قالب مناسب للأجهزة المحمولة على موقع ووردبريس ضروريًا لتوفير تجربة مستخدم سلسة ومحسنة عبر مختلف الأجهزة، وتحسين إمكانية الوصول، والتأثير بشكل إيجابي في تصنيفات محركات البحث.
جميع القوالب المعروضة على ووردبريس.كوم مستجيبة للأجهزة المحمولة، ما يعني أنها مصممة لكي تبدو رائعة على متصفحات الأجهزة المحمولة وأجهزة الحاسوب المكتبية على حد سواء.
إذا كنت تستخدم قالبًا تابعًا لطرف ثالث، فتأكد من أنه معلَن ومناسب للأجهزة المحمولة، وأنه يبدو جيدًا عند فتحه على أجهزتك المحمولة. تحقق من وثائق القالب للحصول على خيارات التخصيص أو إعداداته لمنحك التحكم في مظهر القالب على الأجهزة المحمول.
بعد اختيار قالب مستجيب للأجهزة المحمولة، من المرجح أن تجري تغييرات على المحتوى الافتراضي لجعله خاصًا بك. بينما تحرر موقعك في محرر ووردبريس، من المهم التأكد من أنه يبدو جيدًا على جميع الأجهزة.
لا يوجد “محرر للأجهزة المحمولة” منفصل في ووردبريس. تنعكس التغييرات التي تجريها على موقعك على الأجهزة المحمولة وأجهزة الحاسوب المكتبية على حد سواء. ما دام موقعك يحتوي على قالب مناسب للأجهزة المحمولة، سيتأقلم المحتوى مع جميع الشاشات، الكبيرة والصغيرة. يشار إلى ذلك باسم “الاستجابة”.
يمكنك النقر على أيقونة معاينة في الزاوية العلوية اليمنى من المحرر للاطلاع على شكل موقعك أمام أحد الزائرين. حدد الجهاز المحمول أو الجهاز اللوحي لعرض تقريب المحتوى في المحرر:
نقول التقريب هنا؛ لأن العديد من عناصر طريقة عرض المحرر تعتمد على قالب الموقع. لا يتم عرض أنماط القالب في المحرر؛ بل يتم عرضها فقط من خلال معاينة الصفحة في علامة تبويب جديدة أو مشاهدة موقعك في متصفح جهازك. لعرض المحتوى الخاص بك مع تطبيق أنماط القالب، انقر على خيار “معاينة في علامة تبويب جديدة“.
بعد النقر على خيار “معاينة في علامة تبويب جديدة“، يمكنك عرض إصدار الجهاز المحمول باستخدام أداة الفاحص في متصفحك. لاستخدام وضع الفحص الخاص بمتصفحك لمعاينة الشكل الذي ستظهر عليه الصفحة أو التدوينة في طريقة عرض الجهاز المحمول:
- انقر على معاينة في الزاوية العلوية اليمنى من محرر ووردبريس.
- حدد خيار “معاينة في علامة تبويب جديدة“.
- انقر بزر الماوس الأيمن على صفحة المعاينة وانقر على “فحص” (Chrome وFirefox وEdge) أو “فحص العنصر” (Safari).
- في وضع الفحص الخاص بالمتصفح، انقر على أيقونة الجهاز المحمول للتبديل بين المعاينة الخاصة به وطريقة عرض الجهاز المحمول.
بعد نشر تغييراتك، قد يكون من المفيد فتح هاتفك أو جهازك اللوحي لعرض الموقع كما سيفعل أي عضو من عامة الناس، مع إجراء فحص نهائي للتأكد من عرضه بالطريقة التي كنت تقصدها.
في ما يأتي بعض النصائح اللازمة لزيادة سرعة استجابة تصميم موقعك، ما يضمن تقديم المحتوى بشكل جيد على الأجهزة المحمولة والأجهزة اللوحية وأجهزة الحاسوب المكتبية.
إذا كانت الصورة تحتوي على نص تم تصميمه للصورة نفسها، فيمكن قص هذا النص على الشاشات الأصغر، مثل:
يرجع ذلك إلى أن النص المصمم داخل صورة غير مستجيب.
باستخدام محرر ووردبريس، يمكنك كتابة نص على صورة. عند إضافة نص إلى صورة بهذه الطريقة، يكون النص مستجيبًا. في الفيديو أدناه، سننشئ الصورة نفسها مثلما هو موضح أعلاه باستخدام مكوِّن الغلاف، الذي يظهر مدى استجابته على الشاشات الأصغر:
لزيادة استجابة أحجام الخطوط على صفحتك، استخدم وحدات em أو rem بدلاً من وحدات البكسل (px). استخدام وحدات البكسل لحجم الخط هي في الأساس أكواد صلبة يمكن استخدامها لحجم خط معين في الصفحة، وهذا يعني أن الخط سيتم عرضه دائمًا بهذا الحجم بالضبط، بغض النظر عن حجم الشاشة. على النقيض من ذلك، قيم em وrem هي وحدات أحجام نسبية يمكنها تكبير هذا الحجم أو تصغيره حسب المساحة المتاحة على شاشة المشاهد.
بدلاً من استخدام قائمة نصية لتخطيط جهازك المحمول، يمكنك تخصيص مكوِّن التنقل الخاص بموقعك لعرض قائمة الأجهزة المحمولة، التي تسمى قائمة التراكب (تعرف أيضًا باسم “قائمة هامبورغر” أو “قائمة كباب”). يمكن أن تساعد هذه الميزة على جعل الترويسة أصغر حجمًا والقائمة أكثر سهولة في الوصول لعرضها واستخدامها على الجهاز المحمول.
تتضمن بعض المكوِّنات خيار “التكديس على الجهاز المحمول” لتحسين استخدام المساحة على الشاشات الأصغر. إذا تم عرض المحتوى جنبًا إلى جنب على شاشة الحاسوب المكتبي، فإنه سيتحرك إلى الأسفل على الشاشات الأصغر بحيث تكون أكثر سهولة في القراءة من قِبل مشاهدي الأجهزة المحمولة.
يتوفر إعداد “التكديس على الجهاز المحمول” في المكونات الآتية:
ستكون الأزرار والقوائم أسهل في قابلية القراءة على الأجهزة الأصغر عن طريق السماح لها بالتغليف في خطوط متعددة.
يتوفر خيار “السماح بالتبديل إلى خطوط متعددة” في إعدادات تخطيط المكوِّنات الآتية:
- مكوِّن الأزرار
- مكوِّن أزرار المشاركة
- مكوِّن التنقل
- مكوِّن أيقونات شبكات التواصل الاجتماعي
- مكوِّن التعليقات
- مكوِّن الصف والتكديس
صفحات الجوال المسرعة (AMP) هي إطار عمل مفتوح المصدر تابع لأطراف ثالثة يتيح إنشاء المواقع الإلكترونية التي تقوم بالتحميل على الفور تقريبًا على الجهاز المحمول، ما يمنح زائري الموقع تجربة تصفح سريعة. لإضافة صفحات الجوال المسرعة إلى موقعك، يمكنك تثبيت إضافة صفحات الجوال المسرعة. بالنسبة إلى مواقع ووردبريس.كوم التي تدعم الإضافات التي تم إنشاؤها قبل 13 يونيو 2022، تم تثبيت إضافة صفحات الجوال المسرعة بشكل افتراضي.
ضع في الحسبان أن استخدام صفحات الجوال المسرعة يستبعد كثيرًا من الوظائف على موقعك (التخطيط، والعديد من الميزات) لكي يتمكن زائرو الأجهزة المحمولة من تحميل الموقع بسرعة. من الأفضل استخدام ذلك فقط في حال إنشاء قالبك مع وضع صفحات الجوال المسرعة في الحسبان. تعد جميع القوالب الموجودة على ووردبريس.كوم مناسبة للهواتف المحمولة بالفعل، لذا لا تكون صفحات الجوال المسرعة مطلوبة لتوفير تجربة محسنة للأجهزة المحمولة.
إذا كان موقعك يواجه مشكلات في العرض وكانت لديك إضافة صفحات الجوال المسرعة مثبتة، فإننا نوصي بتعطيل إضافة صفحات الجوال المسرعة لمعرفة ما إذا كان ذلك يحسِّن من أداء موقعك أم لا. إذا كنت ترى خيار “الخروج من إصدار الجهاز المحمول” على موقعك الإلكتروني الذي ترغب في إزالته تمامًا، فقم بتعطيل إضافة صفحات الجوال المسرعة كذلك.
إذا كان موقعك يستخدم صفحات الجوال المسرعة منذ فترة، فضع في حسبانك أن غوغل لا يقوم بتحديث نتائجه على الفور، وسيستمر في عرض الصفحات في صفحات الجوال المسرعة لبعض الوقت بعد تعطيلها. قد ترغب في إعداد عمليات إعادة توجيه الصفحة بعد تعطيل إضافة صفحات الجوال المسرعة. ستقوم محركات البحث بفهرسة عناوين الموقع الخاصة بصفحة إضافة صفحات الجوال المسرعة، وسيستغرق الأمر بعض الوقت لإسقاط عناوين المواقع تلك من قوائمها، ما يعني أنه قد يتم إرسال بعض زائري الأجهزة المحمولة إلى صفحة خطأ 404.
هناك العديد من إضافات إعادة التوجيه الشائعة والمجانية للاختيار من بينها. ستقوم بإعداد إعادة توجيه 301 ومن المحتمل أنك ستحتاج إلى تعبير Regex مماثل لـ /(.*)\/amp. نوصي بإجراء بعض الاختبارات للتأكد من إعداد إعادة التوجيه الصحيحة والرجوع إلى أدلة إرشادات إضافة إعادة التوجيه.
الدعم 