افزونه TinyMCE Advanced و ویرایش حرفه ای متن در وردپرس

هر وبلاگ نویس و نویسنده محتوا ترجیح می دهد از یک ویرایشگر حرفه ای متن که قابلیت ها و ویژگی های زیادی داشته و در عین حال استفاده از آن آسان باشد، استفاده کند. افزونه TinyMCE Advanced یک ویرایشگر حرفه ای وردپرس است که این امکان را در اختیار کاربرانش قرار می دهد.

ویرایشگر بصری وردپرس توسط TinyMCE، یک اپلیکیشن متن باز که با سیستم مدیریت محتوای وردپرس ادغام شده، ساخته شده است. ویرایشگر بصری پیش فرض وردپرس دارای ویژگی های بسیار عالی است که کار با آن را بسیار راحت کرده است اما با این حال کارهایی هست که با این ویرایشگر نمی توانید انجام دهید به عنوان مثال اضافه کردن جدول های حرفه ای در ویرایشگر وردپرس به آسانی امکان پذیر نیست.

اگر به دنبال ویژگی ها و گزینه های بیشتری نسبت به آنچه که ویرایشگر بصری استاندارد وردپرس ارائه می دهد، هستید می توانید از افزونه TinyMCE Advanced استفاده کنید.

اگر ویرایشگر گوتنبرگ وردپرس را امتحان کرده اید و نحوه عملکرد بلوک های آن را نپسندیده اید، یا هنوز آمادگی استفاده از این ویرایشگر را ندارید یا اینکه افزونه ای دارید که در ویرایشگر گوتنبرگ به درستی عمل نمی کند، افزونه TinyMCE Advanced می تواند یک راه عالی برای این باشد که با ویرایشگر گوتنبرگ کار کنید و در عین حال کنترلی که دوست دارید حین ایجاد محتوا داشته باشید را به دست آورید.

این افزونه یک بلوک پاراگراف کلاسیک و نوعی حالت ترکیبی (Hybrid mode) را به گوتنبرگ اضافه می کند. به این ترتیب در حالی که به همه ویژگی هایی که گوتنبرگ ارائه می دهد دسترسی دارید، می توانید از یک ویرایشگر آشنا نیز استفاده کنید.

برخی ویژگی های افزونه TinyMCE Advanced عبارت است از:

• تنظیمات پیشرفته جداول
• تغییر ویرایشگر بلوک پاراگراف به بلوک پاراگراف کلاسیک
• دکمه پاک کردن فرمت بندی
• گزینه های اضافی لیست
• اصلاح متن درون ساخته (بولد، ایتالیک، خط زیر، اضافه کردن لینک، ترازبندی و غیره)
• گزینه ای برای نگه داشتن تگ های پاراگراف در ویرایشگر بلوک
• تنظیمات درون ریزی/برون بری فایل
• ایمپروت کردن CSS سفارشی

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

افزونه TinyMCE Advanced و ویرایش حرفه ای متن در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه می توانید تنظیمات آن را پیکربندی کنید. برای این کار در صفحه افزونه ها به سمت پایین صفحه اسکرول کرده و افزونه TinyMCE پیشرفته را پیدا کنید. سپس در قسمت پایین آن روی لینک “تنظیمات” کلیک کنید.

به این ترتیب می توانید وارد صفحه تنظیمات افزونه به شکل زیر شوید.

شما با رفتن به مسیر تنظیمات » TinyMCE Advanced در پیشخوان وردپرس نیز می توانید به این صفحه دسترسی پیدا کنید.

صفحه تنظیمات افزونه TinyMCE Advanced به صورت پیش فرض روی تنظیمات ویرایشگر گوتنبرگ قرار دارد. اگر قصد ندارید از ویرایشگر گوتنبرگ استفاده کنید در تب “ویرایشگر بلاک(گوتنبرگ)” به سمت پایین صفحه اسکرول کرده و در قسمت “نوار ابزار در پاراگراف کلاسیک و بلاک های کلاسیک”، گزینه “فعال کردن فهرست ویرایشگر (توصیه می شود)” را غیرفعال کنید.

سپس روی تب “ویرایشگر کلاسیک (TinyMCE)” کلیک کرده و پس از فعال کردن گزینه “فعال سازی منوی ویرایشگر” در بخش Toolbars for the Classic Editor به بخش آموزش تنظیمات بلوک کلاسیک در این مقاله مراجعه کنید.

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

تنظمیات ویرایشگر بلوک (گوتنبرگ) افزونه TinyMCE Advanced

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

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

• نوار ابزار اصلی
• نوار ابزار جایگزین (که در ساید بار سمت چپ صفحه نشان داده می شوند)
• دکمه‌های استفاده نشده برای نوارابزار بلاک

شما می توانید گزینه های موجود در “نوار ابزار جایگزین” را با کشیدن و رها کردن به پنجره کشویی “نوار ابزار اصلی” یا باکس “دکمه های استفاده نشده برای نوار ابزار بلاک” و بالعکس منتقل کنید.

در حال حاضر قوانین زیر برای جابجایی گزینه ها وجود دارد.

• دکمه های Align Left ، Align Center ، Align Right ، Bold ، Italic و Link قابل جابجایی یا تنظیم نیستند.
• تمام دکمه های دیگر همیشه به صورت کشویی نشان داده می شوند. کاربران مجاز به اضافه کردن هیچ یک از آنها به نوار ابزار اصلی نیستند.
• تمام دکمه هایی که در قسمت کشویی نشان داده می شوند به ترتیب حروف الفبا تنظیم شده و کاربران مجاز به تغییر ترتیب آنها نیستند.
• در حال حاضر پنجره کشویی نباید خالی باشد و گزینه Inline Image در نوار ابزار جایگزین قرار نمی گیرد.

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

اگر این گزینه ها را در حالت “بله” قرار دهید، تنظیمات مربوط به آنها در ساید بار سمت چپ صفحه در قسمت تنظیمات بلوک نشان داده می شوند.

افزونه TinyMCE Advanced یک بلوک “پاراگراف کلاسیک” را ارائه می دهد. این بلوک به شما امکان استفاده از یک مجموعه کامل از ابزارهای TinyMCE Advanced را داده و درست مانند ویرایشگر کلاسیک وردپرس رفتار می کند. به عبارت دیگر اگر قبل از گوتنبرگ از TinyMCE Advanced استفاده می کردید، این بلوک دقیقاً همان چیزی است که به آن عادت داشته اید.

بهتر است ابتدا درباره دو نوع بلوک کلاسیک موجود در این افزونه توضیح دهیم.

• بلوک پاراگراف کلاسیک (Classic Paragraph) یک بلوک جدید است که توسط TinyMCE Advanced ارائه شده است.
• بلوک کلاسیک یک بلوک پیش فرض وردپرس است که هنگام سوئیچ به ویرایشگر گوتنبرگ، تمام محتواهای قبلی نوشته ها/برگه های شما در آن قرار می گیرند.

همه ابزارهای TinyMCE Advanced در هر دو بلوک موجود هستند. شما در این بخش می توانید نوار ابزار موجود در بلوک پاراگراف کلاسیک و بلوک کلاسیک را طبق نیازهای خود سفارشی سازی کنید.

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

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

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

تمام دکمه ها را به نوار ابزار بالا در بلوک های کلاسیک پاراگراف و کلاسیک اضافه کنید: این گزینه به صورت پیش فرض فعال است و تنها دکمه هایی را تحت تأثیر قرار می دهد که توسط یک افزونه دیگر اضافه شده باشد. این دکمه ها به جای اینکه یک ریف دیگر را به نوار ابزار اضافه کنند، به انتهای اولین ردیف نوار ابزار اضافه می شوند. اگر این گزینه را فعال باقی بگذارید، آن دکمه ها را خواهید دید.

گزینه‌های نگارش لیست: این گزینه نیز به صورت پیش فرض فعال است و استایل های بیشتری را برای لیست های نامرتب (unordered) یا بدون شماره و مرتب (ordered) یا شماره دار اضافه می کند. اگر از نمونه های استانداردی که توسط قالب شما استایل دهی شده است استفاده می کنید، می توانید این گزینه را غیرفعال کنید.

منوی متن: منوی (کلیک راست) محتوای مرورگر را جایگزین می کند

پنجره لینک جایگزین: فعال کردن این گزینه به شدت توصیه می شود و مجموعه قوی تری برای گزینه های لینک ارائه می دهد که عبارتند از:

• گزینه های rel شامل nofollow
• گزینه های هدف شامل پنجره جدید

اندازه‌های قلم: شما می توانید این گزینه را غیرفعال کرده و به استایل های قالب خود اجازه دهید که فونت ها را کنترل کنند.

بخش بعدی مربوط به گزینه های پیشرفته است.

Add Classic Paragraph block: این گزینه به صورت پیش فرض فعال است و یک نوع بلوک جدید به نام بلوک پاراگراف کلاسیک را به بلوک های موجود در گوتنبرگ اضافه می کند که در مقایسه با بلوک پاراگراف استاندارد گوتنبرگ به خوبی با TinyMCE Advanced کار می کند.

Make the Classic Paragraph or Classic block the default block (hybrid mode): با فعال کردن این گزینه بلوک کلاسیک یا بلوک پاراگراف کلاسیک به عنوان بلوک پیش فرض قرار داده می شوند. بلوک پیش فرض بلوکی است که با اینتر زدن یا کلیک کردن روی آخرین بلوک وارد آن می شوید.

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

Keep paragraph tags in the Classic block and the Classic Editor: حذف تگ های <p> و <br> در ویرایشگر کلاسیک را متوقف کرده و آنها را در تب متن نشان می دهد. به این ترتیب می توانید از کدگذاری های پیشرفته تری در تب متن استفاده کنید بدون اینکه فیلتر گذاری بک اند تأثیری در آنها داشته باشد. فعال کردن این گزینه توصیه می شود زیرا کد HTML با فرمت مناسب را نوشته و به سازگاری با کلیه مرورگرها کمک می کند. همچنین به شما امکان می دهد iframe ها را تعبیه کنید.

با این حال بعضی افزونه هایی که از شورت کد استفاده می کنند ممکن است با این تنظیمات دچار مشکل شوند زیر شورت کد آنها نمی تواند درون تگ <p> عمل کند.

ایجاد منو کلاس های CSS: اینکه این تنظیمات برای شما نشان داده شود یا خیر بستگی به قالب شما دارد. اگر قالب شما این قابلیت را داشته باشد که استایل شیت خود را وارد ویرایشگر کند، آنچه که شما هنگام ویرایش مشاهده می کنید دقیقاً مشابه چیزی است که بازدید کننده هنگام مشاهده نوشته/برگه شما می بیند. بیشتر قالب ها هنوز دارای این قابلیت نیستند.

بخش بعدی Advanced options for tables است که به تنظیمات پیشرفته جداول در افزونه TinyMCE Advanced اختصاص دارد.

Enable resizing of tables, rows, and columns by dragging with the mouse: با فعال کردن این گزینه، تمام جدول، ردیف ها و ستون ها می توانند با کشیدن تغییر اندازه پیدا کنند. در این حالت اندازه ها با استایل CSS درونی تنظیم می شوند. با این کار ممکن است بعضی استایل ها که توسط قالب شما تنظیم شده است نادیده گرفته شود و بنابراین جدول هنگام مشاهده در موبایل و تبلت رسپانسیو نباشد.

غیرفعال کردن این گزینه مانع از این می شود که ویرایشگر استایل های CSS درونی را اضافه کند و به این ترتیب کد HTML تمیزتری را تولید می کند. پس از آن می توانید جدول، ردیف ها و سلول ها را با وارد کردن اندازه ها در تب های گزینه های پیشرفته تغییر اندازه دهید.

When inserting a table set the HTML border attribute to 1: فعال کردن این گزینه یک خط مرزی را دور جدول می کشد مگر اینکه قالب شما آن را غیرفعال کند.

برای تنظیم دیگر ویژگی های پیش فرض یا استایل های درونی از افزونه Advanced TinyMCE Configuration استفاده کنید.

When inserting a table show a grid where the number of rows and columns can be selected by dragging with the mouse: در صورت غیرفعال بودن شبکه، تعداد سطرها و ستون ها می تواند در باکس Insert Table وارد شود.

Jump to the next cell when pressing the tab key while editing a table: این گزینه به صورت پیش فرض فعال است و باعث می شود هنگام ویرایش جدول با فشردن دکمه Tab به سلول بعدی بروید. اگر این گزینه را غیرفعال کنید هنگام فشردن دکمه تب به خارج از ناحیه ویرایشگر منتقل می شوید.

Show the advanced tabs in the table properties dialogs: تب های پیشرفته امکان تنظیم استایل های CSS درون خطی را در جدول، روی هر سطر و روی هر سلول می دهند. همچنین این تب ها دارای فیلدهایی برای تنظیمات ساده تر مرز، رنگ مرز و رنگ پس زمینه هستند. با فعال کردن این گزینه تب های پیشرفته در قسمت خصوصیات جدول نشان داده می شوند.

برای اینکه جدول را رسپانسیو نگه دارید، هنگام تنظیم عرض جدول مقادیر را به صورت درصد وارد کنید.

در پایان به بررسی بخش مدیریت می پردازیم.

 در این قسمت می توانید تنظیمات افزونه TinyMCE Advanced را برای سایت دیگری برون بری کنید یا تنظیمات سایت دیگری را درون ریزی کنید.

تمام گزینه های موجود در بخش مدیریت را به حالت فعال نگه دارید. در این صورت ویریشگر TinyMCE Advanced در همه جا موجود خواهد بود.

پس از پیکربندی تنظیمات مورد نظر خود روی دکمه ذخیره تغییرات کلیک کنید.

اگر نمی خواهید از ویرایشگر گوتنبرگ وردپرس استفاده کنید می توانید از تنظیمات ویرایشگر کلاسیک (TinyMCE) استفاده کرده و از TinyMCE Advanced به جای افزونه ویرایشگر کلاسیک استفاده کنید.

تنظیمات ویرایشگر کلاسیک (TinyMCE)

کافی است در تب ویرایشگر بلاک از قسمت Toolbars for the Classic Editor گزینه “فعال سازی منوی ویرایشگر” را غیرفعال کرده و در تب ویرایشگر کلاسیک از قسمت Toolbars for the Classic Editor گزینه ” فعال سازی منوی ویرایشگر” را فعال کنید.

باقی تنظیمات دقیقاً مشابه حالت قبل است.

استفاده از افزونه TinyMCE Advanced

استفاده از افزونه TinyMCE Advanced بسیار راحت است مخصوصاً اگر بلوک پاراگراف کلاسیک را فعال کرده باشید.

کافی است یک نوشته یا برگه جدید ایجاد کرده و روی آیکون + که مربوط به اضافه کردن بلوک جدید است، کلیک کنید.

در قسمت بلوک های عمومی، بلوک پاراگراف کلاسیک را پیدا کرده و روی آن کلیک کنید.

پس از آن کافی است به صورت عادی تایپ کرده و از ابزارهای موجود در نوار ابزار برای انجام هر آنچه که می خواهید، استفاده کنید.

همانطور که مشاهده می کنید ظاهر بلوک پاراگراف کلاسیک دقیقاً مشابه ویرایشگر کلاسیک وردپرس است با این تفاوت که به جای اینکه نوار ابزار در بالای صفحه باشد، در بالای بلوک و در دسترس شما است.

اضافه کردن تصاویر با TinyMCE Advanced در مقایسه با گوتنبرگ

هم در بلوک پاراگراف گوتنبرگ و هم بلوک پاراگراف کلاسیک TinyMCE Advanced می توانید تصاویر را مستقیماً به بلوک وارد کنید. عملکرد آنها در این مورد متفاوت است و هر کدام ویژگی های خود را دارند.

در بلوک پاراگراف کلاسیک، روی “گذاشتن” و سپس “افزودن پرونده چند رسانه ای” کلیک کنید. سپس یک عکس را بارگذاری کرده یا از کتابخانه وردپرس یکی را انتخاب کنید.

پس از قرار دادن تصویر می توانید ترازبندی آن را تغییر داده یا آنرا ویرایش کنید.

در بلوک پاراگراف گوتنبرگ، می توانید “Inline Image” را از پنجره کشویی نوار ابزار انتخاب کنید.

این گزینه به شما امکان می دهد تصویری را در قسمت بلوک وارد نمایید.

تصویر بار گذاری شده کوچک است و شما می توانید اندازه آن را در بلوک تغییر دهید.

ساخت جدول با استفاده از افزونه TinyMCE Advanced

از بهترین ویژگی های افزونه TinyMCE Advanced امکان ساخت آسان جداول و گزینه های مختلفی است که برای پیکربندی جداول خود دارید. برای ایجاد یک جدول کافی است روی آیکون جدول در نوار ابزار کلیک کنید. گزینه های مختلفی به شما نشان داده خواهد شد.

پس از ایجاد جدول می توانید دوباره روی آیکون جدول در نوار ابزار کلیک کنید تا بتوانید خصوصیات جدول را تغییر دهید.

این روش نسبت به بلوک پاراگراف گوتنبرگ بصری تر است و از ایجاد جداول در HTML نیز بسیار آسان تر است.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد. منتظر دریافت دیدگاه های شما هستیم.

دانلود افزونه