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

من السهل القيام بإنشاء خيارات سمة WordPress باستخدام واجهة برمجة تطبيقات تخصيص السمة. يوضح لك هذا المقال كيف يتم ذلك.

تم إصدار WordPress Theme Customization API مع WordPress 3.4 ، مرة أخرى في عام 2012. وقد وعدت المطورين بطريقة موحدة لإضافة سمات خيارات غنية ، والمستخدمين طريقة لتغيير موقع الويب الخاص بهم بطريقة جيدة وسهلة الاستخدام.

بالنسبة للمستخدمين ، يتيح لك أداة تخصيص السمات الأمامية تغيير مظهر موقعك بسرعة ، وحتى الحصول على معاينة مباشرة.

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

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

هذا ما سنقوم بتغطيته اليوم:

• بناء مؤسستنا
• مكونات إعداد السمة
• استخدام قيم الإعداد
• المعاينات الحية
• تغليف في الفصل
• مزيد من الخيارات

بناء مؤسستنا

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

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

لنبدأ بإنشاء وظيفة في ملف functions.php الخاص بالقالب ، والذي سيسمح لنا بتضمين إضافاتنا في أداة التخصيص. هذه الوظيفة تحتاج إلى ربطها customize_register.

مكونات إعداد السمة

كما هو مذكور في المثال ، يتكون كل عنصر تضيفه إلى أداة التخصيص من ثلاثة أجزاء:

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

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

ومع ذلك ، يحتاج مخصص السمة إلى معرفة كيفية التعامل مع هذا الإعداد. يمكنك إنشاء حقل نصي له حيث يقوم المستخدم بإدخال ألوان جديدة يدويًا كـ "# ff9900" ولكن يمكنك أيضًا تحديد عنصر تحكم في اللون ، والذي من شأنه إخراج محدد اللون. على مستوى قاعدة البيانات ، سيظل كل شيء يتحول إلى لون سداسي عشري ، لكن الجانب المواجه للمستخدم مختلف.

إنشاء قسم

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

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

لاحظ أن الأقسام لن تظهر عندما تكون فارغة. يجب عليك إضافة الإعداد والتحكم لهم قبل أن يتم عرضها.

إضافة الإعدادات

يتم إنشاء الإعدادات باستخدام طريقة add_setting() . هم أيضًا يأخذون slug كمعامل أول ومجموعة من الوسيطات كالثاني. ألقِ نظرة أدناه للحصول على مثال لإضافة لون خلفية إلى القسم أعلاه.

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

إنشاء عنصر تحكم

يتم وضع عناصر التحكم في مكانها باستخدام طريقة add_control() . تأخذ هذه الطريقة سلسلة وسيطة أو مصفوفة وسيطة أو يمكنها أيضًا تلقي كائن تحكم مخصص. يتم استخدام كائن التحكم لعناصر تحكم أكثر تعقيدًا مثل محددات الألوان أو أدوات تحميل الملفات.

إليك كيفية إنشاء عنصر التحكم الذي يعدل لون خلفية التذييل:

لقد قمت بتمرير كائن تحكم إلى طريقة add_control() . يجب إنشاء هذا الكائن عن طريق تمرير الكائن $wp_customize أول ، ومعرف فريد لعنصر التحكم باعتباره العنصر الثاني ومجموعة من الوسائط مثل العنصر الثالث.

لاحظ أن عنصر التحكم هو المكان الذي يجتمع فيه كل شيء معًا. يتم تعيين section على معرف القسم الذي أنشأناه ويتم تعيين settings على معرف الإعداد.

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

استخدام قيم الإعداد

بشكل افتراضي ، يتم حفظ الإعدادات في theme_mod. تعد Theme_mods بديلاً لواجهة برمجة تطبيقات الإعدادات ، فهي توفر طريقة سهلة للتعامل مع الإعدادات الخاصة بالموضوع. كل ما عليك القيام به لاسترداد قيمة الإعداد هو استخدام وظيفة get_theme_mod() مع معرف الإعداد الذي تم تمريره إليه.

دعنا نضيف بعض CSS الديناميكي إلى موقعنا على الإنترنت عن طريق ربط wp_head واستخدام الإعداد المحفوظ لدينا:

المعاينات الحية

لا يتم تمكين المعاينات المباشرة للإعدادات افتراضيًا. لاستخدامها يجب أن تفعل ثلاثة أشياء:

• قم بإدراج ملف جافا سكريبت في قائمة الانتظار للتعامل مع المعاينات
• إضافة دعم المعاينة الحية للإعداد ، و
• قم بإنشاء كود Javascript للعناية بكل إعداد

إدراج نص المعاينة المباشرة في قائمة الانتظار

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

أضف دعم المعاينة الحية للإعداد

هذا سهل جدا في الحجج الخاصة بإعداداتنا ، نحتاج إلى تحديد مفتاح transport وتعيين قيمته على postMessage . دعنا نراجع الكود الخاص بنا من قبل:

قم بإنشاء كود Javascript للعناية بكل إعداد

سنحتاج إلى استخدام الدالة wp.customize() في جافا سكريبت. يجب إعطاء هذه الوظيفة معرف الإعداد كمعامل أول ، والثاني هو وظيفة رد الاتصال. في الداخل نربط دالة بتغيير الإعداد ونكتب الكود الخاص بنا الذي سيهتم بالتغيير.

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

تغليف في الفصل

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

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

مزيد من الخيارات

أوصي بشدة بقراءة الوثائق الخاصة بـ Theme Customization API في WordPress Codex. يحتوي على الكثير من الإعدادات الإضافية وطرق العمل مع API.

• مواضيع مجانية
• موضوعات متميزة