كيف يعمل Bootstrap و WordPress معًا

WordPress و Bootstrap

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

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

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

ما هو Bootstrap for WordPress؟

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

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

باختصار ، يعتني Bootstrap ببعض تفاصيل البرمجة الصعبة من وراء الكواليس التي تساعد موقع الويب على العمل بسلاسة ، مما يسمح لك بالتركيز على الأجزاء الأمامية من موقع الويب الخاص بك والتي تكون مرئية للزوار.

لماذا أستخدم Bootstrap في WordPress؟

Bootstrap هي أداة متعددة الاستخدامات تسهل إنشاء مواقع مخصصة وسريعة الاستجابة. لكن لا تكتفي بكلامنا فقط - فحتى الشركات متعددة الجنسيات مثل Nintendo و Spotify استخدمت Bootstrap لتطوير مواقع ويب مذهلة. فيما يلي بعض الأسباب العديدة لدمج مكونات Bootstrap في موقع WordPress الخاص بك:

• إنه موجه نحو استخدام الأجهزة المحمولة - ولعل الأهم من ذلك ، أن قالب Bootstrap يجعل من السهل إنشاء مواقع ويب "الجوال أولاً". يشكل مستخدمو الأجهزة المحمولة جزءًا متزايدًا من حركة مرور الويب - يمتلك 85٪ من الأمريكيين هواتف ذكية ، ويتصل 15٪ من البالغين في الولايات المتحدة بالإنترنت حصريًا عبر أجهزتهم المحمولة. إذا لم يكن موقعك متوافقًا مع الجوّال ، فإنك تفقد مجموعة سكانية متزايدة من العملاء.

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

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

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

• من السهل العثور على المساعدة - كواحدة من أكثر الأدوات شيوعًا لإنشاء مواقع ويب سريعة الاستجابة (أكثر من 20٪ من مواقع الويب تستخدم Bootstrap ، بما في ذلك شركات مثل Netflix و Target) ، نادرًا ما تواجه مشكلة لم يحلها شخص آخر بالفعل . مع المنتديات التي لا نهاية لها ومقاطع الفيديو التعليمية ووثائق الدعم ، يمكن لأي شخص تعلم إتقان Bootstrap.

• إنه يعتني بتوافق المستعرض - باستخدام مجموعة من تغييرات CSS تسمى Reboot ، يساعد Bootstrap موقع الويب الخاص بك على العرض باستمرار عبر متصفحات وأجهزة مختلفة ، مما يؤدي إلى إنشاء موقع ويب سريع الاستجابة من شأنه تعزيز تجربة العميل الشاملة.

• إنه مجاني - مثل WordPress ، Bootstrap مجاني للتنزيل والاستخدام بنسبة 100٪.

أفضل 5 ثيمات مجانية لـ Bootstrap WordPress

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

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

1. فوتوريو

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

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

أضف تحسينًا لتحسين محركات البحث ودعمًا متعدد اللغات ، ومن السهل معرفة سبب احتلال Futurio للمراكز الخمسة الأولى.

2. رشيق

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

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

3. NewsMag

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

اختر من بين أربعة أنماط مختلفة لصفحة المدونة ، أو ابحث في الصفحة الرئيسية وقم بتخصيصها حسب رغبتك. تشمل ميزات Standout ما يلي:

• الخلفيات المخصصة
• نماذج الاتصال
• خطوط جوجل
• نشر لافتات مميزة
• فيديو متجاوب
• الحاجيات الديناميكية
• المتزلجون

لجميع احتياجات الوسائط على الإنترنت ، لا تبحث عن NewsMag.

4. إلدي

هناك إحساس عصري بـ Illdy يجعلها قابلة للتكيف مع أي عمل أو منتج. ومزايا هذا الموضوع لا تنتهي بالنداء المرئي.

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

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

5. متألقة

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

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

كيفية إضافة Bootstrap إلى WordPress

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

الخطوة الأولى: اتخذ الاحتياطات اللازمة

في أي وقت تخطط لإجراء تغييرات على سمة WordPress الخاصة بك - بغض النظر عن صغر حجمها - من الضروري القيام بأمرين أولاً:

1. قم بعمل نسخة احتياطية من موقعك - ​​في حالة حدوث خطأ ما في العملية ، يمكنك دائمًا البدء مرة أخرى من نسخة احتياطية حديثة.

2. أنشئ موضوعًا فرعيًا وقم بإجراء جميع التغييرات هناك - يعد تعديل القالب الرئيسي في WordPress أمرًا غير مستحسن ، لأنك تخاطر بالكتابة فوق الكود في قالبك الرئيسي.

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

الخطوة 2: افتح محرر سمة WordPress

أولاً ، قم بتسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك. من هناك ، ستختار المظهر Appearance من القائمة اليمنى ، ثم انقر فوق Theme Editor. انتقل إلى قسم رأس الموضوع (header.php).

الخطوة 3: الصق الكود المرجعي

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

<link href = ”https://cdn.jsdelivr.net/npm/

يستخدم Bootstrap CDN jsDelivr لتقديم نسخة مخبأة من CSS المترجمة لـ Bootstrap عبر هذا الكود. تأكد من مراجعة موقع Bootstrap على الويب ونسخ أحدث ورقة أنماط.

الخطوة 4: الانتهاء

كل ما عليك فعله هو النقر فوق الزر "تحديث ملف" الأزرق ، ومسح ذاكرة التخزين المؤقت للمتصفح ، وإعادة فتح WordPress. لديك الآن مرجع إلى Bootstrap مضمن في قالبك ، ويمكنك البدء في استخدامه لتحسين موقع الويب الخاص بك.

اجعل المستحيل ممكنًا باستخدام Bootstrap و WordPress

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

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