وردپرس

اضافه کردن Color Picker در وردپرس

وردپرس نسخه ۳.۵ API جدیدی به توسعه‌دهندگان معرفی کرد برای داشتن Color Picker.

برای اضافه کردن Color Picker به پلاگین یا قالب خودتون ابتدا باید Library مربوط به Color Picker رو لود کنید. برای اینکار از Enqueue API استفاده می‌کنیم. کد زیر یه نمونه هست که فایل CSS و JS مربوط به Color Picker و هم‌چنین فایل اسکریپت ما رو لود می‌کنه:

کد بالا ابتدا فایل CSS مربوط به Color Picker رو به لیست Enqueue وردپرس اضافه می‌کنه سپس ما اسکریپتمون رو اضافه می‌کنم در خط بعدی که jquery و wp-color-picker رو به عنوان Dependency معرفی می‌کنیم.

قبل از اینکه جاوااسکریپت مربوط به Color Pickerمون رو بنویسیم باید یک فیلد از نوع متن به صفحه اضافه کنید تا Color Picker رو روی این فیلد فعال کنیم. مثلا:

و حالا محتویات فایل scripts.js. ساده ترین حالت برای Color Picker به شکل زیر میشه:

و با تمامی تنظیمات Color Picker:

توضیحات تنظیمات:

defaultColor: رنگ پیشفرض. هم‌چنین رنگ پیشفرض رو میشه با data-default-color در Attribute فیلد رنگ مشخص کرد.

change: برای این گزینه می‌تونیم یک تابع Callback بدیم تا وقتی که کاربر رنگ رو تغییر داد تابع ما صدا زده بشه.

clear: برای این گزینه هم می‌تونیم یک تابع Callback بدیم تا وقتی که کاربر روی دکمه Clear کلیک کرد یا رنگی غیرمجاز رو انتخاب کرد تابع ما صدا زده بشه.

hide: به طور پیشفرض پالت انتخاب رنگ و گزینه‌های مربوط به اون مخفی هستند تا وقتی که کاربر روی دکمه Select Color کلیک کنه. با مقدار false دادن به این گزینه می‌تونید به طور پیشفرض همیشه پالت انتخاب رنگ رو نمایش بدید.

palettes:‌ زیر پالت انتخاب رنگ وردپرس یه لیستی از رنگ‌های معمول رو نشون میده. با مقدار false دادن این فیلد میتونید اون لیست رو نمایش ندید.

 

 

‎نظر شما چیست

‎آدرس ایمیل شما منتشر نخواهد شد‫.‬‎فیلد‌های اجباری علامت زده شده‌اند *