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

 wordpress-tinymce

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

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


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

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


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

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


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

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

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

 

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

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

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

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


 

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

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

 wordpress-mce-formats

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

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

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

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

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

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

mce-new-button

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

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

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

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

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

دوستان عزیز قسمت جالب و دوست داشتنی کارمون مونده که تو قسمت بعد میگم بهتون پس تا بعد…

منبع:


 
ما مایلیم مطالب جدید را در کانال تلگرام به شما اطلاع دهیم.