ممکنه وقتی با موبایل وارد سایت میشی، جدول ها از صفحه بیرون زده یا نصفشون دیده نشه؛ این یعنی سایت واکنش گرا نیست. طراحی واکنش گرا باعث میشه سایت خودش رو با اندازه صفحه نمایش هماهنگ کنه تا محتوا همیشه مرتب و خوانا باشه.
با توجه به اینکه بیش از 60% کاربران با موبایل وب گردی می کنن، واکنش گرایی دیگه یک ویژگی اختیاری نیست و روی تجربه کاربری و سئو تأثیر مستقیم داره. افزونه wpDataTables این قابلیت رو به صورت پیش فرض داره و بهت اجازه میده ستون ها رو برای موبایل یا تبلت پنهان یا نمایش بدی، بدون اینکه دادهها حذف بشن؛ کاربرا می تونن با کلیک روی «+» همه داده های مخفی رو ببینن.
تو این آموزش، با هم یاد می گیریم چجوری با استفاده از wpDataTables جدول هایی کاملاً واکنش گرا بسازیم تا سایتت روی هر دستگاهی به صورت مرتب و حرفه ای نمایش داده بشن.
چرا جداول واکنش گرا مهم اند؟
جداول بزرگ و غیر واکنش گرا چند مشکل اساسی ایجاد می کنن:
-
خوانایی پایین: کاربران موبایل مجبورن به چپ و راست اسکرول کنن که باعث خستگی و کاهش تمرکز میشه.
-
کاهش سرعت بارگذاری و تجربه کاربری: نمایش تمام ستون ها روی موبایل باعث سنگینی جدول و کند شدن صفحه میشه.
-
تاثیر منفی روی سئو: موتورهای جستجو اهمیت زیادی به تجربه موبایلی میدن و سایت هایی با جداول غیر واکنش گرا ممکنه رتبه پایین تر بگیرن.
استفاده از جداول واکنش گرا باعث میشه ستون های ضروری همیشه نمایش داده بشن و داده های تکمیلی به شکل جمع شونده در دسترس کاربر باشن. این ساختار باعث کاهش نرخ پرش و افزایش تعامل کاربران میشه.
مزیت های wpDataTables
افزونه wpDataTables این قابلیت رو به صورت پیش فرض داره. چه داده ها از پایگاه داده MySQL باشه و چه از Excel یا CSV، می تونی مشخص کنی کدوم ستون ها روی موبایل و تبلت نمایش داده بشن و کدوما پنهان بمونن.
ویژگی مهم اینه که ستون های پنهان واقعاً حذف نمیشن. کاربران می تونن با کلیک روی دکمه «+» یا حتی روی سلول های خاص داده های مخفی رو ببینن. این روش نه تنها خوانایی جدول رو حفظ می کنه بلکه تجربه کاربری رو به شکل حرفه ای ارتقا میده
چرا ستونها باید پنهان یا نمایش داده بشن؟
در جداول بزرگ، همه ستون ها روی موبایل نمایش داده بشن، جدول سنگین و غیرقابل خوانا میشه. اما با پنهان کردن ستون های کم اهمیت و نمایش ستون های کلیدی:
-
کاربران سریع تر به داده های مهم دسترسی پیدا می کنن.
-
احتمال اسکرول افقی کاهش پیدا می کنه و تجربه موبایلی روان تر میشه.
-
سرعت بارگذاری جدول بهبود پیدا میکنه، که مستقیماً روی SEO تأثیر مثبت داره.
این انتخاب ستون ها مثل یک الگوریتم اولویتبندی UX عمل می کنه: ستون هایی که بیشترین ارزش برای تصمیم گیری کاربر دارند، همیشه نمایش داده میشن و ستون های تکمیلی فقط در صورت نیاز در دسترس هستند.
ساخت جداول وردپرس با افزونه wpDataTables
-
اول از همه، با استفاده از Table Creation Wizard یه جدول جدید بساز (منبع داده اش می تونه هر چی باشه).
-
بعد از ساخت، برو به تنظیمات جدول و از تب نمایش (Display) گزینهی Responsiveness رو فعال کن.
-
روی اعمال (Apply) بزن تا تنظیمات ذخیره بشن.
حالا وقتشه مشخص کنی توی موبایل یا تبلت، کدوم ستون ها نمایش داده بشن
تنظیم نمایش ستون ها در دستگاه های مختلف
در تنظیمات هر ستون، دو تا گزینه مهم داری:
-
مخفی در تبلت ها: اگه فعالش کنی، اون ستون توی تبلت دیده نمیشه (اما با کلیک روی “+” داده ها باز میشن).
-
مخفی در موبایل ها: مثل بالایی، ولی برای نمایشگر های کوچیک تر.
میتونی خیلی راحت از آیکن زرد رنگ تنظیمات هم به این گزینه ها دسترسی داشته باشی. فقط یادت نره حداقل یه ستون رو برای هر دستگاه قابل نمایش بذاری، وگرنه جدولت خالی دیده میشه
تست واکنش گرایی جدول
حالا که تنظیمات رو ذخیره کردی، کد کوتاه جدول رو توی یه برگه یا نوشته بذار و صفحه رو باز کن. اگه مرورگر رو کوچیک و بزرگ کنی، می بینی که جدول خودش رو با اندازه صفحه وفق میده:
-
دسکتاپ: همه چیز کامله و همه ستون ها دیده میشن.
-
تبلت: بعضی ستون ها پنهان میشن، ولی با زدن دکمه “+” میتونی اطلاعات مخفی رو ببینی.
-
موبایل: فقط ستون های ضروری نشون داده میشن و بقیه با یه کلیک در دسترسن.
قابلیت جدید و کاربردی در نسخه 4.4
تو نسخه جدید افزونه، فقط با دکمه «+» سر و کار نداری! حالا می تونی انتخاب کنی که کاربر با کلیک روی ردیف یا حتی روی یه سلول خاص هم داده های پنهان رو باز کنه. کافیه این گزینه رو از تب Display بعد از فعال کردن واکنش گرایی تنظیم کنی.
بینش عمیق و کاربرد حرفه ای
وقتی با موبایل یا تبلت وارد یک سایت میشیم و جدول ها از صفحه بیرون میزنن یا نصفشون دیده نمیشه، این نه فقط یک مشکل ظاهری است بلکه نشونه ضعف در تجربه کاربری و طراحی واکنشگ راست.
اما مسئله مهم تر اینه که واکنش گرایی فقط ظاهر جدول نیست. انتخاب اینکه کدوم ستون ها نمایش داده بشن یا مخفی بمونن میتونه رفتار کاربران و عملکرد سایت رو به شکل ملموس تحت تأثیر قرار بده .
سخن آخر
همون طور که دیدی، با افزونه wpDataTables میتونی جداولی بسازی که نه تنها زیبا و منظمن، بلکه روی هر دستگاهی کاملاً واکنش گرا نمایش داده میشن. این یعنی تجربه کاربری حرفه ای تر و ماندگاری بیشتر کاربر تو سایت و در نهایت رتبه بهتر تو گوگل!
حالا که یاد گرفتی چطور با افزونه wpDataTables جدول هایی حرفه ای و واکنش گرا بسازی، وقتشه یه قدم جلوتر بری! افزونه های وردپرس فوق العاده ای وجود دارن که میتونن ظاهر، سرعت و امکانات سایتت رو چند برابر کنن.
اگه می خوای با بقیه افزونه های کاربردی و اورجینال آشنا بشی، حتماً یه سر به صفحه افزونه های وردپرس در SourceSoft بزن و ابزارهای حرفه ای بعدی سایتت رو انتخاب کن!
