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

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

تا نسخه ۳٫۹ وردپرس به راحتی می توانستیم با قرار دادن کد زیر در functions.php قالب سایت رنگ های دلخواه در ویرایشگر قرار دهیم:

function my_mce3_options( $init ) {
$default_colours = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF';
$custom_colours = 'e14d43,d83131,ed1c24,f99b1c,50b848,00a859,00aae7,282828';
$init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce3_options');

تبدیل کد قدیمی نمایش رنگ های دلخواه به کد سازگار با نسخه ۴ TinyMCE

اما این روش برای در نسخه ۳٫۹ و بعد از آن کار نخواهد کرد. به همین دلیل نیاز است تا از کد زیر استفاده کنید:

function my_mce4_options( $init ) {
$default_colours = '
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Brown",
"C0C0C0", "Silver",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum",
"FFFFFF", "White"
';
$custom_colours = '
"e14d43", "Color 1 Name",
"d83131", "Color 2 Name",
"ed1c24", "Color 3 Name",
"f99b1c", "Color 4 Name",
"50b848", "Color 5 Name",
"00a859", "Color 6 Name",
"00aae7", "Color 7 Name",
"282828", "Color 8 Name"
';
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
$init['textcolor_rows'] = 6; // expand colour grid to 6 rows
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

در کد بالا می توانید علاوه بر تغییر رنگ های پیش فرض ویرایشگر، در قسمت custom_colours کد رنگ های دلخواه خود را وارد کرده همانند e14d43 و نام آن را که در بالا Color 1 Name انتخاب شده تغییر دهید و نام مورد نظر خود را برای این رنگ وارد کنید.

تغییر ابعاد جدول نمایش رنگ ها

باید توجه داشته باشید که در TinyMCE به صورت پیش فرض ۴۰ رنگ در یک جدول به ابعاد ۵*۸ نمایش داده می شوند خب برای اینکه رنگ های دلخواه بعد از رنگ های پیش فرض در آن جدول نمایش داده شوند، نیاز است تا ابعاد جدول مورد نظر ویرایش شود.

برای انجام این کار باید از پارامترهای textcolor_rows و textcolor_cols استفاده شود:

$init['textcolor_rows'] = 5;
$init['textcolor_cols'] = 10;

در کد بالا مشاهده می کنید که تعداد ردیف ها ۵ و تعداد ستون ها ۱۰ می باشد. باید توجه داشته باشید که این مقادیر قابل تغییر هستند و شما می توانید با افزایش آنها تعداد رنگ های که میخواهید در جدول مورد نظر نمایش داده شوند را افزایش دهید.

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

در صورتیکه مایل به استفاده از روش بالا برای اضافه کردن رنگ ها به ویرایشگر خود نیستید، می توانید از پلاگین TinyMCE Color Picker استفاده کنید. در صورتیکه با نصب پلاگین در وردپرس آشنا نیستید می توانید مقاله سه روش مختلف نصب پلاگین (افزونه) در وردپرس را مطالعه کنید.

این پلاگین فاقد بخش تنظیمات بوده و فقط کافی است آن را نصب کنید. سپس این پلاگین به طور خودکار جعبه رنگ مورد نظر خود را جایگزین جعبه رنگ پیش فرض ویرایشگر TinyMCE می کند (طبق تصویر زیر):

بعد از آن در صورتیکه از میان رنگ های بالا رنگ دلخواه خود را پیدا نکردید، کافی است بر روی گزینه Add a color کلیک کرده و سپس رنگ دلخواه خود را اضافه کنید.

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

منبع: How To Add Custom Colours To TinyMCE 4 in WordPress 3.9+

دانلود پلاگین TinyMCE Color Picker