اختصاص استایل خاص برای ویرایشگر TinyMCE وردپرس

امروز می‌خواهیم شما را با روشی آشنا کنیم تا بتوانید WYSIWYG یعنی «هرآنچه می‌بینید همانی است که می‌گیرید» را تحقیق دهید و بتوانید در هنگام استفاده از ویرایشگر TinyMCE وردپرس لذت ببرید.

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

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

// Add styles to the WYSIWYG editor
add_editor_style('editor-style.css');

… وسپس یک فایل با نام editor-style.css ساخته و استایل دلخواه خود را در آن قرار داده و آن را در پوشه قالب خود قرار دهید همین کار تمام است!.

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

/*
Theme Name: Your theme name
*/
/*
Used to style the TinyMCE editor.
*/

html .mceContentBody {
	direction: rtl;
	unicode-bidi: embed;
	float: right;
	max-width: 734px;
	font-family: tahoma;
}
* {
	color: #383838;
	font-family: tahoma;
	font-size: 14px;
}

h1,h2,h3,h4,h5,h6{
    font-family: ;
    color: #383838;
    font-weight: bold;
    padding: 0;
    text-align: right;
}

p {
	/* ... */
}

/*
	etc . etc...
*/

توجه داشته باشید که فایل style.css را به عنوان استایل ویرایشگر به وردپرس معرفی نکنید چون امکان دارد باعث بوجود آمدن مشکلاتی برای ویرایشگر شود.

اختصاص استایل‌های متفاوت به پست‌ها ، صفحات و پست‌های سفارشی

مزیت این قابلیت زمانی آشکار میشود که شما می‌توانید استایل‌های متفاوتی را برای صفحات و پست های گوناگون و حتی پست‌های سفارشی اختصاص دهید. برای اینکار از کد زیر استفاده کنید.

function my_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    case 'post':
        add_editor_style('editor-style-post.css');
        break;
    case 'page':
        add_editor_style('editor-style-page.css');
        break;
    case 'portfolio':
        add_editor_style('editor-style-portfolio.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

فراموش نکنید که فایل استایل‌های مختلف را برای هریک از آنها ایجاد کنید.

اختصاص استایل متفاوت به قالب های صفحات

اگر از قالب‌های صفحه استفاده می کنید به راحتی می‌توانید از کد زیر برای اخصاص دادن استایل های متفاوت به هریک از آنها استفاده کنید.

function my_editor_style() {

    switch ($GLOBALS['post']->page_template) {

    case 'full-width-page.php': // Change to your template filename
        add_editor_style('editor-style-full-width.css');
        break;
    default:
        add_editor_style('editor-style.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

اگر سوالی برایتان پیش آمده آن را مطرح نمایید تا در حد توان خود به شما کمک نماییم.

منابع استفاده شده :

http://codex.wordpress.org/Function_Reference/add_editor_style

http://wpjourno.com/style-wordpress-wysiwyg-visual-editor/

http://wpstorm.net/2010/04/editor-styles-custom-post-types-wordpress-3-0/

دیدگاه کاربران

  1. Johnd775 در

    Very informative blog post.Really thank you! Keep writing. dbkadgdgefek

دیدگاه خود را بنوبسید