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

نوشته شده در ۴ دی ۱۳۹۱ ساعت ۲۰:۵۰ | 3,686 بازدید

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

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

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

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

[codesyntax lang=”php”]

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

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

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

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

[codesyntax lang=”php”]

   /*
    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...
    */

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

Theme Name: Your theme name

Used to style the TinyMCE editor.

html .mceContentBody {

direction: rtl;

unicode-bidi: embed;

float: right;

max-width: ۷۳۴px;

font-family: tahoma;

}

* {

color: #۳۸۳۸۳۸;

font-family: tahoma;

font-size: ۱۴px;

}

h1,h2,h3,h4,h5,h6{

font-family: ;

color: #۳۸۳۸۳۸;

font-weight: bold;

padding: ۰;

text-align: right;

}

p {

/* ... */

}

etc . etc...

[/codesyntax]

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

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

[codesyntax lang=”php”]

    function my_editor_style() {
       global $current_screen;
        switch ($current_screen-&amp;gt;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() {

global $current_screen;

switch ($current_screen-&gt;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' );

[/codesyntax]

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

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

[codesyntax lang=”php”]

   function my_editor_style() {

        switch ($GLOBALS['post']-&amp;gt;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' );

۱۰

۱۱

۱۲

۱۳

function my_editor_style() {