نحوه ریسپانسیو جدول‌های وردپرس با اسکرول افقی در نسخه موبایل

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

مرحله ۱: اضافه کردن این CSS

کد CSS زیر رو داخل فایل style.css قالب‌ت یا از مسیر نمایش → سفارشی‌سازی → CSS اضافی (Additional CSS) قرار بده:

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-bottom: 1em;
}

.table-scroll table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

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

مرحله ۲: رپ‌کردن خودکار همه جدول‌ها با JavaScript

برای اینکه مجبور نشی به‌صورت دستی دور هر جدول یک <div class="table-scroll"> بذاری، می‌تونی از این اسنیپت JS استفاده کنی:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("table").forEach(table => {
      if (!table.parentElement.classList.contains("table-scroll")) {
        const wrapper = document.createElement("div");
        wrapper.className = "table-scroll";
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
      }
    });
  });
</script>

می‌تونی این کد رو داخل فایل footer.php قالب‌ت و درست قبل از تگ </body> قرار بدی، یا با استفاده از یک افزونه‌ی اسنیپت کد، یا از بخش Custom Code المنتور این اسکریپت رو لود کنی.

اگر به footer.php دسترسی نداری یا از المنتور استفاده نمی‌کنی

در خیلی از قالب‌های وردپرس، می‌تونی کد JavaScript رو مستقیماً داخل فایل footer.php یا از طریق قابلیت Custom Code در المنتور پرو قرار بدی.
اما اگر به این بخش‌ها دسترسی نداری (مثلاً قالب رایگان یا المنتور نسخه رایگان استفاده می‌کنی)، می‌تونی این اسکریپت رو به‌صورت امن از طریق فایل functions.php قالب‌ت (ترجیحاً چایلد تم) لود کنی. برای این کار کد زیر رو اضافه کن:

// Add custom table wrapper script to frontend
function custom_wrap_tables_script() {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("table").forEach(table => {
          if (!table.parentElement.classList.contains("table-scroll")) {
            const wrapper = document.createElement("div");
            wrapper.className = "table-scroll";
            table.parentNode.insertBefore(wrapper, table);
            wrapper.appendChild(table);
          }
        });
      });
    </script>
    <?php
}
add_action('wp_footer', 'custom_wrap_tables_script');

نکته: بدون به‌هم‌ریختن اسکرول عمودی!

برخلاف بعضی ترفندها که روی display: block برای <table> تکیه می‌کنن، این روش رفتار طبیعی اسکرول عمودی رو حفظ می‌کنه و توی همه مرورگرهای مدرن بدون مشکل کار می‌کنه.