تم تقديم أداة تخصيص القوالب أو مخصص الثيم Theme customizer لأول مرة في إصدار ووردبريس 3.4، وهذه الأداة تتيح لك إجراء تغييرات مباشرة على قالبك، ومعاينة هذه التغييرات دون تعديل موقعك المباشر، وبمجرد أن تنتهي من إجراء التغييرات التي تريدها ما عليك سوى حفظ هذه التغييرات ليتم تطبيقها على موقعك فورًا.
تتم برمجة صفحة تخصيص القالب من خلال واجهة برمجة تطبيقات تخصيص الثيم Theme Customization API التي يوفرها نظام ووربريس للمطورين ليمكنهم من تخصيص القالب من خلال صفحة التخصيص سهلة لاستخدام والتي توجد على الرابط التالي
تسجيل الدخول لعرض الكود
والتي يمكن لأدمن الموقع الوصول لها من خلال لوحة التحكم للموقع> المظهر> تخصيص.
لابد أنك تعاملت مع هذه الصفحة من قبل كصاحب موقع ووردبريس بعد تركيب قالب جديد وتخصيصه وفق متطلبات موقعك مثل تغيير اللوغو، أو تعديل نظام الألوان في الموقع، أو تغيير التخطيطات، أو تعديل القوائم أو الودجات وما إلى ذلك..وكنت تقوم من هنا بمعاينة التغييرات التي تقوم بإجرائها قبل تطبيقها على الموقع بشكل نهائي.
لكن هل تساءلت كيف يمكنك كمطور برمجة صفحة التخصيص هذه وإضافة عناصر إضافية لتخصيص القالب من خلالها؟ في الواقه هذا ما يمكنك فعله من خلال واجهة برمجة تطبيقات تخصيص الثيم Theme Customizations API التي تسمح لك كمطور قوالب ووردبريس بتخصيص وإضافة عناصر التحكم التي تريدها إلى هذه الصفحة.
ملاحظة:
تكون معظم خيارات تخصيص القالب مرئية فقط لأدمن الموقع، لكن يمكنك تمكين المستخدمين من الرتب الأخرى من الوصول إلى خيارات تخصيص معينة، كما يمكنك أن تجعل أجزاء من أداة التخصيص مرتبطة بسياق المحتوى بمعنى أنها لا تعرض سوى خيارات التخصيص التابعة للعناصر التي يتم عرضها في الصفحة الحالية المعروضة ضمن قسم المعاينة.
كيف يمكنك برمجة أداة تخصيص القالب ( Theme customizer)؟
يعتبر أداة تخصيص الثيم أو صفحة تخصيص القالب Theme customizer واحدة من أهم الطرق المتبعة لتخصيص قالب ووردبريس، وقد تحتاج كمطور قوالب ووردبريس إلى استخدام واجهة برمجة التطبيقات الخاصة بالثيم لإضافة المزيد من الخيارات المنوعة لهذه الأداة الصفحة.
وهناك عدة مراحل عليك اتباعها كي تضيف خيارات لتخصيص قالبك ضمن صفحة تخصيص القالب:
- المرحلة الأولى: إضافة الأقسام والإعدادات والعناصر المناسبة لصفحة التخصيص.
- المرحلة الثانية: كتابة أكواد تنسيقات CSS.
- المرحلة الثالثة (اختيارية) تكوين المعاينة المباشرة من خلال كود جافاسكريبت.
دعونا نتناول أهم الأمور التي عليك القيام بها في كل كل مرحلة بمزيد من التفصيل:
المرحلة الأولى: إضافة الأقسام والإعدادات والعناصر المناسبة لصفحة التخصيص
تحتاج في هذه المرحلة لإنشاء ملف customizer.php وتضمينه في ملف وظائف القالب function.php كما يلي
تسجيل الدخول لعرض الكود
كما تحتاج لاستدعاء هذا الملف من خلال ربطه بالخطاف المناسب وهو الخطاف customize_register الذي يتيح لك إضافة أي كائن تخصيص Customizer أو إزالته أو تعديله ويمكتك من تحديد اللوحات الجديدة والأقسام والإعدادات وعناصر واجهة المستخدم التي تريد عرضها في أداة التخصيص (سنشرح معنى كل من هذه المصطحاات بعد قليل)
اقرأ المزيد: شرح الخطافات في ووردبريس WordPress Hooks وأهميتها لمطوري القوالب والإضافات
يتم استخدم الخطاف custom_register بالشكل التالي
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
يجب كذلك أن تكون على دراية بطريقة التعامل مع البرمجة كائنية التوجه OOP لاستخدام واجهة برمجة تطبيقات تخصيص القالب، حيث تتواجد أربعة أنواع رئيسية من الأغراض أو الكائنات البرمجية التي تحتاج للتعامل معها في أداة التخصيص وهي:
- اللوحات Panels هي حاويات للأقسام
- الأقسام Sections هي حاويات لعناصر واجهة المستخدم بغرض تنظيمها
- الإعدادات Settings هي التي تربط عناصر واجهة المستخدم بالإعدادات المحفوظة في قاعدة البيانات
- عناصر واجهة المستخدم أو عناصر التحكم Controls
- تتم إدارة جميع هذه الأغراض بواسطة كائن من الصف البرمجي WP_Customize_Manage الذي يمكن اعتباره كمصنع لتخصيص عناصر التحكم والإعدادات الخاصة بالقالب ويتحكم في معظم واجهة برمجة تطبيقات، ويتم عادة إنشاء غرض من هذا الصف $ wp_customize من أجل استخدامه في الكود البرمجي.
ما هي طريقة إضافة (أقسام و إعدادات وعناصر تحكم) لأداة تخصيص القالب؟
يمكنك القيام بذلك من خلال خطاف الإجراء customize_register الذي ذكرناه مسبقًا والذي يقوم بتحميل الغرض $wp_customize كما يلي
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
كما تلاحظ من الكود السابق نمرر غرض أو كائن $ wp_customize إلى دالة رد النداء، حيث يتم تنفيذ جميع التخصيصات التي نقوم بها على صفحة تخصيص القالب من خلال الطرق البرمجية التي يملكها هذا الغرض.
بعد ذلك ، تحتاج إلى تحديد الإعدادات والأقسام وعناصر التحكم الخاصة بقالبك.
كيف يمكن إضافة إعداد جديد Setting لصفحة تخصيص القالب؟
هناك نوعان أساسيان من الإعدادات هما الخيارات options وهي نادرة الاستخدام وهذه الخيارات تخزن مباشرة في جدول wp_options لقاعدة بيانات ووردبريس، ويتم تطبيقها على الموقع بغض النظر عن القالب المفعل في الموقع.
والنوع الثاني هو theme modifications أو اختصارًا theme_mods وهذه تكون خاصة بقالب محدد وهي الأكثر استخدامًا وتستخدم الإعدادات من هذا النوع بشكل افتراضي في ووردبريس للحصول على إعدادات القالب وضبطها ويتم استخدام الدالة get_theme_mod () لاسترداد قيمة الإعداد وهذه الدالة تأخذ وسيطين هما معرف الإعداد والقيمة الافتراضية..
لإضافة إعداد جديد إلى أداة تخصيص القالب تحتاج إلى استدعاء الدالة add_setting الخاصة بالغرض $wp_customize
على سبيل المثال لإضافة إعداد لتغيير لون نص العنوان نكتب:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
البرامتر transport اختياري هنا ويتم تعيينه افتراضيًا على القيمة 'refresh' كي يتم تحديث نافذة معاينة أداة تخصيص السمات عن طريق إعادة تحميل نفسها عند تغيير الإعداد.
إذا كنت لا تريد تحديث الصفحة عند تغيير الإعداد فيمكنك تعيين هذا البرامتر بالقيمة 'postMessage' بدلاً من ذلك لكنك في هذه الحالة تحتاج للتعامل مع أي تحديثات في التنسيقات بشكل يدوي باستخدام أكواد جافا سكريبت.
كيف يمكن إضافة قسم جديد Section لصفحة تخصيص القالب؟
تستخدم الأقسام في صفحة تخصيص القالب من أجل تجميع كل مجموعة من الخيارات مع بعضها البعض، أنت حر في إضافة العناصر الجديدة إلى الأقسام الافتراضية المضمنة في ووردبريس أو إضافة قسم جديد لعناصرك ضمن في صفحة تخصيص القالب وهي بشكل افتراضي تضم ما يلي.
قسم هوية الموقع title_tagline
قسم الألوان colors
قسم صورة الترويسة header_image
قسم صورة الخلفية background_image
قسم القوائم nav
قسم إعدادات الصفحة الرئيسية static_front_page
قسم تنسيقات (CSS) إضافية
تضيف قوالب ووردبريس الاحترافية المتقدمة لوحات إعداد إضافية على هذه اللوحات لتوفير خيارات تخصيص إضافية ضمنها وجعله أسهل في التخصيص.
و يمكنك إضافة قسم جديد لصفحة تخصيص القالب من خلال الدالة add_section الخاصة بالغرض wp_customize على سبيل المثال لإضافة قسم باسم New Section Name نكتب الكود التالي:
تسجيل الدخول لعرض الكود
كيف يمكن إضافة عنصر واجهة جديد Control لصفحة تخصيص القالب؟
عنصر التحكم هو العنصر أو الغرض الأساسي لنافذه تخصيص القالب، وعنصر التحكم هو عبارة عن عنصر نموذج HTML يتم عرضه في صفحة تخصيص القالب ويسمح لأدمن الموقع بتغيير أحد الإعدادات ومعاينة هذه التغييرات في الوقت الفعلي.
يرتبط كل عنصر تحكم في صفحة تخصيص القالب بإعداد واحد وقسم واحد. الإعداد يعرض في قسم المعاينة المباشرة كما يتم حفظ البيانات التي أدخلها المستخدم في عنصر التحكم في قاعدة بيانات الموقع.
تتم إضافة عناصر التحكم إلى أداة تخصيص القالب بواسطة الدالة add_control التابعة للغرض$ wp_customize.
تحتاج هذه الدالة عدة برامترات وأهم برامتر هو نوع عنصر التحكم type الذي يحدد نوع عنصر الواجهة الذي سيتم عرضه في صفحة تخصيص القالب ويوفر ووردبريس العديد من عناصر التحكم المضمنة مثل:
- date
- input
- checkbox
- textarea
- radio
- select
- dropdown-pages
ولمزيد من الملعومات حول عناصر التحكم وخياراتها يمكن الاطلاع على الرابط التالي.
على سبيل المثال لإضافة عنصر تحكم من نوع تاريخ date نكتب الكود التالي:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
المرحلة الثانية: برمجة أكواد تنسيقات CSS
بعد أن أضفت العناصر والإعدادت والأقسام المطلوبة للمخصص عليك جلب الإعدادات من العناصر، وإخراج أي CSS ضروري لتطبيق هذه الإعدادات في القالب.
ستحتاج في هذه المرحلة إلى استخدام خطاف الإجراء wp_head الذي يمكنك من إخراج كود CSS تم إنشاؤه من أجل عرض تغييراتك بشكل صحيح على موقع الويب المباشر.
ففي حال حددت إعداداتك ضمن خطاف الإجراء custom_register يمكنك الحصول على قيمة هذه الإعدادات بسهولة من خلال إخراج تنسيقات CSS الموافقة باستخدام wp_head وجلب القيم باستخدام الدالة get_theme_mod ()
على سبيل المثال ، لنفترض أن لديك إعداد للون العنوان h1 يسمى header_color مهيأ بالشكل التالي:
تسجيل الدخول لعرض الكود
سيكون كودالتنسيق اللازم لإخراج هذا الإعداد بالشكل التالي:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
عندما تعرض مصدر الصفحة سترى أنه تمت إضافة الأكواد التالية في الصفحة:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
ستلاحظ أن القيمة الافتراضية # 000000 معطاة لإعدا اللون. وبمجرد تغيير هذه القيمة عبر أداة التخصيص سوف تظهر القيمة الجديدة التي اخترتها.
على سبيل المثال لنفترض أنك تريد تغيير لون هذا العنوان إلى الأزرق في أداة التخصيص تقوم بإدراج القيمة السداسية العشرية للون الأزرق ثم تنقر فوق حفظ عندها اعرض الصفحة من جديد وسيظهر لك الكود بالشكل التالي.
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
المرحلة الثالثة (اختيارية) تكوين المعاينة المباشرة من خلال كود جافاسكريبت.
في حال لم تقم بهذه المرحلة يمكنك معانية التغييرات التي تقوم بها في مخصص القالب عن طريق إعادة تحميل نافذة المعاينة بالكامل. أو يمكنك بدلاً من ذلك اجراء هذه الخطوة الاختيارية لتحسين تجربة المستخدم وإنشاء معالج جافاسكربت مخصص لجعل أداة تخصيص القالب أسرع وأكثر تفاعلية.
في هذه المرحلة ستحتاج لاستخدام الخطاف custom_preview_init لإدراج أكواد جافاسكربت مخصصة في قائمة في صفحة أداة التخصيص.
لإمجاز هذه المرحلة عليك القيام بالخطوات التالية:
- تأكد من تحديث جميع الإعدادات الخاصة بالقالب settings وتهيئة البرامتر transport الخاص بها بالشكل التالي: 'transport'=>'postMessage'
بدلاً من القيمة الافتراضية 'transport'=>'refresh' هذا يتسبب في تعطيل سلوك التحديث التلقائي ويمكنك من تحديد أي معالجة مخصصة لجافا سكريبت تريدها.
- قم بإنشاء ملف جافا سكريبت باسم theme-custom.js وضعه في مجلد js ضمن مجلد القالب للتعامل مع التغييرات المباشرة على القالب ويمكنك تسميته كما تريد أو وضعه في المكان الذي تريده.
يتضمن هذا الكود جميع عمليات المعالجة المخصصة الخاصة بك.
الكود ضمن هذا الملف يقوم بالحصول على الإعدادات من عناصر التحكم الموجودة في أداة التخصيص ويقوم بإجراء أي تغييرات ضرورية في الوقت الفعلي على الصفحة باستخدام كود jQuery بالشكل التالي:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
قم بتضمين ملف جافا سكريبت في قائمة الانتظار في القالب Enqueue ولكي يتم تحميل هذا الملف في صفحة مخصص القالب للأدمن وليس عند عرض موقع الويب المباشر الخاص بك عليك هنا استخدام الخطاف custom_preview_init بالشكل التالي:
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
تسجيل الدخول لعرض الكود
الخلاصة:
تعرفنا في هذا الموضوع على المفاهيم التقنية الأساسية التي تمكنك من فهم آلية عمل أداة تخصيص القوالب وطريقة برمجتها وإنشاء عناصر تحكم بداخلها كي تتمكن من تخصيص القوالب الخاصة بك بشكل احترافي من خلال صفحة التخصيص الخاصة بالقالب.
وفي مشاركات قادمة إن شاء الله سوف أوضح بأمثلة عملية طريقة برمجة أداة تخصيص قالب متكامل لتوضيح كافة هذه الخطوات والمراحل.
