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

تم تصميم سمات WordPress عادةً مع وضع مستخدمي سطح المكتب في الاعتبار. يمكن أن يمثل هذا مشكلة لمستخدمي الأجهزة المحمولة ، الذين قد يواجهون صعوبة في عرض موقع WordPress غير مستجيب. لحسن الحظ ، هناك بعض الطرق السهلة لجعل سمة WordPress الخاصة بك تستجيب. من أجل جعل سمة WordPress الخاصة بك تستجيب ، ستحتاج إلى تعديل ملف CSS الخاص بقالبك. يمكنك القيام بذلك عن طريق الانتقال إلى المظهر> المحرر في لوحة معلومات WordPress الخاصة بك. بمجرد دخولك إلى المحرر ، حدد موقع ورقة الأنماط (style.css) وابحث عن الكود الذي يتحكم في عرض موقعك. استبدل الشفرة التي تتحكم في عرض موقعك بما يلي: body {max-width: 100٪؛ العرض: تلقائي ؛ } سيجعل هذا الرمز موقع WordPress الخاص بك يتكيف تلقائيًا مع عرض الجهاز الذي يتم عرضه عليه. ستحتاج أيضًا إلى إضافة الكود التالي إلى ملف header.php الخاص بك: يخبر هذا الرمز متصفحات الهاتف المحمول بضبط عرض الصفحة لتتناسب مع عرض الجهاز. بمجرد إجراء هذه التغييرات ، احفظ ملفاتك وقم بتحميلها على الخادم الخاص بك. يجب أن يكون موقع WordPress الخاص بك الآن مستجيبًا.

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

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

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

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

هل يمكن أن يكون WordPress مستجيبًا؟

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

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

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

إيجابيات وسلبيات ثيمات WordPress المستجيبة

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

ما هو موضوع ووردبريس المتجاوب؟

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

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

تم تصميم Tusant ، وهو موضوع WordPress يستجيب للجوال ، لمساعدة البودكاست على إنشاء عروضهم. يأتي Ultra Ultra مع عدد كبير من الميزات ، مثل التمرير المنظر والرسوم المتحركة والعدادات وخرائط Google وشرائح التمرير وما إلى ذلك. باستخدام Authority Pro ، يمكنك بيع الدورات التدريبية عبر الإنترنت وكذلك بناء مجتمعات عضوية. يتيح لك مُخصص WordPress المباشر تخصيص السمة لتلبية احتياجاتك الخاصة. قائمة التنقل في Prime News ثابتة ، وشريطها الجانبي به تخطيط قابل للطي. Allegiant ، موضوع WordPress سريع الاستجابة لمواقع الأعمال التجارية ، هو تصميم أنيق. تصميم موقع الويب حديث مع طباعة كبيرة وعبارات بارزة تحث المستخدم على اتخاذ إجراء ومجموعة متنوعة من خيارات التخصيص.

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

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

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

إيجابيات وسلبيات ثيمات WordPress

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