حل مشکل راست‌چین WPBakery در حالت ردیف تمام‌عرض

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

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

چرا ردیف تمام‌عرض WPBakery در سایت فارسی به‌هم می‌ریزه؟

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

WPBakery برای ساخت ردیف تمام‌عرض، اندازه و جای ردیف رو با JavaScript محاسبه می‌کنه. JavaScript همون کدیه که بعضی بخش‌های تعاملی صفحه رو داخل مرورگر اجرا می‌کنه. اگه نسخه افزونه قدیمی باشه، قالب جهت راست‌چین رو درست مدیریت نکنه یا یکی از بخش‌های والد ویژگی overflow: hidden داشته باشه، ردیف ممکنه از محدوده صفحه بیرون بزنه یا قسمتی از اون بریده بشه.

مرحله اول: WPBakery رو به‌روز کنید

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

برای دیدن نسخه نصب‌شده، وارد پیشخوان وردپرس بشید و از مسیر «افزونه‌ها ← افزونه‌های نصب‌شده» WPBakery Page Builder رو پیدا کنید. اگه به‌روزرسانی معتبری در دسترسه، اول از سایتتون بکاپ بگیرید و بعد افزونه رو به‌روز کنید. نسخه‌های دست‌کاری‌شده یا فایل‌های منبع نامعتبر می‌تونن امنیت سایت رو به خطر بندازن یا باعث ناسازگاری بشن.

مرحله دوم: تنظیمات ردیف تمام‌عرض رو بررسی کنید

صفحه‌ای رو که مشکل داره با WPBakery باز کنید. بعد تنظیمات همون ردیفی رو انتخاب کنید که از صفحه بیرون زده و گزینه Row stretch رو دوباره روی حالت موردنظرتون بذارید. گزینه Stretch row فقط پس‌زمینه ردیف رو تمام‌عرض می‌کنه، ولی Stretch row and content محتوای داخل ردیف رو هم تا عرض صفحه می‌کشه.

اگه نمی‌خواید متن و تصویر به لبه‌های صفحه بچسبن، معمولاً Stretch row انتخاب بهتریه. تغییرات رو ذخیره کنید و صفحه رو توی یک پنجره ناشناس مرورگر ببینید. توی راهنمای رسمی ردیف‌های تمام‌عرض WPBakery هم تفاوت این حالت‌ها توضیح داده شده.

مرحله سوم: تداخل قالب و ویژگی Overflow رو پیدا کنید

اگه افزونه به‌روزه ولی مشکل هنوز دیده می‌شه، احتمالاً قالب یا CSS سفارشی سایت روی محاسبه عرض ردیف اثر گذاشته. CSS همون کدیه که ظاهر، فاصله و اندازه بخش‌های صفحه رو مشخص می‌کنه. طبق مستندات WPBakery، ویژگی overflow: hidden روی یکی از بخش‌های والد می‌تونه نذاره ردیف تمام‌عرض درست نمایش داده بشه.

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

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

راه‌حل موقت با افزونه رایگان Code Snippets

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

برای این کار از افزونه رایگان Code Snippets استفاده می‌کنیم. اول از سایتتون بکاپ بگیرید. بعد وارد «افزونه‌ها ← افزودن افزونه تازه» بشید، Code Snippets رو جست‌وجو کنید و افزونه‌ای رو نصب کنید که سازنده اون Code Snippets Pro هست. در آخر روی «فعال نمایید» بزنید.

بعد از فعال‌سازی، از منوی پیشخوان وارد «Snippets ← Add New» بشید. یک نام مثل «اصلاح ردیف تمام‌عرض WPBakery در حالت راست‌چین» بنویسید و کد زیر رو توی بخش Code بذارید. تگ آغازین <?php رو به کد اضافه نکنید؛ افزونه خودش این بخش رو مدیریت می‌کنه.

/**
 * Temporary RTL fix for WPBakery full-width rows.
 */
function mihanwp_wpbakery_full_width_rtl_fix() {
    if ( ! is_rtl() ) {
        return;
    }
    ?>
    <script>
    jQuery( window ).on( 'load resize', function() {
        jQuery( '[data-vc-full-width="true"]' ).each( function() {
            var $row = jQuery( this );
            $row.css( 'right', $row.css( 'left' ) ).css( 'left', 'auto' );
        } );
    } );
    </script>
    <?php
}
add_action( 'wp_footer', 'mihanwp_wpbakery_full_width_rtl_fix', 100 );

گزینه اجرای کد در بخش عمومی سایت یا Run snippet everywhere رو انتخاب کنید و روی «Save Changes and Activate» بزنید. حالا صفحه مشکل‌دار رو هم توی دسکتاپ و هم توی موبایل بررسی کنید. اگه چیدمان بخش دیگه‌ای خراب شد، قطعه‌کد رو غیرفعال کنید. یادتون نره این کد فقط یک راه‌حل موقته و جای رفع ناسازگاری قالب یا به‌روزرسانی افزونه رو نمی‌گیره.

بعد از افزودن کد، کش سایت رو خالی کنید

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

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

جمع‌بندی

برای حل مشکل راست‌چین WPBakery، اول افزونه رو از منبع معتبر به‌روز کنید و تنظیم Row stretch رو دوباره بررسی کنید. اگه مشکل ادامه داشت، تداخل قالب، CSS سفارشی و ویژگی overflow: hidden در بخش‌های والد رو بررسی کنید. قطعه‌کد این آموزش هم می‌تونه موقتاً مشکل رو برطرف کنه، ولی بهتره بعد از پیدا کردن علت اصلی اون رو غیرفعال کنید.

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

سؤالات متداول

تیم تولید محتوا

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