اضافه کردن قابلیت انتخاب رنگ دروردپرس

یکی ار امکاناتی که میشه به قالبهای وردپرس و یا در افزونه های وردپرس اضافه کرد قابلیت  انتخاب رنگ هست که کاربر به انتخاب و سلیقه خود رنگ های قسمت های مختلف از جمله پس زمینه، دکمه ها و سایر المنت های یک وب سایت رو تغییر بده و از حالت پیش فرض خارج کنه .

color
color

برای اضافه کردن 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 دادن این فیلد میتونید اون لیست رو نمایش ندید.

 

منبع  مورد استفاده : http://vahidm.me/color-picker-in-wordpress

-