منتديات رحيل لكل العرب - عرض مشاركة واحدة - مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores

مهرة النجدية · 24-02-2019, 10:59 PM

مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores

مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores

الانتشار الكبير في استخدام لغات تصميم الويب أدى إلى ظهور بعض إطارات العمل (Frameworks) الجاهزة التي تسهل وتسرع عملية تطوير الواجهات كذلك فإن الانتشار الواسع لووردبريس والطلب الكبير لقوالبه دفع بعض المطورين والشركات إلى تطوير العديد من الأدوات الجاهزة التي تسهل بصورة أو أخرى عملية تطوير قوالب ووردبريس، إحدى هذه الأدوات الجيدة جدا هي قالب underscores _s والذي يتمتع بمجموعة من المميزات (كما سنرى) تجعله من أفضل الأدوات المعينة لمطور قوالب ووردبريس. وفي هذا المقال سنتعرف على بعض مميزات قالب _s وطريقة استخدامه والاستفادة منه، لكن دعنا في الأول نلقي نظرة سريعة على بعض الأدوات المتاحة لمطوري قوالب ووردبريس (من قبل شركات أو مطورين أخرين) وأنواعها وفي أي الأنواع يمكن تصنيف قالب underscores _s.

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

التعريف المبسط لإطار العمل Framework في مجال تطوير الويب
هو عبارة عن مجموعة من الأدوات الجاهزة (عادة شيفرات برمجية) تؤدي بعض المهام الشائعة وتغنيك هذه الإطارات من كتابة هذه الشيفرات بنفسك. بالطبع فإن التعريف يمكن أن يكون أعم من ذلك لكن هذا ما نحتاجه في هذا المقال.

إطارات عمل قوالب ووردبريس Themes Framework
يطلق هذا المصطلح عادة على أربعة معاني في مجتمع ووردبريس (موقع ووردبريس الرسمي ذكر ثلاثة ودعني أضيف لها رقم 2 في قائمتنا هذه).

القالب الأب Parents Themes (البعض يطلق عليها Themes Framework) هذا النوع من الأدوات عبارة عن قالب جاهز يمكنك الاستفادة منه من خلال صنع قالبك كقالب ابن Child Theme له وذلك بالاستفادة من هذه الميزة (القالب الابن) التي يوفرها ووردبريس. عادة عند إطلاق كلمة إطار عمل قوالب Themes Framework فإن المقصود هو هذا النوع من القوالب، ومن أشهر هذه القوالب هو إطار العمل Genesis ومن الإطارات ذات التطوير العربي هنالك إطار العمل ممتاز وليس المقام هنا لسرد القوالب المتوفرة تحت هذا النوع من الأدوات.
إطارات عمل لوحة تحكم القوالب Theme Options Framework هذا النوع من الأدوات كما يظهر من أسمه يستخدم لتسهيل مهمة إنشاء لوحة تحكم للقالب فهو يسهل عملية إضافة واسترجاع خيارات القالب وعادة ما يوفر مجموعة من الحقول المتقدمة التي تتطلب برمجتها بدونه بعض الوقت والجهد. البعض أيضا يطلق كلمة إطار عمل (هكذا بإطلاقها) على هذا النوع من الأدوات، ومن أشهر هذه الإطارات إطار عمل Redux.
المكتبات المساعدة Dropin Libarary هذه مجموعة من الملفات التي تقوم بتضمينها في قالبك للاستفادة من الدوال والأصناف الموجودة فيها وبالرغم من أن كثير من إطارات عمل لوحة التحكم يمكنها العمل بنفس الطريقة (تضمين ملفاتها في قالبك) لكن هذه المكتبات توفر عادة أكثر من مجرد تسهيل لعمل لوحة التحكم بل تتيح لك المزيد من التسهيلات فيما يتعلق بتطوير القالب ككل. من هذه المكتبات إطار العمل Hyprid.
القالب الابتدائي Starter Theme عبارة عن قالب جاهز بنسبة كبيرة تقوم بتطوير قالبك بالتعديل عليه مباشرة لا عن طريق استخدام قالب ابن كما في الرقم 1 من هذه القائمة، ويوفر هذا القالب عادة التركيبة الأساسية لملفات قوالب ووردبريس وبعض الدوال والإعدادات الأساسية للقالب بحيث يجعل المصمم يركز على التصميم (CSS) أو تحويل التصميم الجاهز. قالب underscores والذي نحن بصدد التعرف عليه يقع تحت هذا النوع من إطارات العمل وتستطيع استخدامه في تطوير قالبك من الخلال التعديل المباشر عليه كما سنرى لاحقا إن شاء الله.
مميزات قالب Underscores
هنالك عدة مميزات تجعل من الجيد إختيار هذا القالب كنقطة بداية لتطوير قالبك، ومن هذه المميزات:

القالب مفتوح المصدر ومطور من قبل مجموعة من المبرمجين المحترفين وعلى رأس التطوير شركة Automatic الراعية لووردبريس، وهذا يضمن لك توافقية عالية بين ووردبريس وقالب underscores وكذلك احترافية في تطويره.
القالب يعتمد على HTML5 كما أنه موثق بصورة جيدة ويحتوي على نسبة مناسبة من الشيفرات (بالتالي لن تفقد الكثير من الأساسيات الموجودة في أي قالب كما أنك لن تضطر لمسح الكثير من الشيفرات).
يحتوي على مثال لتطبيق خاصية الترويسة المخصصة Custom header التي يوفرها ووردبريس.
مجموعة مخصصة من وسوم القالب Template Tags (يشير هذا المصطلح الى مجموعة من الدوال تستخدم في جلب بيانات المقال) يمكنك استخدامها لتجنب تكرار الشيفرات البرمجية.
مجموعة من تنسيقات CSS الأساسية تحتوي على توضيح لبعض فئات العناصر CSS Classes التي يولدها ووردبريس.
يتبع الCoding standard الخاصة بووردبريس وموثق بصورة ممتازة، حيث يمكنك أن تتعلم الكثير منه.
مجموعة من الدوال والإعدادات الأساسية في ملف functions.php.
يشجع على استخدام مخصص القوالب Theme Customizer وهذا أمر مهم جدا خصوصا وأنه قبل أيام قليلة من نشر هذا المقال أصبح إستخدام مخصص القوالب لإعدادات القالب أمر إجباري لكل القوالب في مستودع القوالب الخاص بووردبريس وهذا قد يشير إلى توجه في مجتمع ووردبريس نحو المخصص ومحاولة جعلها Standerd في مسألة خيارات القالب، ولذلك في نهاية هذه السلسلة سنلقي نظرة إلى طريقة إستخدام مخصص القوالب في خيارات القالب.
طريقة استخدام Underscores
في البداية عليك التوجه لموقع القالب وقم بكتابة اسم القالب الذي تود تطويره في الخانة المخصصة ويمكنك الضغط على Advanced Options لإدخال المزيد من الخيارات مثل اسم المطور ورابط موقعه ووصف القالب، وسيقوم الموقع باستخدام هذه المعلومات ويولد لك القالب والذي سيبدأ التحميل مباشرة فور الضغط على Generate. طبعا ستجد أن المعلومات التي قمت بكتابتها تم استخدامها في الترويسة الأساسية للقالب والموجودة في ملف style.css وكذلك في اسم مجلد القالب. بعد ذلك يمكنك تنصيب القالب على الموقع الذي قمت بإعداده لتطوير القالب ومن الجيد أن تقوم بفتح مجلد القالب على محرر الشيفرات المفضل بالنسبة لك حتى تتابع معنا شرح بعض خصائص القالب.

التركيبة الأساسية للقالب (المجلدات والملفات)
ستلاحظ أن مجلد القالب يحتوي على الملفات الأساسية لقوالب ووردبريس وهي:

Style.css, index.php, functions.php, single.php, page.php, archive.php, search.php, 404.php, header.php, footer.php, sidebar.php, comments.php, rtl.css
بالإضافة الى مجموعة من الملفات التي يبدأ اسمها بـ content وهي:

Content.php, content-single.php, content-page.php, content-search.php, content-none.php
وهذه الملفات تستخدم لوضع محتويات الحلقة The Loop لبعض ملفات القالب الأساسية التي تحتوي على حلقة لجلب المقالات مثل ملف single.php مثلا، حيث يتم تضمين ملف conent المناسب (مثلا content-single.php) في ملف القالب المناسب (single.php) من خلال إستخدام الدالة get_template_part وتستخدم بهذه الطريقة:

<?php get_template_part( 'content', 'single' ); ?>
حيث أن المعامل الأول للدالة هو بداية اسم الملف والمعامل الثاني هو نهايته (ما بعد الفاصلة) وهذا يوضح لك سبب تسمية الملفات التي تبدئ بـ content بهذه الطريقة. واستخدام هذه الدالة من الأمور الجيدة في هذا القالب لما تتميز به من مميزات وحتى تحافظ على مقروئية جيدة للشيفرة البرمجية فبدلا من وضع كل الشيفرات في ملف single.php او index.php يتم فصل محتويات الحلقة -والتي عادة ما تحتوي على الكثير من شيفرات html- في ملف لوحدها ثم تضمينها. وأيضا يمكنك استخدامها مع الدالة get_post_format لتضمين الملفات اعتمادا على بنية المقال. من الملفات أيضا في المجلد الرئيسي للقالب ملف README.md وصورة screenshot.png ولا أظن أنهما يحتاجان إلى شرح.

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

require get_template_directory() . '/inc/template-tags.php';
حيث أن الدالة ()get_template_directory ترجع مسار القالب الحالي ومن الجيد استخدام دوال ووردبريس التي يوفرها فيما يتعلق بمسارات القالب، وهذه أحد الأشياء التي عليك تعلمها من قالب underscores بالإضافة الى العديد من الممارسات الجديدة Best Practice الأخرى كما سنرى. تضمين هذه الملفات في ملف functions.php بدلا عن كتابة كل الشيفرات الوظائفية الخاصة بالقالب في ملف functions.php يجعل القالب أكثر تنظيما ويسهل التعديل عليه فيما بعد بالإضافة لفصل الدوال والشيفرات على حسب وظائفها. لاحقا سنتطرق الى تفاصيل بعض هذه الملفات بعد أن نلقي نظرة سريعة على ملف functions.php، لكن الأن دعنا نكمل الاطلاع على تركيبة القالب.

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

بقية المجلدات
كما تلاحظ هنالك أيضا مجلد language الذي به ملفات اللغة، وملف layout وهو يحتوي على ملفي CSS يستخدمان لتوفير خيارين في تخطيط الموقع، وملف sass وبه بعض الملفات المفيدة في حالة كنت تستخدم SASS.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

24-02-2019, 10:59 PM	#1
مهرة النجدية تاريخ التسجيل: Feb 2019 الدولة: قلب ابي العمر: 31 المشاركات: 1,006 التقييم: 10	مهرة النجدية تاريخ التسجيل: Feb 2019 الدولة: قلب ابي العمر: 31 المشاركات: 1,006 التقييم: 10 مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores الانتشار الكبير في استخدام لغات تصميم الويب أدى إلى ظهور بعض إطارات العمل (Frameworks) الجاهزة التي تسهل وتسرع عملية تطوير الواجهات كذلك فإن الانتشار الواسع لووردبريس والطلب الكبير لقوالبه دفع بعض المطورين والشركات إلى تطوير العديد من الأدوات الجاهزة التي تسهل بصورة أو أخرى عملية تطوير قوالب ووردبريس، إحدى هذه الأدوات الجيدة جدا هي قالب underscores _s والذي يتمتع بمجموعة من المميزات (كما سنرى) تجعله من أفضل الأدوات المعينة لمطور قوالب ووردبريس. وفي هذا المقال سنتعرف على بعض مميزات قالب _s وطريقة استخدامه والاستفادة منه، لكن دعنا في الأول نلقي نظرة سريعة على بعض الأدوات المتاحة لمطوري قوالب ووردبريس (من قبل شركات أو مطورين أخرين) وأنواعها وفي أي الأنواع يمكن تصنيف قالب underscores _s. أطر عمل قوالب ووردبريس WordPress Theme Frameworks أتذكر أنه عند بداية دراستي لتطوير قوالب ووردبريس شكل هذا المصطلح بعض الصعوبة بالنسبة لي ليس لأنه يحتوي على كلمة إطار عمل (Framework) فقط بل لأنه في مجتمع ووردبريس يطلق هذا المصطلح على عدة معاني حيث يختلف المعنى الذي يستخدم لأجله من بعض المطورين، لذا دعنا نحاول تجنيبك الوقوع في مثل هذا الإشكال بتعريف مبسط لكلمة إطار عمل وكذلك الإشارة الى بعض المعاني التي تستخدم لها هذه الكلمة في مجتمع ووردبريس. التعريف المبسط لإطار العمل Framework في مجال تطوير الويب هو عبارة عن مجموعة من الأدوات الجاهزة (عادة شيفرات برمجية) تؤدي بعض المهام الشائعة وتغنيك هذه الإطارات من كتابة هذه الشيفرات بنفسك. بالطبع فإن التعريف يمكن أن يكون أعم من ذلك لكن هذا ما نحتاجه في هذا المقال. إطارات عمل قوالب ووردبريس Themes Framework يطلق هذا المصطلح عادة على أربعة معاني في مجتمع ووردبريس (موقع ووردبريس الرسمي ذكر ثلاثة ودعني أضيف لها رقم 2 في قائمتنا هذه). القالب الأب Parents Themes (البعض يطلق عليها Themes Framework) هذا النوع من الأدوات عبارة عن قالب جاهز يمكنك الاستفادة منه من خلال صنع قالبك كقالب ابن Child Theme له وذلك بالاستفادة من هذه الميزة (القالب الابن) التي يوفرها ووردبريس. عادة عند إطلاق كلمة إطار عمل قوالب Themes Framework فإن المقصود هو هذا النوع من القوالب، ومن أشهر هذه القوالب هو إطار العمل Genesis ومن الإطارات ذات التطوير العربي هنالك إطار العمل ممتاز وليس المقام هنا لسرد القوالب المتوفرة تحت هذا النوع من الأدوات. إطارات عمل لوحة تحكم القوالب Theme Options Framework هذا النوع من الأدوات كما يظهر من أسمه يستخدم لتسهيل مهمة إنشاء لوحة تحكم للقالب فهو يسهل عملية إضافة واسترجاع خيارات القالب وعادة ما يوفر مجموعة من الحقول المتقدمة التي تتطلب برمجتها بدونه بعض الوقت والجهد. البعض أيضا يطلق كلمة إطار عمل (هكذا بإطلاقها) على هذا النوع من الأدوات، ومن أشهر هذه الإطارات إطار عمل Redux. المكتبات المساعدة Dropin Libarary هذه مجموعة من الملفات التي تقوم بتضمينها في قالبك للاستفادة من الدوال والأصناف الموجودة فيها وبالرغم من أن كثير من إطارات عمل لوحة التحكم يمكنها العمل بنفس الطريقة (تضمين ملفاتها في قالبك) لكن هذه المكتبات توفر عادة أكثر من مجرد تسهيل لعمل لوحة التحكم بل تتيح لك المزيد من التسهيلات فيما يتعلق بتطوير القالب ككل. من هذه المكتبات إطار العمل Hyprid. القالب الابتدائي Starter Theme عبارة عن قالب جاهز بنسبة كبيرة تقوم بتطوير قالبك بالتعديل عليه مباشرة لا عن طريق استخدام قالب ابن كما في الرقم 1 من هذه القائمة، ويوفر هذا القالب عادة التركيبة الأساسية لملفات قوالب ووردبريس وبعض الدوال والإعدادات الأساسية للقالب بحيث يجعل المصمم يركز على التصميم (CSS) أو تحويل التصميم الجاهز. قالب underscores والذي نحن بصدد التعرف عليه يقع تحت هذا النوع من إطارات العمل وتستطيع استخدامه في تطوير قالبك من الخلال التعديل المباشر عليه كما سنرى لاحقا إن شاء الله. مميزات قالب Underscores هنالك عدة مميزات تجعل من الجيد إختيار هذا القالب كنقطة بداية لتطوير قالبك، ومن هذه المميزات: القالب مفتوح المصدر ومطور من قبل مجموعة من المبرمجين المحترفين وعلى رأس التطوير شركة Automatic الراعية لووردبريس، وهذا يضمن لك توافقية عالية بين ووردبريس وقالب underscores وكذلك احترافية في تطويره. القالب يعتمد على HTML5 كما أنه موثق بصورة جيدة ويحتوي على نسبة مناسبة من الشيفرات (بالتالي لن تفقد الكثير من الأساسيات الموجودة في أي قالب كما أنك لن تضطر لمسح الكثير من الشيفرات). يحتوي على مثال لتطبيق خاصية الترويسة المخصصة Custom header التي يوفرها ووردبريس. مجموعة مخصصة من وسوم القالب Template Tags (يشير هذا المصطلح الى مجموعة من الدوال تستخدم في جلب بيانات المقال) يمكنك استخدامها لتجنب تكرار الشيفرات البرمجية. مجموعة من تنسيقات CSS الأساسية تحتوي على توضيح لبعض فئات العناصر CSS Classes التي يولدها ووردبريس. يتبع الCoding standard الخاصة بووردبريس وموثق بصورة ممتازة، حيث يمكنك أن تتعلم الكثير منه. مجموعة من الدوال والإعدادات الأساسية في ملف functions.php. يشجع على استخدام مخصص القوالب Theme Customizer وهذا أمر مهم جدا خصوصا وأنه قبل أيام قليلة من نشر هذا المقال أصبح إستخدام مخصص القوالب لإعدادات القالب أمر إجباري لكل القوالب في مستودع القوالب الخاص بووردبريس وهذا قد يشير إلى توجه في مجتمع ووردبريس نحو المخصص ومحاولة جعلها Standerd في مسألة خيارات القالب، ولذلك في نهاية هذه السلسلة سنلقي نظرة إلى طريقة إستخدام مخصص القوالب في خيارات القالب. طريقة استخدام Underscores في البداية عليك التوجه لموقع القالب وقم بكتابة اسم القالب الذي تود تطويره في الخانة المخصصة ويمكنك الضغط على Advanced Options لإدخال المزيد من الخيارات مثل اسم المطور ورابط موقعه ووصف القالب، وسيقوم الموقع باستخدام هذه المعلومات ويولد لك القالب والذي سيبدأ التحميل مباشرة فور الضغط على Generate. طبعا ستجد أن المعلومات التي قمت بكتابتها تم استخدامها في الترويسة الأساسية للقالب والموجودة في ملف style.css وكذلك في اسم مجلد القالب. بعد ذلك يمكنك تنصيب القالب على الموقع الذي قمت بإعداده لتطوير القالب ومن الجيد أن تقوم بفتح مجلد القالب على محرر الشيفرات المفضل بالنسبة لك حتى تتابع معنا شرح بعض خصائص القالب. التركيبة الأساسية للقالب (المجلدات والملفات) ستلاحظ أن مجلد القالب يحتوي على الملفات الأساسية لقوالب ووردبريس وهي: Style.css, index.php, functions.php, single.php, page.php, archive.php, search.php, 404.php, header.php, footer.php, sidebar.php, comments.php, rtl.css بالإضافة الى مجموعة من الملفات التي يبدأ اسمها بـ content وهي: Content.php, content-single.php, content-page.php, content-search.php, content-none.php وهذه الملفات تستخدم لوضع محتويات الحلقة The Loop لبعض ملفات القالب الأساسية التي تحتوي على حلقة لجلب المقالات مثل ملف single.php مثلا، حيث يتم تضمين ملف conent المناسب (مثلا content-single.php) في ملف القالب المناسب (single.php) من خلال إستخدام الدالة get_template_part وتستخدم بهذه الطريقة: <?php get_template_part( 'content', 'single' ); ?> حيث أن المعامل الأول للدالة هو بداية اسم الملف والمعامل الثاني هو نهايته (ما بعد الفاصلة) وهذا يوضح لك سبب تسمية الملفات التي تبدئ بـ content بهذه الطريقة. واستخدام هذه الدالة من الأمور الجيدة في هذا القالب لما تتميز به من مميزات وحتى تحافظ على مقروئية جيدة للشيفرة البرمجية فبدلا من وضع كل الشيفرات في ملف single.php او index.php يتم فصل محتويات الحلقة -والتي عادة ما تحتوي على الكثير من شيفرات html- في ملف لوحدها ثم تضمينها. وأيضا يمكنك استخدامها مع الدالة get_post_format لتضمين الملفات اعتمادا على بنية المقال. من الملفات أيضا في المجلد الرئيسي للقالب ملف README.md وصورة screenshot.png ولا أظن أنهما يحتاجان إلى شرح. مجلد inc هذا أو المجلدات التي سنتحدث عنها ، حيث يحتوي على خمسة ملفات الجامع بينها أنه يتم تضمينها داخل ملف function.php كما ترى في نهاية هذا الملف من خلال استخدام الدالة بهذه الطريقة: require get_template_directory() . '/inc/template-tags.php'; حيث أن الدالة ()get_template_directory ترجع مسار القالب الحالي ومن الجيد استخدام دوال ووردبريس التي يوفرها فيما يتعلق بمسارات القالب، وهذه أحد الأشياء التي عليك تعلمها من قالب underscores بالإضافة الى العديد من الممارسات الجديدة Best Practice الأخرى كما سنرى. تضمين هذه الملفات في ملف functions.php بدلا عن كتابة كل الشيفرات الوظائفية الخاصة بالقالب في ملف functions.php يجعل القالب أكثر تنظيما ويسهل التعديل عليه فيما بعد بالإضافة لفصل الدوال والشيفرات على حسب وظائفها. لاحقا سنتطرق الى تفاصيل بعض هذه الملفات بعد أن نلقي نظرة سريعة على ملف functions.php، لكن الأن دعنا نكمل الاطلاع على تركيبة القالب. مجلد js واضح من اسمه أنه يحتوي على ملفات الجافا سكربت الخاصة بالقالب، وبه ثلاث ملفات سنطلع على وظائفها فيما الدرس القادم إن شاء الله. وبالطبع يمكنك إضافة ملفات جافا سكربت الخاصة بك في هذا المجلد. لاحظ أنك فيما بعد قد تحتاج لإضافة مجلد لملفات CSS واخر للصور وفي هذه الحالة ربما تفضل وضع هذين المجلدين مع مجلد js في مجلد جديد باسم assest أو static مثلا. بقية المجلدات كما تلاحظ هنالك أيضا مجلد language الذي به ملفات اللغة، وملف layout وهو يحتوي على ملفي CSS يستخدمان لتوفير خيارين في تخطيط الموقع، وملف sass وبه بعض الملفات المفيدة في حالة كنت تستخدم SASS. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس