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

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

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

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

ما هو إطار عمل بوتستراب ؟

يصف موقع بوتستراب إطار عمل بوتستراب على أنه:

إطار عمل HTML و CSS و Javascrip الأكثر شعبية لتطوير المشاريع المتجاوبة والتى تعتمد مبدأ ( تطوير للموبايل أولا ) على شبكة الإنترنت.

هذا يخبرك بأمرين:

  • إطار عمل بوتستراب متجاوب ويعتمد مبدأ تطوير ( للموبايل أولاً ) .
  • يستخدم HTML و CSS و Javascript.

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

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

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

عندما سمعت لاول مرة عن بوتستراب ، كان أهم نقطة بيع له بقدرته على التجاوب في وقت كان الكثير من تطوير الويب (بما في ذلك تطوير الووردبريس) لا يزال بحاجة للحاق بتصميم الويب المتجاوب. لم يكن بوتستراب متجاوب بشكل كامل : هذه الميزة أضيفت في عام 2012، واعتمد قالب عمل بوتستراب مبدأ ( التطوير للموبايل أولا ) في عام 2013.

إذا قمت بتحميل إطار عمل بوتستراب ، سترى أنه يتكون من مجموعة من التصميمات (بما في ذلك الإصدارات المصغرة)، ملفات JavaScript وglyphicons، الموجودة في ملفات الخطوط. وهذه الملفات لا تحل محل ملفات القالب الخاص بك: بدلاً من ذلك يمكنك استدعائها في ملف التصميمات (stylesheet) وملف (functions) الخاصة بك حسب الحاجة.

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

فوائد انشاء القوالب بإستخدام إطار عمل بوتستراب

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

إنه متجاوب ويعتمد مبدأ ( التطوير للموبايل أولا ).

بوتستراب تلقائياً يقدم لك ميزة التجاوب وتصميم (للموبايل اولا) للقالب الخاص بك. إذا كنت قد واجهت صعوبة في الالمام بموضوع تطوير القوالب المتجاوبة ، فإنه سيوفر عليك العمل الشاق لتعلم كيفية جعل التصميمات الخاص بك متجاوبة وإضافة خاصية (media queries).

بوتستراب يستخدم تخطيط الشبكة(grid-based) القائمة على 12 عامود(columns) مع فئات الشبكة(grid classes) التي يمكنك استخدامها مع العناصر في ملفات هيكل القالب الخاص بك لجعل المحتوى الخاص بك يتناسب مع الشبكة.

وتشمل مزايا استخدام هذا النهج:

  • إذا لم تكن معتاداً على (media queries) ، فلست مضطرا لكتابتها بنفسك.
  • النظام القائم على الشبكة (grid-based) يستخدم CSS كائنية التوجه، مما يتيح لك الكثير من المرونة في تصميم العناصر في قالبك وفي الصفحات الخاصة بك.
  • مبدأ ( التطوير للموبايل اولا ) يعني أن CSS الخاص بك أكثر نظافة وأكثر كفاءة من ملف التصميم (stylesheet) الخاص بمبدأ ( التطوير للحاسوب اولا ).

يستخدم تصميم حديث ونظيف وجذاب

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

  • استخدام عنصر <small>للنص الثانوي ضمن العناوين
  • التصميم الخاص بوسم الاقتباس (blockquotes) والاستشهادات
  • تصميم الجدول ، الذي هو ألطف بكثير من ما رأيته في الكثير من قوالب ووردبريس

يتعامل بشكل جيد مع HTML5

فضلا عن إدخال فئات(classes) خاصة به للتصميم، يشمل بوتستراب أيضا تصميم لمجموعة كاملة من عناصر HTML5 التي يمكنك أن تتوقع استخدامها في القالب الخاص بك. تصميم كل هذه من الصفر يمكن أن يكون مشكلة حقيقية، لذلك هو يوفر عليك الكثير من العمل، فضلا عن تسهيل استخدامك للعلامات الدلالية (semantic markup) في القالب الخاص بك.

هو يوفر لك سهولة الوصول إلى السكربتات

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

  • الانتقالات (transitions)
  • مودلز (modals)
  • قوائم منسدلة (dropdowns)
  • تلميحات الأدوات (tooltips)
  • قوائم منبثقة (popovers)
  • أزرار (buttons)

… وأكثر. وهذا يمكنك من تسريع عملية التطوير الخاصة بك ، ويضمن أيضا أن تتفاعل كافة السكربتات الخاصة بك بشكل لطيف مع بعضها البعض. إذا كنت تريد استخدام أكثر من واحدة أو اثنتين من هذه الميزات ، فبوتستراب يمكنك من جعل تطوير القالب الخاصة بك أسهل بكثير؛ ومع ذلك، إذا كنت تنوي استخدام واحدة أو ربما اثنتين فقط من هذه الميزات ، فقد يكون هناك نهج أكثر كفاءة مع تعليمات برمجية (code) مضافة اقل.

الجوانب السلبية لانشاء القوالب بإستخدام إطار عمل بوتستراب

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

هناك الكثير لتتعلمه

لقد أشرت بالفعل إلى نظام الشبكة المتجاوب المستخدم في تصميمات (stylesheets) الخاصة ببوتستراب ، والعديد من الفئات (classes) التي يمكنك استخدامها والاستفادة منها في القالب الخاص بك. هذا شيء عظيم إذا كنت على استعداد للتعرف على هذه الفئات والعمل على كيفية استخدامها في القالب الخاص بك. ولكن، إذا كنت لا تحتاج إلى مثل هذا التخطيط(layout) المعقد وستقوم فقط باستخدام عدد قليل من الأنماط-التصميمات ، فقد تجد أنك تهدر قدرا كبيرا من الوقت تعمل من خلال جميع الفئات (classes) محاولا معرفة اي فئة تستخدمها.

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

وبالإضافة إلى ذلك، هناك فئات ل glyphicons ، والازرار، وأكثر من ذلك بكثير.

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

إنه يستخدم (Media Queries) ثابتة

(media queries) المستخدمة من قبل بوتستراب تستند إلى افتراض حول عرض الشاشة والجهاز والتي اصبحت قديمة.

هذه هي (media queries) :

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

للعام الماضي أو نحو ذلك، التطوير المتجاوب ابتعد عن نقاط التوقف المحددة مسبقاً ل (media queries) ، واتجه نحو التصميم-المستند على نقاط التوقف. في حين ان هذه (media queries) تستند وستعمل بالتأكيد مع تصميم بوتستراب (بحيث لا ينبغي ان تسبب أي مشاكل في أي من الأجهزة المدعومة أو المتصفحات ، والتي يوجد منها الكثير)، لكنها لا تعطيك مرونة في حالة كنت تبرمج تعليمات برمجية(code) خاصة بك .

إذا كنت قد قررت إضافة (media query) وسيطة الى ملف التصميم (stylesheet) الخاص بك، فعليك أن تأخذ 155سطر من التعليمات البرمجية الخاصة بتصميم نظام الشبكة وأن تجعلها تتكيف مع نقطة التوقف الجديدة الخاصة بك – ليست مهمة أحسدك عليها !

يضيف سخام (أشياء غير مهمة)

نعم، أعتقد أنك كنت في انتظار هذه العبارة– استجابة الأسهم لأي مطور ويب متشكك لإطار عمل جديد أو أداة.

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

الملفات هي مصغرة، والتي يمكن ان تساعد، لكن حتى مع ذلك، هل حقاً تحتاج إلى كل تلك التعليمات البرمجية الغير مستخدمة في القالب الخاص بك؟

يمكن ان يثنيك عن التصميم المبتكر

قم بإضافة بوتستراب الى القالب الخاص بك، استدعي ملف التصميم (stylesheet) من خلال ملف تصميم القالب ، تادا ! لديك الان تصميم-جاهز ، ومتجاوب والذي يبدو على ما يرام. معظمنا يميل إلى ترك الأمر عند هذا الحد ، تعديل بعض الألوان والتغييرات ربما لكن ليس أكثر من ذلك.

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

ويكمن خطر استخدام الكثير من القوالب لبوتستراب هو أننا في نهاية المطاف سنجد الكثير من القوالب التي تبدو أساسا متشابهة. مطوري قوالب ووردبريس قاموا بعمل عظيم لانهاء الاتهامات بأن قوالبهم ‘تشبه ووردبريس’ في السنوات الأخيرة، لذا هل نحن نريد أن تبدو جميع قوالبنا ‘وكأنها بوتستراب’؟

بوتستراب و ووردبريس مختلفان كثيراً

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

إطار عمل قالب ووردبريس كثيرا ما سيقدم لك كل ما تحصل عليه من بوتستراب ، و بطريقة أكثر اتساقا مع طريقة عمل مطوري ووردبريس. ومثل هذه القوالب لا يجب أن تكون باهظة الثمن أو لها قاعدة برمجية ضخمة: قالب وونديرفلوكس، على سبيل المثال، هو مجاني ومفتوح المصدر، ويشمل نظام شبكي متجاوب (مثل بوتستراب لكن أقل تعقيدا) ومكتبة من (functions) و (hooks) والتي لا تحصل عليها في بوتستراب.

مثال عن كيف أن بوتستراب و ووردبريس ليس متوافقان هو في تصميم قوائم التصفح (navigation menu) قائمة الووردبريس الخاصة بك لن تعمل من تلقاء نفسها عند تمكين بوتستراب : بدلاً من ذلك يجب عليك إنشاء (nav walker) مخصصة. وهذا ليس من الصعب القيام به إذا كنت مرتاحاً مع التعليمات البرمجية، ولكنه يضيف خطوة أخرى لتطوير القالب الخاص بك.

ملخص

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

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

وختاما، أود أن أوصى على استخدام بوتستراب في عدة ظروف :

  • إذا كنت على استعداد لبذل بعض الجهد في تعلم كيفية استخدام بوتستراب
  • إذا كنت تريد استخدام الكثير من ميزات بوتستراب ، مثل نظام الشبكة والسكربتات
  • إذا لم يكن لديك مصمم يعمل معك (أو لست مصمما بنفسك) وتريد تصميما جاهزاً
  • إذا كنت ترغب في تطوير قالب متجاوب ولكن لا تعرف كيفية كتابة ( media queries )

وانصح بعدم استخدامه في هذه الظروف:

  • إذا كنت تريد المزيد من المرونة فيما يتعلق بنقاط التوقف أو التصميم أو التخطيط
  • إذا كنت ستستخدم سكربت واحد ، أو أنك لن تستخدم نظام الشبكة
  • إذا كنت تريد حل سريع — بوتستراب ليس واحدا منها
  • إذا كان هناك إطار عمل قالب ووردبريس او قالب مبدئي يقوم بالوظيفة التي تحتاج إليها، ويوفر لك أكثر من ذلك، مثل (functions) و (hooks).

وفي نهاية المطاف القرار لك!

Nemra1

Nemra1

Nemra1 Adminstrator