كيفية إنشاء نسخة محمولة من موقع ووردبريس طباعة

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

من السهل إنشاء موقع ويب للجوال باستخدام WordPress على Namecheap، سواء اشتركت في Shared Hosting أو EasyWP WordPress Hosting .

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

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

بالإضافة إلى ذلك، تقوم خوارزمية محرك بحث Google بتصنيف المواقع الملائمة للجوال في مرتبة أعلى.

سنغطي في هذه المقالة عدة طرق لجعل موقع WordPress الخاص بك ملائمًا للجوال:

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

مواقع العرض الديناميكية: يتم تحميل عنوان URL واحد، ولكن يتم استخدام محتوى مختلف وCSS، اعتمادًا على الجهاز المستخدم.

إنشاء عناوين URL منفصلة لأجهزة سطح المكتب والأجهزة المحمولة: يتم تحميل عناوين URL مختلفة وبالتالي مواقع الويب، على سبيل المثال، nctest.info وm.nctest.info

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

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

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

عادةً ما يكون الملف الذي ستحتاج إلى تعديله هو style.css . وهو موجود في الدليل /wp-content/themes/theme_name/ .

عادةً ما يبدو استعلام وسائط CSS3 بالشكل التالي:

@media فقط screen and (max-width: 480px) {

}

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

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

شاشة @media فقط و(الحد الأدنى للعرض: 768 بكسل( و(الحد الأقصى للعرض: 959 بكسل) {

}

جميع تعديلات التصميم الإضافية ينبغي إضافتها بين القوسين {...} .

كمثال، سنأخذ السمة الافتراضية Twenty Ten والتي لا تستجيب بشكل افتراضي.

يقوم الكود الأول بتعيين حجم الإطار الرئيسي للموضوع على 550 بكسل:

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {

width:550px;

}

قارن كيف سيبدو موقع الويب في هذه الحالة على جهاز محمول:

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

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

الممكن إخفاء بعضها، مثل أشرطة التمرير أو صور الرأس على سبيل المثال.

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

يجب استخدام الكود التالي (على سبيل المثال، لصورة الرأس):

#branding img {

Display:none;

}

إذا كنت ترغب في تغيير حجم العنصر (صورة الرأس في المثال)، فاستخدم

#branding img {

width:100%

}

ملاحظة: يتطلب تحرير ملف style.css معرفة بتطوير الويب أيضًا. لا تنس عمل نسخة احتياطية من ملفك قبل تغييره.

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

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

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

1. قم بتسجيل الدخول إلى لوحة تحكم إدارة WordPress الخاصة بك ( yourdomain.com/wp-admin )، وانتقل إلى قائمة المظهر ، وانقر فوق السمات .
2. انقر فوق إضافة جديد :

3. انقر فوق عامل تصفية الميزات وتحقق من التخطيط المستجيب، تحقق من الخيارات الأخرى إذا لزم الأمر للعثور على السمة المطلوبة.

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

مواقع العرض الديناميكية

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

يحتوي معظمها على عدد من الإعدادات الأساسية المتاحة مجانًا.

كمثال، سنستخدم أحد المكونات الإضافية الأكثر شيوعًا لتصميم مدونات متوافقة مع الأجهزة المحمولة - WPtouch Mobile Plugin .

أولاً، تحتاج إلى تثبيته وتنشيطه في لوحة تحكم المشرف.

بمجرد الانتهاء من ذلك، يجب عليك اختيار سمة لإصدار الهاتف المحمول الخاص بك من موقع الويب - انتقل إلى قائمة WPtouch ، وانقر فوق السمات والإضافات (1). اختر السمة المطلوبة وانقر على إعداد (2):

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

إليك كيف تبدو قائمة البرنامج الإضافي WPtouch Mobile:

بمجرد الانتهاء من جميع التعديلات، احفظ التغييرات وتحقق من كيفية عرض موقع الويب على جهاز سطح المكتب والجهاز المحمول:

إنشاء عناوين URL منفصلة لأجهزة سطح المكتب والأجهزة المحمولة

الطريقة الأخيرة هي الأكثر وقتًا- سوف تحتاج إلى ما يلي:

1. أنشئ نطاقًا فرعيًا مطابقًا لإصدار هاتفك المحمول، مثل m.nctest.info .
2. قم بتطوير محتوى الموقع أو نسخه إلى مسار دليل النطاق الفرعي الذي تم إنشاؤه.
3. قم بتثبيت وتكوين البرنامج المساعد لإعادة التوجيه عبر الهاتف المحمول.

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

يجب تكرار أي تعديلات تجريها على الإصدار الآخر.

بمجرد إنشاء النطاق الفرعي وتعديل موقع الويب، تابع وتثبيت المكون الإضافي في لوحة تحكم مسؤول موقع الويب الرئيسية.

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

1. انتقل إلى قائمة الإعدادات وانقر على إعادة توجيه موقع الجوال.
2. أدخل عنوان URL للجوال الذي ترغب في الحصول عليه. تحقق من أي خيارات إضافية إذا لزم الأمر.
3. انقر على إعدادات التحديث :

ملحوظة: نحن لا نقدم خدمات تصحيح أخطاء التعليمات البرمجية وتطوير مواقع الويب.

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

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