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

اضافه کردن دکمه های دلخواه به ویرایشگر متن

اضافه کردن دکمه های دلخواه به ویرایشگر متن

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

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

البته در بسیاری از سایت های ایرانی و خارجی این کار را با اضافه کردن کد های php و javascript انجام داده اند ولی ما می خواهیم این کار را به سادگی و با اضافه کردن تنها چند خط کد php به قالب وردپرس انجام دهیم.

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

مثال زیر را در نظر بگیرید:

فرض کنید می خواهیم یک دکمه در ویرایشگر متن وردپرس که با نام wysiwyg هم شناخته می شود اضافه کنیم به صورتی که هر گاه روی متن انتخاب شده ای این دکمه را فعال کردیم یک کلاسی به آن داده شود تا بتوانیم استایل های مخصوص خود را به آن بدهیم:

کد زیر بیانگر این مثال است:

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
	// Define the style_formats array
	$style_formats = array(
		// Each array child is a format with it's own settings
		array(
			'title' => 'باکس',
			'block' => 'div',
			'classes' => 'box',
			'wrapper' => false,
      'styles' => array(
                'border'    => '1px solid #ccc',
                'font-size' => '12px'
            )
		),
	);
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = wp_json_encode( $style_formats );

	return $init_array;

}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

کد بالا را به انتهای فایل functions.php خود اضافه کنید. ( دقت کنید که بین تگ های php قرار گرفته باشد. )

توضیح اینکه:

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

از کد های شماره ۱۱ به بعد تعریف میکند که این دکمه چه کاری را انجام دهد.

  • title اسم دکمه را مشخص میکند.
  • block تگ مورد نظر را تعیین می کند که می تواند div,p,span,small,blockquat و غیره باشد.
  • classes مشخص می کند که چه کلاسی به این تگ داده شود.
  • wrapper که می تواند true یا false باشد که اگر false بگذارید کد ها را پشت سر هم قرار میدهد و بینشان فاصله ای نیست.
  • توسط styles هم می توانید یک استایلی را فقط در محیط ویرایشگر متن بدهید که از سایر متون جدا شود.

کد فوق تنها یک مثالی بود از اضافه کردن یک خط کد با کلاس box به ویرایشگر متن مثل کد Html زیر:

<div class="box">متن انتخابی شما</div>

برای مشاهده کد های کامل می توانید به لینک زیر مراجعه کنید.

tiny_mce_before_init


اشتراگ گذاری در:
اگه خوبه لایکش کن




دیدگاه بگذارید

avatar
  Subscribe  
Notify of