با ریسپانسیو کردن جداول وردپرس می توانید جدول های زیبایی همراه با نمایی زیبا در انواع دستگاه های متصل به اینترنت داشته باشید.

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

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

در این آموزش از وردپرس نارنجی به شما آموزش می دهم که چگونه بدون استفاده از افزونه اقدام به ریسپانسیو کردن جداول وردپرس در محتواهای خود کنید.

ریسپانسیو کردن جداول وردپرس

برای این منظور ابتدا از وب سایت خود یک فایل پشتیبان تهیه کنید و سپس چنانچه امکان ویرایش فایل ها از طریق پیشخوان را دارید، به منوی نمایش >> ویرایشگر پوسته بروید و فایل style.css قالب نصبی خود را ویرایش کنید.

چنانچه امکان ویرایش فایل های وب سایت وردپرسی خود را از طریق پیشخوان ندارید، برای ریسپانسیو کردن جداول وردپرس به هاست خود رفته و در مسیر نصب وردپرس به آدرس wp-content/themes بروید و در پوشه پوسته نصبی خود، فایل style.css را ویرایش نمایید.

table{

    width:100%;

    max-width:100%;

}

فرقی نمی کند با چه روشی فایل style.css را ویرایش کرده اید، برای ریسپانسیو کردن جداول وردپرس، قطعه کد بالا را به آن اضافه کنید.

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

@media screen and (max-width:980px){ table{ display:block; overflow-x:auto; } }

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

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