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

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

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

أحد التحديات التي لاحظناها هو أن التحقق من الإصدار المحمول على سطح المكتب قد يكون صعب بدون الأدوات المناسبة.

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

في هذا الدليل، سنوضح لك الطريقتين لعرض النسخة المحمولة من مواقع ووردبريس من سطح المكتب.

لماذا يجب عليك معاينة تخطيط هاتفك المحمول

أكثر من 50% من زوار موقعك الإلكتروني سيصلون إليه باستخدام هواتفهم المحمولة، وحوالي 3% سيستخدمون أجهزة لوحية.

وهذا يعني أن وجود موقع يبدو رائع على الهاتف المحمول أمر مهم للغاية.

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

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

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

في الأقسام التالية، سنلقي نظرة على كيفية عرض النسخة المحمولة من موقع ووردبريس الخاص بك على سطح المكتب.

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

• الطريقة 1: استخدام أداة تخصيص قالب ووردبريس
• الطريقة 2: استخدام وضع الجهاز في أدوات تطوير جوجل كروم
• نصيحة إضافية: إنشاء محتوى مخصص للهواتف المحمولة في ووردبريس
• الأسئلة الشائعة

دعونا نبدأ!

الطريقة 1: استخدام أداة تخصيص قالب ووردبريس

بإمكانك استخدام أداة تخصيص قالب ووردبريس لمعاينة النسخة المحمولة من موقع ووردبريس الخاص بك.

قم بتسجيل الدخول إلى لوحة تحكم ووردبريس الخاصة بك وانتقل إلى الشاشة المظهر » التخصيص.

سيؤدي هذا إلى فتح مخصص قالب ووردبريس.

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

في أسفل الشاشة، ما عليك سوى النقر على أيقونة الهاتف المحمول.

ستشاهد بعد ذلك معاينة لكيفية ظهور موقعك على الأجهزة المحمولة.

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

يمكنك الأن إجراء تغييرات على موقعك الإلكتروني والتحقق من مظهرها قبل نشرها.

الطريقة 2: استخدام وضع الجهاز في أدوات تطوير جوجل كروم

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

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

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

بعد ذلك، عليك النقر بزر الماوس الأيمن على الصفحة وتحديد خيار ‘Inspect’.

سيتم فتح لوحة جديدة على الجانب الأيمن أو في أسفل الشاشة.

سوف يبدو الأمر كالتالي:

في عرض المطور، ستتمكن من رؤية كود HTML المصدرية وCSS وتفاصيل أخرى لموقعك.

بعد ذلك، انقر على زر ‘تبديل شريط أدوات الجهاز’ للانتقال إلى عرض الجوال.

ستلاحظ انكماش معاينة موقعك الإلكتروني لتتناسب مع حجم شاشة الهاتف المحمول.

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

عند تحريك مؤشر الماوس فوق عرض موقعك على الهاتف المحمول، سيتحول إلى دائرة. يمكنك تحريك هذه الدائرة بالماوس لمحاكاة شاشة اللمس على الهاتف المحمول.

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

ستظهر بعض الخيارات الإضافية أعلى عرض موقعك على الهاتف المحمول.

تتيح لك هذه الإعدادات القيام بالعديد من الأمور الإضافية. يمكنك التحقق من مظهر موقعك على مختلف أنواع الهواتف الذكية.

على سبيل المثال، يمكنك اختيار جهاز محمول مثل آيفون ورؤية كيفية ظهور موقعك عليه.

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

نصيحة إضافية: إنشاء محتوى مخصص للهواتف المحمولة في ووردبريس

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

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

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

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

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

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

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

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

الأسئلة الشائعة

فيما يلي بعض الأسئلة التي يطرحها قرائنا بشكل متكرر حول معاينة تخطيط موقعك على الهاتف المحمول.

هل ستتطابق معاينات سطح المكتب هذه تمامًا مع الأجهزة المحمولة الحقيقية؟

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

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

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

هل يمكنني تعديل موقعي في عرض الهاتف المحمول من سطح المكتب؟

نعم، يتيح لك ووردبريس تحرير المحتوى أثناء معاينة الوضع المحمول في المُخصص أو استخدام منشئي الصفحة مثل Elementor، وBeaver Builder، وDivi.

عند التبديل إلى المعاينة المحمولة، يمكنك:

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

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

كيف يمكنني التحقق من عرض ووردبريس الخاص بي على الهاتف المحمول دون تسجيل الدخول؟

إذا كنت تريد رؤية كيف يبدو الموقع المباشر للزائرين، فجرب الطرق التالية:

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

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

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

هل وجدت هذا المنشور مفيدًا؟ شاركنا رأيك من خلال ترك تعليق أدناه، أو انضم إلينا على تويتر وفيسبوك.