سیستم مدیریت محتوای وردپرس به صورت منظم، سالی 2 یا 3 بار(و حتی بیشتر!) آپدیت شده و رنگ و بوی جدیدی به خود می گیرد. در هر آپدیتی که انجام می شود، تولیدکنندگان آن برخی ویژگی های جدید و یا بهبوداتی را بر روی بخش های قبلی ایجاد می کنند.  در این پست قصد داریم به بررسی و شرح یکی از ویژگی های وردپرس به نام Editor Styles بپردازیم که توسط افراد مختلف، بسیار مورد توجه قرار گرفته است.

اگر از وردپرس کاران به نسبت قدیمی باشید، حتماً به یاد دارید که پیش از نسخه 3، جایی که این ویژگی برای اولین بار معرفی شد، شما مکرراً مجبور بودید برای دیدن تغییراتی که اعمال کردید صفحه را رفرش کنید. در واقع حقیقت این امر این است که سبک های محتوا یا به عبارتی content styles در ویرایش گر TinyMCE تحت وردپرس، کاملاً متفاوت از نظیر خود در بخش کاربری کلاینت است. استایل ها(سبکها) در بخش کاربری کلاینت از قالب styles.css سرچشمه می گیرند، این در حالی است که سبک های ویرایشگر(editor styles) از توابع هسته وردپرس استفاده می کنند.

همانطور که در زیر می بینید، ویرایشگر وردپرس از خانواده فونت Serif برای محتوا استفاده کرده، این در حالی است که در بخش کاربری کلاینت از فونت Sans Serif بهره می برد.

.

.

در نسخه 3 وردپرس، شما این امکان را دارید تا سبک های ویرایشگر(editor styles) را به منظور هماهنگ سازی سبک های قالب خود، سفارشی سازی کنید.
حال اجازه دهید تا نگاهی به این بخش داشته باشیم. با ما همراه باشید.

اضافه کردن تابع سبک های ویرایشگر :

سبک های ویرایشگر را می توان با استفاده از تابع ()add_editor_style اضافه کرد. شما لازم است تا یک استایل شیت جداگانه برای style editor خود، به غیر از استایل شیت پیشفرض ایجاد کنید. فرض می کنیم شما نام آن را editor-style.css گذاشته اید، حال شما می توانید کد زیر را به فایل functions.php متعلق به قالب خود اضافه کنید.

add_editor_style('editor-style.css');

این استایل شیت تنها باید شامل استایل هایی مانند پاراگرافها، هدینگ ها، لینکها، و تصاویر برای اجزای موجود روی پست شما باشد. اما اگر شما مطمئن نیستید چه چیزی برای افزودن در این استایل شیت ضروری است، به نکته ای که در ادامه خواهم گفت دقت کنید.
ابتدا باید یکی از سبک های پیشفرض وردپرس مانند TwentyTen را دانلود کرده، بعد فایل editor-style.css را کپی کنید. حال بعد از انجام این کار می توانید دستورات استایل را برای هماهنگ سازی آنها از قالب خود سفارشی سازی کرده و همچنین به منظور تنظیم عرض tinyMCE ما می توانیم از کد زیر در استایل شیت خود بهره ببریم:

html .mceContentBody {
max-width: 640px;
padding: 10px;
}

کل مراحل کار همین بود. حال شما باید سبک های محتوا(content styles)ی خود را در ادیتوری مشابه چیزی که در بخش کاربری کلاینت قرار گرفته، پیدا کنید.

.

.

سبک ویرایشگر(editor style) برای Post Types:

در نسخه 3 وردپرس شما می توانید نسبت به ایجاد Post Types به منظور حفظ تمرکزهای مختلف روی محتوا اقدام کنید.
به صورت پیش فرض، وردپرس این امکان را به شما می دهد تا نسبت به ایجاد صفحه و پست اقدام کنید. حال شما با استفاده از Post Types قادر خواهید بود تا پستی برای محصولات با مجموعه فیلدهایی که توانایی سفارشی سازی شدن بیشتری دارند را ایجاد کنید.

به منظور افزودن سبک های ویرایشگر مشخص برای Post Types خود، شما می توانید از کدهای زیر بهره ببرید:

function my_theme_add_editor_styles() {
global $post;
$post_type = get_post_type( $post->ID );
$editor_style = 'editor-style-' . $post_type . '.css';
add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );

حال در پوشه قالب خود، استایل شیت هایی با قائده نام گذاری editor-style-{post_type}.css ایجاد کنید. در صورتی که تمایل به استفاده از نام گذاری متفاوتی را دارید کافی است مقدار آن را در $editor_style تغییر دهید.

ترجمه شده توسط تیم آرتاباز، هادی نجار.