ویرایشگر المنتور 4 چیست ؟
ادیتور یا ویرایشگر المنتور نسخه 4 که به نام Editor V4 هم ممکن است شنیده باشید؛ یک ویرایشگر جدید برای صفحه ساز قدرتمند المنتور است که یک بازطراحی اساسی در آن بوجود آمده. و باعث ایجاد تفاوت های بنیادی و مهم بین این ویرایشگر و نسخه های قدیمی شده. در زمان نگارش این معرفی، توسعه ویرایشگر ورژن 4 المنتور در حالت Beta می باشد و به زودی می توانید از آن در پروژه های واقعی استفاده کنید.
احتمالا در نسخه های بعدی این ویرایشگر با توسعه امکانات بیشتر به عنوان ویرایشگر پیشفرض معرفی شده و جای ویرایشگر نسخه 3 را می گیرد. بنابراین از همه طراحان سایت علاقه مند به المنتور دعوت میکنیم که تا انتهای این معرفی کاربردی همراه ما باشند.
چرا المنتور نسخه 4 معرفی شد؟
بهینه سازی کدهای سایت و performance بهتر: یکی از مهم ترین اهداف توسعه ادیتور نسخه 4، بهینه سازی کدهای تولید شده المنتور به خصوص در سایت های بزرگ و پروژه های سنگین است. ویرایشگر قدیمی المنتور در سایت های کوچک خوب عمل می کند. اما در پروژه های بزرگ، سایت های المنتوری سنگین و کند می شدند چون ویرایشگر قدیمی CSS تکراری و wrapperهای زیاد و divهای تو در تو ایجاد میکند.
ایجاد سیستم استایل مرکزی و با قابلیت استفاده مجدد: در ویرایشگر جدید المنتور نسخه 4 امکان تعریف استایلهایی وجود دارد که می توانید یک مرتبه تعریف کنید و در کل سایت از آن استفاده کنید؛ به جای اینکه برای هر ویجت جداگانه استایل تنظیم کنید.
طراحی با توجه به جزئیات بیشتر: Responsive واقعی بدون محدودیت در ویرایشگر نسخه 4 امکانپذیر شده. هر المان را می توانید برای هر breakpointیا نقطه شکست جداگانه ریسپانسیو کنید.
به حداقل رساندن css سفارشی: برای طراحی حرفه ای در ویرایشگر قدیمی V3 در اکثر مواقع به نوشتن custom css نیاز داشتیم و با اضافه کردن استفاده زیاد از !important باعث override و سیستم استایل پیچیده می شد. اما یکی از اهداف Editor V4 کاهش وابستگی به CSS سفارشی و کنترل کلیه جزئیات درون سیستم خود ویرایشگر می باشد.
مهمترین تغییرات ویرایشگر جدید المنتور نسخه 4
- طراحی جدید ویرایشگر با ساختار Atomic و Css-First : در این ساختار استایل ها دیگر به ویجت ها وابسته نیستند و استایل و محتوا از هم تفکیک می شوند.
- ساختار DOM سبک تر و خروجی کد تمیز (Clean): یکی از تغییرات مهم ویرایشگر نسخه 4 سبک تر شدن و کم تر شدن خطوط کدهاست. به جای چند لایه تو درتو تنها با یک تگ Div یک بخش صفحه نمایش داده می شود.
- مدیریت کلاس های CSS در داخل خود ویرایشگر المنتور: این تغییر جذاب به طراحان کمک میکند کلاس های global و سراسری در المنتور بسازند و از آن در تمامی پروژه استفاده کنند.
- امکان ویرایش مستقیم متن روی طراحی: در ویرایشگر نسخه 4 المنتور می توانید متون را مستقیما داخل خود طراحی ویرایش کنید. و دیگر نیازی به مراجعه به پنل تنظیمات برای این کار نیست.
- بهبود و دقیق تر شدن طراحی ریسپانسیو یا واکنشگرا: ابزار و امکانات واکنشگرایی در ویرایشگر المنتور خیلی دقیق تر هستند.
- اضافه شدن امکان استایل دهی به حالت های مختلف ویجت (Active، Focus، Current، Hoverو… )
معرفی معماری جدید Editor در المنتور 4
المنتور در Editor V4 تغییرات اساسی در ساختار و معماری ایجاد کرده. این معماری جدید، هم باعث مدیریت بهتر و سریعتر استایل ها می شود و هم DOM خروجی را بهینه می کند. درنتیجه، وبسایت های المنتوری بارگذاری سریعتری خواهند داشت. و در پروژه های بزرگ با امکان استایل دهی متمرکز طراحی جذاب و حرفه ای انجام می شود.
در معماری جدید المنتور 4 هر صفحه از Atomic Elements ساخته می شود. به زبان ساده یعنی به جای اینکه یک ویجت با کلی استایل داخلی به صفحه اضافه کنیم؛ یک جزء کوچک و مستقل داریم. مثلا در ادیتور قدیمی المنتور یک ویجت دکمه همه چیز اعم از متن، ایکون، استایل، فواصل، رنگ و … را داخل خودش داشت. اما درالمان های Atomic هر بخش جداست؛ تیتر، دکمه یا هر المانی فقط همان عنصر مستقل است و استایل ها از سیستم Design Tokens می آیند. که قابل استفاده مجدد هستند.
افزایش سرعت و بهینهسازی عملکرد ویرایشگر
با استفاده از ویرایشگر جدید المنتور هم در محیط ویرایشگر و هم خروجی و سورس سایت شاهد بهینه سازی سرعت و عملکرد وبسایت هستیم. این بهینه سازی از طریق ساختار CSS-First انجام می شود. که در آن دیگر برای هر ویجت استایل های inline و پراکنده تولید نمی شود. ساختار جدید براساس کلاس ها و متغیرها عمل می کند. درنتیجه، حجم CSS های تکراری و کدهای بی استفاده به میزان زیادی کاهش پیدا خواهدکرد. همین ساده سازی خروجی HTML صفحات وب سرعت و در نتیجه سئو سایت را بهبود می دهد. و خبر خوش اینکه با استفاده از ویرایشگر نسخه 4 المنتور وابستگی سایت های المنتوری به افزونه های کش و بهینه ساز به میزان زیادی کاهش پیدا می کند.
داخل خود ادیتور نیز به دلیل کاهش پردازش های اضافی، جابجایی عناصر و کار با ویرایشگر روان تر شده.
تجربه کاربری (UI/UX) جدید در المنتور 4
تجربه کاربری در ویرایشگر جدید المنتور ساده و مدرن شده. شبیه به نرم افزار فیگما امکان components سازی المان ها وجود دارد.
این تغییر بزرگ در UI/UX در ابتدا ممکن است برای مبتدیان گیج کننده به نظر برسد. چون عادت داشتند که همه تنظیمات را داخل خود ویجت انجام دهند.
تغییرات مدیریت ویجتها و تنظیمات
در ادیتور ورژن 4 عناصر اتمی یا atomic elements اضافه شده اند که مدیریت ویجت و تنظیمات این ویجت ها با ویجت های ادیتور ورژن 3 کاملا متفاوت است. برای مدیریت استایل ویجت ها، در تب استایل بخش کلاس ها اضافه شده. اگر کلاس محلی را انتخاب کنید فقط استایل ویجت انتخابی تنظیم می شود. اما اگر در همین بخش با تایپ نام، یک کلاس سراسری جدید بسازید می توانید علاوه بر همین ویجت در سایر المان ها نیز از این کلاس استایل استفاده کنید.
بهبود سازگاری با وردپرس و گوتنبرگ
ویرایشگر جدید المنتور هماهنگی و سازگاری بیشتری با سیستم استایل های سراسری وردپرس پیدا کرده و می تواند تنظیمات تایپوگرافی و color در قالب را بیشتر درک کند. وردپرس تنظیمات قالب رو داخل theme.json ذخیره می کنه، مثل فونت ، فواصل ، رنگ ها و… در ویرایشگر قدیمی المنتور هنگام ساخت یک صفحه، المنتور حتی اگر هیچ تغییراتی برای استایل وجود نداشت باز هم استایل های خودش را با اولویت بیشتری لود میکرد و تنظیمات قالب رو بی اثر یا override می کرد. اما در ادیتور جدید فقط وقتی تغییراتی در استایل داده باشید، استایل های المنتور لود میشوند وگرنه استایل های theme.json اجرا می شود.
به طور کلی، با استفاده از Editor 4 کدهای تولیدشده از نظر فنی استانداردتر هستند و تداخل کمتری با سیستم استایل گوتنبرگ دارند. این مسئله برای پروژه های بزرگ که همزمان از ویرایشگر المنتور و بلوکی استفاده می کنند؛ اهمیت دارد. و نشان می دهد که المنتور با توسعه ویرایشگر جدید خود می خواهد سازگاری بیشتر با هسته وردپرس ایجاد کند.
مقایسه ویرایشگر جدید المنتور 4 با نسخه 3
در مقایسه با المنتور 3، ویرایشگر جدید المنتور 4 تنها یک آپدیت کوچک و ساده نیست. بلکه یک تحول بزرگ در بخش های مختلف است که در ادامه تشریح شده:
تفاوت عملکرد و سرعت المنتور 4 و المنتور 3
این تفاوت را باید از دو جنبه تاثیر در عملکرد یا performance سایت و عملکرد و سرعت خود ادیتور بررسی کرد.
هماهنطور که در تیترهای قبلی گفته شد؛ در نسخه 4 کدهای HTML تولید شده بهینه تر هستند و برای هر ویجت تنها یک تگ DIV در سورس سایت تولید می شود. بنابراین مرورگر سریعتر می تواند صفحه را رندر کند و امتیاز Core web Vitals سایت نیز به نسبت المنتور 3 بهتر می شود.
ساختار جدید و سبک سازی ادیتور حتی در بخش خود ویرایشگر نیز روی سرعت طراحی و پردازش در ادیتور هم تاثیر مثبت می گذارد. البته این سرعت از نظر تئوریک هست و درواقع آن چیزی است که از ویرایشگر 4 انتظار می رود اما چون این ویرایشگر هنوز در حال تکمیل می باشد؛ به نسبت المنتور 3 ممکن است هنوز در برخی از پروژه ها کندی مقطعی را شاهد باشیم. که امیدواریم در آینده توسط توسعه دهندگان رفع شود.
تفاوت رابط کاربری در نسخه جدید المنتور
- اولین تفاوت در رابطه با پنل تنظیمات ویجت هاست. در نسخه 3 هر ویجت معمولا 3 تا تب داشت؛ محتوا، استایل و پیشرفته. در نسخه 4 سه تب عمومی و استایل و تعاملات رو داریم.
- بخش style یا سبک در ادیتور ورژن 4 برای همه المان ها حالت یکپارچه و استاندارد دارد و برای همه المان ها یکسان است. اما در ورژن 3 ، تب استایل برای ویجت های مختلف متفاوت بود. به غیر از این ادیتورورژن 4 امکان تعریف کلاس های گلوبال یا سراسری و کلاس بندی استایل ها را فراهم می کند.
- ارائه عناصر Atomic که با توسعه V4 Editor معرفی شد و در ورژن 3 وجود نداشت.
آیا المنتور 4 جایگزین کامل نسخه قبلی شده است؟
در حال حاضر المنتور نسخه 4 در مسیر تکامل قرار دارد و هنوز جایگزین نسخه قبلی ویرایشگر المنتور نشده. اما انتظار می رود که با رفع باگ های احتمالی و ارائه قابلیت های تکمیلی در آپدیت های جدید المنتور به عنوان ویرایشگر پیش فرض تنظیم شود.
مزایای استفاده از ویرایشگر جدید المنتور نسخه 4
- سرعت سایت بهتر، رتبه page speed بالاتردر نتیجه بهبود تجربه کاربر و سئوی بهتر.
- ریسپانسیو واقعی برای همه المان ها بدون نیاز به کدنویسی CSS.
- به جای اینکه برای هر دکمه جداگانه سبک Hover و رنگ و استایل تنظیم کنید، یک مرتبه کلاس استایل برای حالت عادی، hover و active بسازید و برای همه دکمه های سایت از همین کلاس استفاده کنید. هروقت هم نیاز به تغییر داشت فقط کافیه استایل های کلاس را تغییر دهید تا همه دکمه ها تغییر کنند.
- المان های تکراری سایت را به جای copy paste به Component بسازید. که اگر نیاز به تغییر داشت بتوانید یکجا تغییرات را انجام دهید و همه یک مرتبه آپدیت شوند.
معایب و محدودیتهای المنتور 4 (نکاتی که باید بدانید)
- هنوز کامل و پایدار نیست و همه ویجت های المنتور پرو نسخه Atomic ندارند.
- بسیاری از افزونه های جانبی المنتوری احتمالا دچار اختلال شوند چون ممکن است ساختار استایل دهی آنها هنوز مثل ادیتور ورژن 3 باشد.
- ادیتور ورژن 3 خیلی حالت گرافیکی داشت اما باتوجه به اینکه ادیتور ورژن 4 حرفه ای تر است و برای کاربران مبتدی که هنوز درکی از ساختار CSS ندارند؛ گیج کننده ممکن است باشد.
- مهاجرت پروژه های قدیمی که با ادیتور ورژن 3 طراحی شده اند به ادیتور ورژن 4 انجام نمی شود. و اگر صفحات جدید با ادیتور ورژن 4 طراحی شود؛ مدیریت استایل ها با مشکل مواجه می شود.
آیا المنتور 4 با قالبها و افزونهها سازگار است؟
سازگاری المنتور 4 با قالب های محبوب وردپرسی و افزونه های پرکاربرد یکی از مهم ترین چالش های طراحان سایت هنگام کار با این آپدیت می باشد.
سازگاری المنتور 4 با قالبهای وردپرسی
قالب های استاندارد و به روز وردپرسی مثل هلو المنتور، Astra، OceanWP یا قالب های حرفه ای مثل وودمارت و فلت سام بدون مشکل با ویرایشگر جدید المنتور کار می کنند. اما قالب های قدیمی یا قالب های سفارشی غیراستاندارد ممکن است هنگام استفاده از المنتور 5 با تداخل مواجه شوند. و ویجت های اختصاصی قالب در ویرایشگر V4 نمایش داده نشود.
سازگاری المنتور 4 با افزونههای محبوب وردپرس
افزونه های اصلی وردپرسی مثل ووکامرس، ACF، WPML که بروزرسانی منظم دارند مشکل تداخل با المنتور 4 ندارند. اما اگر از نسخه های قدیمی افزونه های جانبی المنتوری مثل افزونه های سری جت استفاده کنید؛ ناسازگاری ایجاد می شود.
وضعیت افزونههای جانبی المنتور در نسخه 4
افزونههای جانبی المنتور (Add‑ons) مانند Ultimate Addons, Essential Addons, JetPlugins, PowerPack, Element Pack توسط توسعه دهندگان شرکت های مختلف آپدیت و بروزرسانی می شوند. بنابراین برخی ویجت ها ممکن است تا زمان انتشار بروزرسانی افزونه ها، در ویرایشگر جدید درست عمل نکنند یا استایل ها و پیش نمایش آن ها به درستی نمایش داده نشود. بنابراین پیش از فعالسازی ویرایشگر جدید در وبسایت خود باید چک کنید که افزونه جانبی مد نظر شما آپدیت متناسب با ادیتور جدید المنتور ارائه داده یا خیر. واگر ارائه داده حتما از آخرین ورژن آن استفاده کنید.
آیا باید المنتور را به نسخه 4 بروزرسانی کنیم؟
ویرایشگر ورژن 4 در حال حاضر به صورت یک قابلیت Beta در المنتور وجود دارد که باید از طریق تنظیمات المنتور آن را فعال کرد. یعنی هنوز تبدیل به ادیتور پیش فرض المنتور نشده، بنابراین فعالسازی آن هنوز الزامی نشده اما مهم است که بدانیم در چه پروژه هایی بهتر است فعال شود.
چه سایتهایی بهتر است به المنتور 4 مهاجرت کنند؟
سایت های جدید و سایت های بزرگ و سنگین بهترین کاندید برای استفاده از المنتور 4 هستند. در سایت های جدید که هنوز صفحات زیادی ندارند با مهاجرت به ویرایشگر جدید می توانند از قابلیت های مفید و مدرن المنتور استفاده کنند. در سایت های بزرگ نیز می توان با بهینه سازی های انجام شده در ادیتور جدید المنتور کارایی و پرفورمنس نهایی سایت را افزایش داد.
چه سایتهایی فعلاً المنتور 3 را نگه دارند؟
سایت های قدیمی که دارای افزونه ها و قالب سفارشی و غیراستاندارد هستند که آپدیت جدیدی هم برای افزونه و قالب ها ارائه نشده؛ نباید فعلا به المنتور 4 مهاجرت کنند. و باید صبر کنند تا توسعه دهندگان قالب و افزونه ها نسخه جدید و سازگار با ادیتور جدید را منتشر کند.
نحوه فعالسازی و استفاده از ویرایشگر جدید المنتور 4
در پیشخوان وردپرس در پنجره المنتور> ویرایشگر> تنظیمات تب نگارش 4 روی دکمه تجربه جدید را فعال کنید بزنید. یک باکس پیش از فعالسازی نمایش داده می شود که نکاتی در خصوص ادیتور ورژن 4 را توضیح می دهد که با کلیک روی خواندم و متوجه شدم دکمه فعال روشن می شود.
در صورت تمایل می توانید از همین مسیر ویرایشگر جدید المنتور را غیرفعال کنید.
سوالات متداول درباره ویرایشگر جدید المنتور نسخه 4
برای استفاده از ادیتور جدید المنتور باید کدنویسی بلد باشیم؟
هنگام کار با ویرایشگر جدید المنتور نیازی به کدنویسی css و html ندارید.
آیا می توان این ویرایشگر را روی سایت مشتری فعال کرد؟
درست است که توسعه دهندگان المنتور ادعا کرده اند که روی سایت های واقعی هم می توانید نسخه حاضر رو فعال کنید. اما ادیتور جدید المنتور هنوز در حالت بتا هست و ممکن است باگ هایی در سایت ایجاد کند بنابراین فعلا توصیه نمی شود که در سایت مشتری و سایت های واقعی فعال کنید.
بعد از فعالسازی المنتور نسخه 4 امکان استفاده همزمان از ورژن 3 هم وجود دارد؟
بله داخل یک صفحه می توانید هم از المان های ورژن 4 و هم ورژن 3 به صورت همزمان استفاده کنید.
جمعبندی: آیا ویرایشگر المنتور 4 ارزش استفاده دارد؟
ویرایشگر جدید المنتور 4 سریع تر و روان تر است و کدهای بهینه تری تولید می کند. ساختار مدرن و حرفه ای دارد بنابراین قطعا برای سایت های جدید ارزش استفاده دارد. اما در سایت های قدیمی به دلیل احتمال اختلال و ناسازگاری با افزونه هایی که آپدیت جدید ارائه نکردند؛ بهتر است دست نگه دارید و فعلا المنتور 4 را فعال نکنید یا اینکه قبلا از فعالسازی در سایت اصلی، داخل محیط تستی یا استیجینگ سازگاری را بررسی کنید.
یک پاسخ
عالی