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

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

در زیر مثال هایی زده شده که کمک می کنه تا بتونید وظایف TinyMCE رو توسعه بدین. در این مقاله قصد نداریم تا بطور کامل به این موضوع بپردازیم ولی در حدیه که کارتون با کپی کردن کد راه بیفته. میتونین از کدهای زیر داخل افزونه و پوسته استفاده کنین و دکمه شورتکد خودتون رو بسازید.

راستش من از این کدها تو فایل functions.php اسفاده کردم ولی موفق نشدم نفهمیدم مشکلم چی بود ولی وقتی به عنوان افزونه استفاده کردم کارم راحت انجام شد.

اضافه کردن انتخابگر اندازه (font size) و نوع فونت (font family)

بطور پیشفرض انتخابگر اندازه و نوع فونت بر روی ویرایشگر TinyMCE اضافه نشده. تابع زیر هر دوی اینهارو به عنوان یک منوی ریزشی (Drop Down)  در ردیف دوم اضافه می کنه. تغییر دادن ردیف این منو راحته همونطور که در مثال زیر مشخصه ما از mce_button_2 استفاده کردیم که عدد ۲ مشخص کننده ردیف این دکمه یا منو هست. برای مثال میتونین از فیلتر mce_button_3 برای قرارگیری در ردیف سوم استفاده کنین.

// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

اضافه کردن اندازه فونت های سفارشی

بطور پیشفرض اندازه فونت با مقدار pt که معمولا یه اندازه ایده آل نیست، در ویرایشگر قرار داده شده. من توصیه می کنم از مقدار پیکسل (px) استفاده کنین (12px, 13px, 14px, …)  و تنظیمات بیشتری برای انعطاف بیشتر برا خودتون ایجاد کنید. تابع زیر  فونت های پیشفرض این تنظیمات رو در یک منوی ریزشی آماده می کنه.

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

اضافه کردن فونت های سفارشی

فونت های پیشفرض این ویرایشگر تمامی فونت های ایمن وب (web-safe) هستن. ولی آیا میشه فونت های دلخواه خودتون رو به این ویرایشگر اضافه کنین؟ شاید بعضی از فونت های گوگل رو یا فونت های فارسی خودتون؟ با توجه به مثال زیر این کار راحتیه.

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

با این کار  فقط اسم فونت اضافه شده و ویژگی font-size قسمت مورد نظر به فونت مورد نظرتون تغییر میکنه که اگه مرورگر بتونه فایل فونت شما رو بخونه که اجراش میکنه حالا من چطور فایل فونت latto موجود در لیستم به صفحه اضافه کنم؟ خیلی ساده س! … از add_editor_style برای الحاق فایل استایل کمک میگیریم.

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
	function wpex_mce_google_fonts_styles() {
	   $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
           add_editor_style( str_replace( ',', '%2C', $font_url ) );
	}
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );

دوستان عزیز با توجه به اینکه این مقاله ترجمه شده، نمی شد اصل مطلب رو تغییر بدم و از مثال های فارسی استفاده کنم ولی خب میشه در خارج از گود این کارو انجام داد.

به عنوان مثال ما میخوایم فونت BYekan رو به ویرایشگرمون اضافه کنیم. بعد از اون برای اینکه متن داخل ویرایشگرمون هم به شکل فونت BYekan نشون داده بشه، فایل استایل که فونت رو import کرده رو با تابع add_editor_style به صفحه ویرایشگر اضافه می کنیم:

// add "BYekan" to TinyMCE 4.0
if ( ! function_exists( 'wpex_mce_my_theme_fonts_array' ) ) {
	function wpex_mce_my_theme_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'byekan=byekan;tahoma=tahoma;arial=arial';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_my_theme_fonts_array' );

حالا فایل استایل حاوی فونت:

// Add BYekan css file for use with the editor
if ( ! function_exists( 'wpex_mce_byekan_fonts_styles' ) ) {
	function wpex_mce_byekan_fonts_styles() {
	   $font_url = get_template_directory_uri().'/fonts/byekan_webfonts.css';
	}
}
add_action( 'init', 'wpex_mce_byekan_fonts_styles' );

دوستان همونطور که میبینین با این کد فقط سه فونتی که ما نوشتیم اضافه میشه و بقیه فونت ها میپره پس اگه بقیه فونت ها رو می خواین اونا رو هم باید تو لیست آرایه $initArray ذکر کنین.

فعال کردن منوی ریزشی فرمت (استایل) بندی و اضافه کردن استایل جدید

منوی ریزشی استایل در وردپرس 3.8 رو به خاطر دارید؟ جالب بود. شما میتونستین بعضی از کلاس ها رو به اون اضافه کنید و همراه با ویرایشگر پست استفاده کنید. در وردپرس ۳.۹ شما با اینکه میتونید هنوز استایل تعریف کنید ولی در ویرایشگر TinyMCE 4.0 به “فرمت” تغییر نام یافته پس یه ذره متفاوته. در مثال زیر چگونگی فعال کردن منوی ریزشی فرمت و همچنین اضافه کردن آیتم جدید به اون می بینید.

فعال کردن منوی ریزشی فرمت بندی (Format DropDown Menu)

این در واقع همون روشیه که در وردپرس ۳.۹ استفاده میشه.

// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
	function wpex_style_select( $buttons ) {
		array_push( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons', 'wpex_style_select' );

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

اضافه کردن آیتم جدید فوق العاده ساده س. لطفا به اضافه شدن $settings[‘style_formats_merge’] = true; در کد زیر دقت کنید. با این کار مطمئن میشیم که که ویرایشی که انجاممیدیم به منوی ریزشی فرمت بندی اضافه میکنه (لطفاً توجه کنید که ممکنه افزونه های دیگه از این توابع استفاده کنند پس بهتره نام این توابع رو عوض کنید.)

// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		$new_styles = array(
			array(
				'title'	=> __( 'Custom Styles', 'wpex' ),
				'items'	=> array(
					array(
						'title'		=> __('Theme Button','wpex'),
						'selector'	=> 'a',
						'classes'	=> 'theme-button'
					),
					array(
						'title'		=> __('Highlight','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'text-highlight',
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

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

اضافه کردن یه دکمه جدید به ویرایشگر TinyMCE میتونه برای استفاده از کدهای کوتاه یا sortcode ها خیلی مفید باشه. چون شما به عنوان یه کاربر مجبور نیستین شورتکدهای ساده ای که میشه به سادگی با زدن یه دکمه ایجاد کرد  رو حفظ کنین. من نمیگم برای تمام شورتکدهاتون ۱۰۰ تا دکمه به ویرایشگر اضافهکنین(از انجام این کار توسط توسعه دهنده ها متنفرم ). ولی اگه یه قسمت کوچیک از ویرایشگر رو بهش اختصاص بدین بعدش میتونین یه منوی ریزشی به همراه زیر منو به عنوان توضیح برای خودتون استفاده کنین.

کد پی اچ پی – تعریف یک افزونه جدید برای TinyMCE

این کد یه افزونه جدید TinyMCE براتون ایجاد می کنه. مطمئن بشین که فایل mce-buttons.js درست آدرس دهی شده باشه. من برای نام گذاری از پیشوند my اسفاده کردم تا منحصر به فرد باشه!

// Hooks your functions into the correct filters
function my_add_mce_button() {
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// check if WYSIWYG is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'my_register_mce_button' );
	}
}
add_action('admin_head', 'my_add_mce_button');

// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
	return $plugin_array;
}

// Register new button in the editor
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}

کد جاوا اسکریپت – اضافه کردن دکمه به TinyMCE

ما میخوایم دکمه ای ایجاد کنیم تحت عنوان NewButton که با کلیک روی اون متن WPExplorer.com is …! به محتوای ویرایشگر اضافه بشه.

محتوای فایل mce-buttons.js

(function() {
	tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
		editor.addButton('my_mce_button', {
			text: 'New Button',
			icon: false,
			onclick: function() {
				editor.insertContent('WPExplorer.com is awesome!');
			}
		});
	});
})();