آموزش پلاگین نویسی، ساخت یک انتخاب رنگ برای وردپرس

wpColorPicker

اگر شما می خواهید در وردپرس پا فراتر بگذارید و پلاگین خود را کاربرپسند تر کنید می توانید از تنظیمات زیادی که به او می دهید این مهم را برآورده کنید.اگر شما بخواهید یک پالت انتخاب رنگ را در اختیار کاربران  پلاگین خود قرار دهید  ، با ما همراه باشید.البته شما اگر قبلا Theme Customizer tutorial را نیز خوانده باشید می توانید این کار را انجام دهید.اول باید بدانید که این ویِژگی از نسخه ۳.۵ به بعد به وردپرس افزوده گردیده است پس مطمئن باشید نسخه آن ۳.۵ به بالا باشد.

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

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
});

۲.در محلی که برای تنظیمات وردپرس گذاشته اید کد زیر را بزنید(محلی که میخواهید تنظیمات را بگیرد و ذخیره کند)

<input type="text" value="#bada55" class="my-color-field" />

 

همچین می توانید با یک مقدار پیش فرض بگذارید که گاهی پیام خطایی ظاهر نشود

<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />

۳.حال ما یک فایل جاوا اسکریپت به نام  my-script.js در پوشه پلاگین های خود میسازیم و در داخل آن کد زیر را قرار می دهیم که در اصل تابع wpColorPicker وردپرس را فراخوانی میکنیم

jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();

برای تنظیمات بیشتر نیز می توانید کد زیر را در ادامه کد جاوا  اسکریپت خودتون بگذارید که تنطیمات اضافی می باشد.

    // you can declare a default color here,
    // or in the data-default-color attribute on the input
    defaultColor: false,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){},
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};
 
$('.my-color-field').wpColorPicker(myOptions);

اطلاعات بیشتر در    github

 

تاریخ آخرین بروزرسانی : ۱۰ تیر ۱۳۹۵
میلاد میلادی

باور هایت را که پرورش دهی به هرچیزی دست خواهی یافت.

2نظر برای

آموزش پلاگین نویسی، ساخت یک انتخاب رنگ برای وردپرس


  1. پژمان

    با سلام من می خوام برای یکسری از کاربران که نیاز به کدهای خاص رنگی دارن براشون امکانی ایجاد کنم که بتونن با دادن کد رنگی مورد نظر ، به رنگ و یکسری اطلاعات کاربدی دست پیدا کنند ، مانند این وبسایت:https://www.pantone.com/color-finder
    میشه بنده رو راهنمایی بفرمایید.
    با تشکر

    • مدیرکل

      عرض سلام و ادب
      عرض شود خدمت شما در حال حاظر به چنین پلاگینی برنخورده ایم اگر هر زمان ما این چنین پلاگینی را با امکاناتی که در سایت مذکور وجود دارد دیدم بدون شک در قسمت معرفی پلاگین ها خواهیم پرداخت به آن.
      همچنین می توانید با کمی دانش در خصوص ساخت پلاگین ها این پلاگین را برای خود بسازید و آن را توسعه دهید.

      موفق و سربلند باشید.

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.