يعتبر تطوير القوالب ذات التصميم المتجاوب (Responsive Design) أحد الأمور الأساسية التي يجب على أي مصمم أو مطور قوالب ووردبريس الاهتمام بها، نظرًا لوجود عدة أجهزة بأحجام شاشات مختلفة يتم من خلالها تصفح هذه المواقع عبر الإنترنت. إن زيارات المواقع التي مصدرها الهواتف الجوالة تتزايد يومًا بعد يوم فمعظم الأشخاص باتوا يفضلون استخدام هواتفهم للبحث عن أي شيء وتراجع استخدام أجهزة الكمبيوتر المكتبية في تصفح الانترنت، لذا فإن تجاوب الموقع مع أحجام الشاشات الصغيرة وسهولة عرضه والتنقل فيه وتصفحه بسهولة على هذه الأجهزة الصغيرة بات ضرورة ملحة. في مقال اليوم سنسلط الضوء على أهمية استخدام بوستراب (Bootstrap) في ووردبريس لتطوير قوالب متجاوبة (Responsive themes) تتناسب مع كافة أحجام الشاشات، وتضبط عناصر موقع الويب ذاتيًا وفقًا لحجم الشاشة وتساهم في تحسين إمكانية القراءة وتحسين تجربة مستخدم الموقع بشكل عام.
محتويات المقالة ما هو بوتستراب Bootstrap؟ تعلم بوتستراب 1-تعلم كلاسات بوتستراب؟ 2-فهم التخطيط الشبكي في بوتستراب كيف يمكن الاستفادة من بوتستراب في ووردبريس؟ خطوات عملية لبناء قالب بوستراب في ووردبريس خطوة1-إنشاء مجلد القالب والملفات الأساسية له خطوة2-إضافة بوتستراب إلى قالب ووردبريس الأسلوب الأول -الرجوع إلى الملفات المصدرية للبوتستراب من شبكة توصيل المحتوى (CDN). الأسلوب الثاني:تنزيل الملفات المصدرية للبوستراب. خطوة3-برمجة وتصميم ملفات القالب 1-برمجة ملف التنسيقات الخاصة بالقالب style.css 2-برمجة ملف وظائف القالب functions.php 2-برمجة ملف ترويسة القالب 4-برمجة ملف القالب الرئيسي index.php طريقة مساعدة لتسريع عملية بناء قالب بوتستراب في ووردبريس الخلاصة ما هو بوتستراب Bootstrap؟ بوتستراب Bootstrap هو إطار عمل مفتوح المصدر تم ابتكاره من قبل فريق مصممي تويتر، ثم تمت إتاحته بعد ذلك لمجتمع المصادر المفتوحة، وهو متوافق مع جميع المتصفحات الحديثة (Chrome، و Safari، و Internet Explorer وغيرها.. ) يستخدم بوتستراب بشكل أساسي لتطوير الواجهات الأمامية لمواقع الويب المتجاوبة مع الهواتف الجوالة، فهو يجبر المصممين على إنشاء مواقع مصممة لأحجام الشاشات الصغيرة بالمقام الأول (Mobile First CSS framework) ثم توسيع نطاق التصاميم من أجل الشاشات الأكبر حجمًا، كما أنه يتكون من مجموعة أدوات برمجية جاهزة تسهل على المطورين عملية تصميم مواقع الويب المعقدة. لقد أصبح بوتستراب واحدًا من أشهر أكثر أطر عمل الواجهات الأمامية ( Front End frameworks) بسبب بنيته خفيفة الوزن، فهو يتكون من مزيج من أكواد HTML و CSS و Javascripts ويمكن من تصميم وبناء مواقع ويب احترافية ومتجاوبة بأقل كود وبأقل عدد من استعلامات الوسائط (Media Queries) التي تستخدم عادة لإنشاء تنسيقات مخصصة لأنواع الأجهزة المختلفة كما يمكنك الاستغناءعن كتابة هذه الاستعلام بنفسك بالكامل إذا لم تكن معتادًا على التعامل معها. أحدث إصدار للبوتستراب هو Bootstrap 5 وقد تم إطلاقه في مايو (2021). وهو يختلف عن الإصدارات السابقة بأنه لم يعد يستخدم jQuery كي يسهل استخدام بوستراب في المشاريع التي لا تتطلب أو تستخدم jQuery ومع ذلك لا يزال بإمكانك استخدام jQuery مع Bootstrap إذا كنت تحتاج لاستخدامه في موقع الويب الخاص بك. تعلم بوتستراب بالرغم من أن تعلم بوتستراب ليس بالطبع بسهولة تعلم ووردبريس لكنه يتمتع مثله بمجتمع دعم قوي يمكنك من الاستعانة به في اي وقت. كي تتعلم بوتستراب تحتاج بشكل أساسي لتعلم الكلاسات الجاهزة الخاصة ببوستراب، وفهم النظام الشبكي الذي يعمل وفقه هذا الإطار. 1-تعلم كلاسات بوتستراب؟ يوفر بوستراب الكثير من الصفوف أو الكلاسات الجاهزة المسبقة التنسيق (Utility Classes) التي يمكنك الاستعانة بها لإنشاء تخطيطات لصفحات موقعك وتنسيق العناصر الموجودة ضمن هذه الصفحات بشكل سهل ومرن. تضمن إصدار Bootstrap 5 منمجموعة واسعة من الكلاسات الجاهزة الموجودة بالفعل في Bootstrap 4 وأضاف لها بعض الصفوف الجديدة . تُستخدم هذه الصفوف لوضع بعض التنسيقات والأنماط بسرعة على عناصر HTML دون الحاجة لكتابة أي قواعد CSS مخصصة وهي تقسم إلى مجموعات مختلفة. كلاسات للأزرار Buttons كلاسات لتنسيق النصوص Typography كلاسات للنماذج Forms كلاسات لشرائح الصور المتحركة الدوارة Carousel كلاسات للجداول Tables كلاسات للقوائم التنقل Navbar وغيرها الكثير.. على سبيل المثال يوفر بوتستراب 5 تسعة كلاسات لتنسيق الأزرار كما هو مبين في الصورة التالية Bootstrap’s custom button styles وكل ما عليك هو إضافة الكلاس المطلوب ضمن كود HTML الخاص بالزر كي يتم تنسيقه بالستايل المخصص وإضافة تفاعل جافا سكربت الافتراضي الخاص به مباشرة. Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link يمكنك استعراض كافة هذه الصفوف والتعرف على طريقة عملها من هنا . 2-فهم التخطيط الشبكي في بوتستراب من الضروري فهم آلية عمل نظام التخطيط الشبكي في بوتستراب حتى تتمكن من تخطيط صفحتك والاستفادة القصوى من جميع ميزات بوتستراب عند إعداد التصميم الخاص بك. يوفر بوتستراب نظام شكبي flexbox مرن وسريع الاستجابة يتسع لغاية 12 عمود سريع الاستجابة تعتمد على النسبة المئوية وتعيد ترتيب العناصر التي بداخلها تلقائيًا عندما يتغير حجم الشاشة. يمكن تشبيه بوستراب بأنه قماش كانفا يحول صفحة الويب إلى شبكة أفقية تتكون من حاوية أساسية تمثل إطار يجمع بداخله كافة العناصر الأخرى وبكل حاوية أسطر (عناصر div لها الكلاس row) وأعمدة (عناصر div لها الكلاس col) ويقوم بوضع العناصر داخل المنطقة المرئية من صفحة الويب(viewport) مع زيادة أو حجم الشاشة. هناك ثلاثة أنواع من صفوف الحاوية في بوتستراب التي يمكنك استخدامها للعناصر div (أو section) في صفحتك: container container-fluid responsive container تدعم هذه الشبكة ستة نقاط توقف (Breakpoints) سريعة الاستجابة. تعتمد نقاط التوقف هذه على الميديا كويري للحجم الأصغري (min-width) مما يعني أنها تؤثر على نقطة التوقف هذه وكل النقاط الأعلى منها -كما سنشرح بعد قليل- هذه النقاط هي: صغير جدًا XS الافتراضي وهو يعني حجم الجهاز أصغر من 576 بكسل (بادئة الكلاس الموافق .col-) صغير sm وهو يعني حجم الجهازأكبر أو يساوي 576 بكسل (بادئة الكلاس الموافق .col-sm-) متوسط md وهو يعني حجم الجهاز أكبر أو يساوي 768 بكسل (بادئة الكلاس الموافق.col-md-) كبير lg وهو يعني حجم الجهازأكبر أو يساوي 992 بكسل (بادئة الكلاس الموافق .col-lg-) xl كبير جداً وهو يعني حجم الجهازأكبر أو يساوي 1200 بكسل (بادئة الكلاس الموافق .col-xl-) xxl وهو يعني حجم الجهاز أكبر أو يساوي 1400 بكسل (بادئة الكلاس الموافق .col-xxl-) يلحق كل كلاس من هذه الكلاسات برقم من 1 إلى 12 مرفقة بها بما يتوافق مع قيم مئوية معينة، ويمكن استخدام مزيج من هذه الكلاسات (أي التصريح عن عدة كلاسات بنفس الوقت في التصميم الخاص بك) بحيث يكون الكلاس المذكور اولاً هو الذي يطبق أولاً.
على سبيل المثال الكلاس .col-xs-1 سيكون بعرض 8.333333333333332٪ من عرض شاشة الهاتف الكلاس .col-xs-2 سيكون بعرض 16.666666666666664٪ من عرض شاشة الهاتف الكلاس .col-xs-3 سيكون بعرض 25٪ من عرض شاشة الهاتف وهكذا حتى نصل إلى الكلاس .col-xs -12 الذي سيكون بعرض 100٪ من عرض شاشة الهاتف نفس الأمر ينطبق على الكلاسات الأخرى على سبيل المثال الكلاس سيكون .col-sm-1 بعرض 8.333333333333332٪ من عرض شاشة التابلت الكلاس .col-sm-2 سيكون بعرض 16.666666666666664٪ من عرض شاشة التابلت الكلاس .col-sm-3 سيكون بعرض 25٪ من عرض شاشة التابلت الكلاس .col- sm-12 سيكون بعرض 100٪ من عرض شاشة التابلت ملاحظة: يعتبر بوتستراب نظام متجاوب مع الموبايل أولاً (min-width)، لذا في حال قمت بالتصريح عن الصف .col-xs- فقط في تصميمك سيكون هذا الصف متاح لجميع الأجهزة وتطبيقه على عنصر لن يؤثر فقط على تصميمه على الهواتف الصغيرة الحجم ولكن أيضًا على الأجهزة الأكبر منها في الحجم كأجهزة التابلت والحواسيب المكتبية المتوسطة والكبيرة في حال عدم وجود الصفوف الأخرى. كذلك استخدام الصف .col-sm في عنصر ما لن يؤثر فقط على تصميمه على التابلت، ولكن سيؤثر أيضًا على تصميمه في الأجهزة الأكبر كالحواسيب المكتبية الصغيرة والكبيرة في حالة عدم وجود الصفوف .col-md- و .col-lg-. لذا عندما تقوم بتصميم تخطيط صفحات موقعك يمكنك تخصيص حجم الأعمدة الخاصة بك على الأجهزة الصغيرة جدًا، أو الصغيرة، أو المتوسطة، أو الكبيرة، أو الكبيرة جدًا كما تراه مناسبًا. ويفضل أن تصرح أولاً عن الكلاس الموافق لأجهزة المستخدمين الأكثر زيارة للموقع وبعد ذلك تصرح عن الكلاسات التي تجعل تصميمك متجاوب مع بقية الأجهزة. كي تخطط أي صفحة وفق تخطيط شبكي عليك أولاً إنشاء عنصر div يمثل حاوية container لوضع كل محتوى موقع الويب الخاص بك فيه. حيث يستخدم بوستراب الحاويات كأساس لنظامه الشبكي. ويمكنك استخدام الحاويات بالعدد الذي تريده لكن لا ينبغي أن تكون الحاويات متداخلة. يمكنك بعدها وضع الأعمدة داخل الأسطر، والأسطر داخل الحاويات، ويمكن أن تحتوي كل حاوية على سطر واحد أو أكثر ويجب أن تدرج سطر واحد على الأقل من الأعمدة في كل حاوية. فبعد إضافة الحاوية أضف أولاً أسطر لكل حاوية حيث أن الصف في بوتستراب هو ببساطة مجموعة من أعمدة بوتستراب الأفقية التي يمكن تقسيمها إلى 12 جزءًا. أخيرًا أضف الأعمدة وحدد تقسيمات هذا العمود. فالسطر هو الذي سيحتوي على عناصر col الخاصة بك ويجب أن يصل عدد الأعمدة الموجودة داخل الصف إلى 12.

قد يستغرق فهم صفوف بوتستراب ونظامها الشبكي بوتستراب بعض الوقت للتعلم والفهم لكن بمجرد فهمه بشكل جيد يمكنك إنشاء تخطيطات رائعة في وقت قصير. أنصحك بالاطلاع على توثيق بوتستراب من الموقع الرسمي للاطلاع على طريقة إضافة الميزات إلى موقع الويب الخاص بك، والحصول على مقتطفات التعليمات البرمجية الملائمة لما تريد. كيف يمكن الاستفادة من بوتستراب في ووردبريس؟ يتيح لك بوتستراب إنشاء مواقع ويب كاملة بشكل مستقل أو ضمن نظام آخر. لكن بإمكانك كذلك الاستفادة بوتستراب ضمن نظام ووردبريس في تطوير قوالب أو إضافات ووردبريس مخصصة كإضافات لإنشاء معارض صور أو غيرها من الإضافات التي تضيف مظهر جمالي احترافي لموقعك وتبدو رائعة على الأجهزة المحمولة. لكننا في هذا المقال سنركز على جانب تطوير قالب ووربردبريس من خلال إطار عمل بوتستراب فإذا كنت مطور قوالب ووردبريس يمكنك عندها إضافة دعم بوتستراب إلى قالب الووردبريس الخاص بك والاستفادة من ميزاته القوية. هناك العديد من قوالب ووردبريس المعتمدة على بوستراب في مستودع قوالب ابحث عن Bootstrap في صفحة القوالب الرسمية للوردبريس وستحصل على ما يقارب ألف نتيجة من القوالب المجانية المميزة المتجاوبة التي تعتمد في تصميمها على إطار عمل بوتستراب بمختلف إصداراته. قد يخطر ببالك السؤال التالي: ما فوائد تطوير قالبي باستخدام بوستراب ؟ إليك الجواب: تطوير قالب ووردبريس من خلال بوتستراب يجعل العناصر الموجودة في الموقع مستجيبة بسهولة مع كافة أحجام الشاشات إن تطوير قالب ووردبريس بالاستفادة من إطار بوتستراب يتيح لك الاستفادة من عناصر التصميم الجاهزة التي يوفرها لك كالأزرار والجداول والقوائم جاهزة التنسيق والمستندة إلى أكواد CSS و JavaScript في نظام ووربريس لتطويرقوالب ووردبريس جذابة بصريًأ وسريعة الاستجابة لموقعك. لكون بوتستراب مفتوح المصدر فهو يحوي مجتمع دعم كبير ومصادر كثيرة للتعلم كما يتم تحديثه باستمرار وإدارته بشكل صحيح من قبل فريق قوي وهذا يعني أنه نادرًا ما يتعطل أو يعاني من مشاكل خطيرة، ويمكنك استخدامه بأمان للحصول على تصاميم جذابة بصريًا. يتميز بوتسترب كذلك بكونه متكامل بشكل جيد مع HTML5 فبالإضافة إلى كونه يتضمن كلاسات خاصة للتصميم فهو يتضمن كللك تصاميم لمجموعة كاملة من عناصر HTML5 التي يمكنك استخدامها في قالبك فتصميم كل هذه الأشياء من البداية أمرًا متعب ويستغرق وقتًا لذا فهو يوفر عليك الكثير من العمل. إذًا البوستراب هو إطار عمل للتصميم، و الووردبريس هو نظام إدارة المحتوى (CMS) ورغم أنهما شيئان مختلفان تمامًا إلا أن كل منها يوفر الكثير من العناصر التقنية ويخفيها وراء واجهة سهلة الاستخدام وكل ما على مطور الموقع هو استخدامها بكل بساطة دون الاهتمام بكل التفاصيل المعقدة التي تم إنجاز هذه العناصر من خلالها. كي تتمكن من التعامل مع بوستراب لتطوير قالب ووردبريس تحتاج لأن تمتلك المهارات التالية: أساسيات HTML/CSS أساسيات في التعامل مع نظام ووردبريس أساسيات لغة البرمجة PHP البنية الأساسية لملفات القوالب في ووردبريس أساسيات تصميم القوالب في ووردبريس معرفة أساسية بالبرمجة بالمفهوم العام اقرأ أيضًا: تعرف على نظام برمجة ووردبريس ومكوناته الأساسية خطوات عملية لبناء قالب بوستراب في ووردبريس كي تتمكن من بناء قالب بوستراب خاص بالووردبريس يجب أن يكون لديك المعرفة اللازمة حول تصميم وإنشاء قوالب في ووردبريس مسبقًا فنحن هنا لن نشرح كيفية إنشاء قالب ووردبريس كامل الوظائف وسنركز بشكل أكبر في الشرح على توضيح كيفية استخدام بوتستراب في تصميم وتطوير هذا القالب. خطوة1-إنشاء مجلد القالب والملفات الأساسية له قالب ووردبريس كما نعرف له بنية ملفات محددة مسبقًا يمكنك الاطلاع على هذه الملفات ومهتمها في القالب من خلال المقال التالي. سنشرح في الفقرات التالية بالخطوات المفصلة كيفية إنشاء قالب بسيط أساسي لموقع ووردبريس يعتمد على إطار بوستراب بالشكل التالي. بداية سوف ننشئ مجلد باسم wpartheme لحفظ ملفات القالب الخاص بنا ضمن الدليل / wp-content / theme للموقع (يمكنك استخدام مدير الملفات في لوحة التحكم أو برنامج FTP للتعامل مع الملفات الموجودة على الخادم) هذا المجلد سيكون مجلد قالب بوتستراب الخاص بنا سننشئ ضمنه مجموعة من الملفات الفارغة الضرورية للقالب. بعض هذه الملفات اختياري وبعضها الآخر إجباري كي يتعرف ووردبريس على القالب. الأول الذي علينا إنشاؤه هو الملف style.css وهو ملف إجباري يحتوي على تنسيقات القالب. إضافة لذلك هذا الملف له أيضًا مهمة أخرى وهي توفير معلومات تصف القالب مثل اسم القالب والوصف واسم المؤلف وإصدار القالب وغيرها من التفاصيل الأخرى. الملف الثاني هو الملف index.php هو ملف إجباري يمثل تمبلت قالب ووردبريس الرئيسي الذي يعتمد عليه ووردبريس في عرض أي صفحة في حالة تعذر العثور على أي ملف تمبلت آخر أكثر تخصيصَا لعرض الصفحة. اقرأ المزيد حول التسلسل الهرمي لاستدعاء ملفات القوالب في ووردبريس هناك العديد من الملفات الاختيارية التي يمكنك إضافتها للقالب لتخصيصه بشكل أكبر لكل جزء من أجزاء الموقع، ولكن بالنسبة لقالبنا التوضيحي في مقال اليوم سنكتفي بإضافة ملفي الترويسة والتذييل فقط: ملف الترويسة header.php : يستخدم لتخطيط وتصميم ترويسة القالب والتي يتم عرضها عادة في كل صفحة من صفحات الموقع. يتضمن هذا الملف عادة معلومات مثل عنوان ووصف الموقع ويحدد ما هي ملفات التنسيق التي سنستخدمها في الموقع عادة وغيرها من المعلومات. ملف التذييل footer.php: هذا الملف مسؤول عن عرض المعلومات التي يتم إدراجها في آخر كل صفحة من صفحات الموقع. وهنا يفضل تضمين أكواد الجافا سكربت (Javascript) كي لا تتسبب في بطء تحميل الصفحة. ملف وظائف القالب functions.php في هذا الملف سنقوم بكتابة التعليمات البرمجية الضرورية لعمل القالب. سنضيف كذلك ملف صورة ونسميها screenshot.png لتكون الصورة الخاصة بالقالب التي ستظهر عند استعرض القالب في لوحة تحكم الموقع. خطوة2-إضافة بوتستراب إلى قالب ووردبريس إن نظام ووردبريس لا يدعم بوستراب بشكل افتراضي لذا كي تتمكن من استخدام بوستراب كأساس لقالب ووردبريس والاستفادة من نقاط القوة في كلا النظامين يمكنك اتباع أحد الأساليب التالية -مع العلم أنه لا توجد ميزة كبيرة لأحدهما على الآخر ويمكنك اعتماد الطريقة التي تفضلها- الأسلوب الأول -الرجوع إلى الملفات المصدرية للبوتستراب من شبكة توصيل المحتوى (CDN). في هذه الحالة لا نحتاج لتحميل ملفات بوستراب في مجلد القالب الخاص بنا ويكفي الإشارة لرابط cdn للملفات التي نتحاجها كما يلي: سنشير لملف css الخاص ببوتستراب من خلال إضافة الرابط التالي في ملف الترويسة header.php ضمن الوسم >head< وقبل أي استدعاء لأي ملف ستايل آخر: هذا الرابط يحتوي على مكتبة CSS ويتيح لك استخدام صفوف بوتستراب في صفحات الويب الخاصة بك. وسنشير لملف جافا سكريبت الخاص ببوتستراب في ملف التذييل footer.php قبل وسم الإغلاق الوسم >/body<
كما يمكنك بدلاً من تضمين أكواد تضمين بوتستراب في ملفات تمبلت القالب (في الترويسة والتذييل) إضافة كود الربط ضمن ملف وظائف القالب function.php من خلال دوال قائمة الانتظار wp_enqueue_script/wp_enqueue_style وهي عبارة عن دوال خاصة في ووردبريس تعرف باسم ( الخطافات hooks ) وهي مجرد طريقة أخرى لتضمين أكواد CSS وأكواد جافاسكريبت الخاصة بالبوتستراب _والأكواد الخاصة بك أيضًا_ في القالب bootstraptheme_enqueue_styles(){
wp_enqueue_style(‘bootstrap-cdn-css’, ‘https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css’);
wp_enqueue_script(‘bootstrap-cdn-js’, ‘https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js’, ‘jquery’, false, true);
wp_enqueue_style(‘my_style’, get_stylesheet_directory_uri().’/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘bootstraptheme_enqueue_styles’); ملاحظة:
لجعل بوتستراب 5 يدعم RTL من أجل المواقع باللغة العربية تحتاج لإضافة الإصدار الخاص باللغة العربية من بوتستراب كما يلي كما تحتاج لإضافة واصفة اللغة العربية “lang = “ar وواصفة الاتجاه في “dir = “rtl أكواد HTML

مرحبا بالعالم!