دکمه شورت کد اختصاصی برای وردپرس ۳.۹ – بخش دوم

به نام خدا و سلام خدمت شما دوستان.

به بخش دوم این آموزش رسیدیم تو بخش اول با ایجاد و اضافه کردن امکاناتی که در حالت پیشفرض غیر فعال هست آشنا شدیم تو این بخش که جالب تره میخوایم امکاناتی که خود TinyMCE نداره رو بهش اضافه کنیم. پس با ما همراه باشین.

اضافه کردن آیکون سفارشی به دکمه جدی TinyMCE

در قسمت قبلی بهتون نشون دادم که چطوری یه دکمه جدید که متن “New Button” روش هست رو به ویرایشگر اضافه کنیم. ولی متن خالی برا دکمه مون جالب نیست. پس میایم کدمون رو تغییر می دیم تا به جای یه متن خالی از آیکون استفاده کنیم.

لود یک stylesheet بهمراه css شما

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

function my_shortcodes_mce_css() {
	wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

کدهای CSS

این همان کد css هست که باید به فایل شیوه آبشاری (stylesheet) که تو قسمت قبل لود کردیم اضافه کنیم.

i.my-mce-icon {
	background-image: url('YOUR ICON URL');
}

کدهای جاوا اسکریپت

حالا به راحتی text رو که متن دکمه رو تو کد جاوا اسکریپت قبلی نشون میداد رو حذف میکنیم و همچنین مقدار false برای icon تو کد قبلی رو به عنوان کلاسی که تو فایل css براش پس زمینه مشخص کردیم تغییر میدیم. پس در مقایسه با کد جاوا اسکریپت قبلی text حذف شد و مقدار icon از false به my-mce-button تغییر پیدا کرد.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			icon: 'my-mce-icon',
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();

اضافه کردن دکمه همراه با زیرمنو

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

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				},
				{
					text: 'Item 2',
					menu: [
						{
							text: 'Sub Item 1',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						},
						{
							text: 'Sub Item 2',
							onclick: function() {
								editor.insertContent('WPExplorer.com is awesome!');
							}
						}
					]
				}
			]
		});
	});
})();

اضافه کردن پنجره پاپ آپ (pop up) وقتی روی دکمه کلیک شد

دقت داشته باشین که در مثال بالا هر دکمه عبارت “WPExplorer.com is awesome!” رو وارد ویرایشگر میکنه ولی اگه یه پنجره پاپ آپ وجود داشته باشه که کاربر بتونه انتخاب کنه که چه چیزی نوشته بشه چطور میشه؟ حالا که چیز جالبیه بیاین افزونه خودمون رو یه کم کاربرپسند تر بکنیم.

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton( 'my_mce_button', {
			text: 'Sample Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Item 1',
					menu: [
						{
							text: 'Pop-Up',
							onclick: function() {
								editor.windowManager.open( {
									title: 'Insert Random Shortcode',
									body: [
										{
											type: 'textbox',
											name: 'textboxName',
											label: 'Text Box',
											value: '30'
										},
										{
											type: 'textbox',
											name: 'multilineName',
											label: 'Multiline Text Box',
											value: 'You can say a lot of stuff in here',
											multiline: true,
											minWidth: 300,
											minHeight: 100
										},
										{
											type: 'listbox',
											name: 'listboxName',
											label: 'List Box',
											'values': [
												{text: 'Option 1', value: '1'},
												{text: 'Option 2', value: '2'},
												{text: 'Option 3', value: '3'}
											]
										}
									],
									onsubmit: function( e ) {
										editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
									}
								});
							}
						}
					]
				}
			]
		});
	});
})();

جالب بود … خب حالا چی؟؟؟

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