آموزش فعال‌سازی Atomic Editor (نسخه ۴) در المنتور
در دنیای طراحی وب با وردپرس، سرعت بارگذاری سایت یکی از مهم‌ترین عوامل در تجربه کاربری (UX) و سئو (SEO) است. المنتور در نسخه ۴ خود، ویرایشگر جدیدی با نام Atomic Editor (یا Editor V4) معرفی کرده است که با ساختاری مبتنی بر CSS و خروجی سبک‌تر، به بهبود عملکرد سایت کمک می‌کند. در این مقاله با این قابلیت و روش فعال‌سازی آن آشنا می‌شوید.
Atomic Editor در المنتور چیست؟
Atomic Editor نسل جدید ویرایشگر المنتور است. در این ویرایشگر، المنت‌های جدیدی به نام Atomic Elements (مثل Heading و Div Block) در کنار قابلیت‌هایی مانند Classes (کلاس‌ها)، Variables (متغیرها) و Components (کامپوننت‌ها) در اختیار شما قرار می‌گیرد.
مهم‌ترین مزایای آن عبارت‌اند از:
- ساختار DOM تمیزتر: تعداد تگ‌ها و لایه‌های تو در تو کمتر می‌شود.
- استایل‌دهی مبتنی بر کلاس: یک کلاس را یک بار تعریف می‌کنید و در چند المنت دوباره استفاده می‌کنید.
- تنظیم ریسپانسیو دقیق‌تر: هر ویژگی استایل را می‌توانید برای هر دستگاه جداگانه تنظیم کنید.
نکته مهم این است که المنت‌های قدیمی (نسخه ۳) و المنت‌های Atomic را می‌توان روی یک صفحه با هم استفاده کرد. البته میزان بهبود عملکرد در این حالت متفاوت است و هرچه المنت‌های بیشتری به Atomic تبدیل شوند، خروجی سبک‌تر خواهد بود.
وضعیت پیش‌فرض در المنتور ۴
در المنتور ۴.۰ و بالاتر، قابلیت‌های Atomic در نصب‌های جدید به‌صورت پیش‌فرض فعال هستند. اما در سایت‌هایی که از قبل ساخته شده‌اند، باید این قابلیت را به‌صورت دستی فعال کنید. اگر هم بخواهید، هر زمان می‌توانید آن را غیرفعال کنید.
آموزش گام‌به‌گام فعال‌سازی Atomic Editor
قبل از شروع، از سایت خود بکاپ کامل بگیرید و در صورت امکان، ابتدا روی نسخه تست (Staging) امتحان کنید. همچنین افزونه المنتور باید حداقل نسخه ۳.۲۹ یا بالاتر باشد.
- وارد پیشخوان وردپرس شوید.
- به منوی المنتور > Editor > Settings بروید.
- وارد تب Atomic Editor شوید.
- روی دکمه Try out the new experience کلیک کنید.
- ویرایشگر را باز کنید. المنت‌های جدید Atomic در بالای پنل المنت‌ها نمایش داده می‌شوند.
برای غیرفعال کردن، از همین مسیر (المنتور > Editor > Settings > Atomic Editor) اقدام کنید.
عیب‌یابی و رفع مشکلات رایج
ممکن است پس از فعال‌سازی، برخی از المان‌های سایت (مثل دکمه‌ها یا فاصله‌ها) به‌درستی نمایش داده نشوند. برای رفع این مشکل، مراحل زیر را انجام دهید:
بازسازی فایل‌های CSS المنتور
المنتور گاهی فایل‌های قدیمی CSS را نگه می‌دارد. به مسیر المنتور > ابزارها (Tools) بروید و روی دکمه بازسازی (Regenerate CSS & Data) کلیک کنید. توجه کنید که نام این دکمه در نسخه‌های مختلف المنتور کمی متفاوت است.
پاکسازی کش افزونه‌های بهینه‌ساز
اگر از افزونه‌هایی مثل WP Rocket یا LiteSpeed Cache استفاده می‌کنید، کش آن‌ها را به‌طور کامل (Purge All) پاک کنید. سپس کش مرورگر را هم خالی کنید و سایت را دوباره بررسی کنید.
مشکلات شناخته‌شده
Atomic Editor هنوز در حال توسعه است و برخی المنت‌ها (مثل Grid و Loop) فعلاً به‌صورت Atomic در دسترس نیستند. همچنین برخی کاربران در بعضی نسخه‌ها مشکلاتی مثل ذخیره نشدن تنظیمات سایت (Site Settings) گزارش کرده‌اند. به همین دلیل، قبل از فعال‌سازی روی سایت اصلی حتماً بکاپ بگیرید و المنتور را به آخرین نسخه به‌روز کنید.
نکته حرفه‌ای درباره تأثیر Atomic روی سرعت
خروجی سبک‌تر یعنی HTML و CSS کمتری به مرورگر کاربر ارسال می‌شود. این موضوع زمان دانلود و پردازش صفحه را کم می‌کند و می‌تواند به بهبود شاخص‌های Core Web Vitals مثل LCP کمک کند. البته میزان بهبود به ساختار صفحه، تعداد المنت‌های Atomic و تنظیمات کش و هاست شما بستگی دارد. بنابراین پس از فعال‌سازی، سرعت سایت را با ابزارهایی مثل PageSpeed Insights یا GTmetrix مقایسه کنید.
سخن پایانی
Atomic Editor گامی مهم در مسیر ساخت سایت‌های سریع‌تر و منظم‌تر با المنتور است. اگر سایت جدیدی می‌سازید، این قابلیت به‌صورت پیش‌فرض در اختیار شماست. در سایت‌های قدیمی هم می‌توانید با بکاپ‌گیری و تست مرحله‌ای، به‌تدریج به سمت المنت‌های Atomic حرکت کنید.
