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

اگر پس از به‌روزرسانی WPBakery Page Builder، محیط ویرایشگر در پیشخوان وردپرس به‌هم ریخته است، ممکن است دکمه‌های ویرایش، تکثیر یا حذف ردیف‌ها در جای نامناسبی نمایش داده شوند یا دسترسی به بعضی ابزارها دشوار شود. این مشکل می‌تواند به ناسازگاری استایل‌های افزونه با قالب، افزونه‌های دیگر یا نسخه وردپرس مربوط باشد.

در این راهنما، دلایل احتمالی به‌هم‌ریختگی ویرایشگر و روش‌های بررسی و رفع آن را توضیح می‌دهیم. یک نمونه کد CSS نیز ارائه شده است که می‌تواند در بعضی چیدمان‌های قدیمی، موقعیت کنترل‌های ردیف را اصلاح کند. توجه داشته باشید که این کد برای تمام قالب‌ها و نسخه‌های WPBakery راهکار قطعی نیست.

چرا ویرایشگر WPBakery به‌هم می‌ریزد؟

افزونه WPBakery Page Builder که در گذشته با نام Visual Composer شناخته می‌شد، امکان ساخت صفحات وردپرس با استفاده از ردیف‌ها، ستون‌ها و المان‌های آماده را فراهم می‌کند. با کمک این صفحه‌ساز می‌توان بسیاری از بخش‌های یک صفحه را بدون نوشتن مستقیم کد طراحی کرد.

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

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

دلایل احتمالی مشکل

• ناسازگاری قالب و افزونه: ممکن است قالب برای نسخه قدیمی‌تری از صفحه‌ساز طراحی شده باشد.
• تداخل CSS: استایل‌های قالب یا افزونه‌های دیگر ممکن است ظاهر کنترل‌های مدیریتی WPBakery را تغییر دهند.
• ناسازگاری نسخه‌ها: نسخه صفحه‌ساز، وردپرس، PHP یا افزونه‌های وابسته ممکن است با یکدیگر سازگار نباشند.
• تداخل JavaScript: خطاهای جاوااسکریپت می‌توانند عملکرد بعضی کنترل‌های ویرایشگر را مختل کنند.
• به‌روزرسانی ناقص یا فایل‌های کش‌شده: گاهی بارگذاری فایل‌های قدیمی یا ناقص باعث می‌شود رابط ویرایشگر به‌درستی نمایش داده نشود.

روش‌های رفع به‌هم‌ریختگی ویرایشگر WPBakery

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

۱. از سایت بکاپ تهیه کنید

پیش از تغییر فایل‌های PHP یا CSS، از فایل‌ها و پایگاه داده سایت بکاپ بگیرید. اگر سایت فروشگاهی یا پرترافیک است، بهتر است ابتدا تغییرات را در محیط آزمایشی بررسی کنید.

۲. سازگاری قالب و افزونه را بررسی کنید

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

۳. تداخل افزونه‌ها را بررسی کنید

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

۴. خطاهای مرورگر را بررسی کنید

صفحه ویرایش را باز کنید و ابزار توسعه‌دهنده مرورگر را با کلید F12 اجرا کنید. در بخش Console به دنبال خطاهای JavaScript بگردید. در بخش Network نیز می‌توانید بررسی کنید که فایل‌های CSS و JavaScript صفحه‌ساز با خطای بارگذاری یا وضعیت‌هایی مانند ۴۰۴ مواجه نشده باشند.

۵. کش مرورگر و سایت را پاک کنید

یک بار صفحه را با بارگذاری مجدد کامل باز کنید و در صورت استفاده از افزونه کش یا سامانه CDN، کش مربوط را پاک کنید. اگر مشکل همچنان باقی است، به سراغ راهکارهای بعدی بروید. پاک کردن کش به‌تنهایی ناسازگاری واقعی کدها را برطرف نمی‌کند.

رفع مشکل چیدمان کنترل‌های ردیف با CSS

در بعضی نسخه‌های قدیمی ویرایشگر، مشکل به موقعیت کنترل‌های ردیف مربوط است. اگر بررسی‌ها نشان دادند که مشکل از چیدمان CSS همین کنترل‌هاست، می‌توانید کد زیر را در محیط آزمایشی امتحان کنید. این نمونه بر اساس ساختار قدیمی کنترل‌های WPBakery نوشته شده است و ممکن است در نسخه‌های جدید یا قالب‌های متفاوت به اصلاح نیاز داشته باشد.

بهتر است کد را در فایل functions.php پوسته فرزند قرار دهید، نه پوسته اصلی. تغییر فایل پوسته اصلی ممکن است با به‌روزرسانی قالب از بین برود.

add_action( 'admin_head', 'addwebsite_wpbakery_controls_css_fix' );

function addwebsite_wpbakery_controls_css_fix() {
    echo '<style>
        .vc_controls-row .vc_row_edit_clone_delete .vc_control {
            float: left !important;
        }

        .vc_controls > div {
            position: relative !important;
        }
    </style>';
}

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

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

آیا تغییر CSS قالب همیشه مشکل را رفع می‌کند؟

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

همچنین، اضافه کردن کد به functions.php به‌خودی‌خود تضمین نمی‌کند که مشکل حل شود. این روش فقط راهی برای بارگذاری استایل سفارشی در بخش مدیریت وردپرس است. ابتدا باید مشخص شود که مشکل واقعا به همان استایل‌ها مربوط است.

جمع‌بندی

به‌هم‌ریختگی رابط WPBakery Page Builder ممکن است به ناسازگاری قالب، تداخل استایل‌ها، خطاهای JavaScript یا مشکل در بارگذاری فایل‌ها مربوط باشد. ابتدا از سایت بکاپ تهیه کنید، سازگاری نسخه‌ها و خطاهای مرورگر را بررسی کنید و سپس در صورت نیاز سراغ اصلاح CSS بروید.

کد ارائه‌شده در این مقاله یک راهکار محدود برای برخی چیدمان‌های قدیمی است، نه نسخه‌ای عمومی برای همه سایت‌ها. اگر مشکل با این مراحل رفع نشد، نسخه وردپرس، نسخه WPBakery، نام قالب و تصویر یا خطای دقیق ویرایشگر می‌تواند به تشخیص راهکار مناسب کمک کند.