ساخت جدول واکنش‌گرا در وردپرس بدون کدنویسی

برای ساخت جدول واکنش‌گرا در وردپرس لازم نیست کدنویسی بلد باشید. برای چند ردیف اطلاعات ساده، بلوک جدول خود وردپرس کارتون رو راه می‌اندازه. ولی اگه جدول بزرگی دارید و می‌خواید در موبایل مرتب دیده بشه یا امکاناتی مثل جست‌وجو، مرتب‌سازی و صفحه‌بندی داشته باشه، افزونه Data Tables Generator by Supsystic انتخاب کاربردی‌تریه.

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

برای ساخت جدول در وردپرس به افزونه نیاز دارید؟

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

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

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

آشنایی با افزونه Data Tables Generator by Supsystic

Data Tables Generator by Supsystic برای ساخت و مدیریت جدول در وردپرسه. نسخه رایگانش قابلیت‌های اصلی مثل جست‌وجو، مرتب‌سازی، صفحه‌بندی و تنظیم نمایش واکنش‌گرا رو ارائه می‌کنه. با این امکانات، بازدیدکننده راحت‌تر اطلاعات موردنظرش رو در جدول پیدا می‌کنه.

این افزونه نسخه Pro هم داره، ولی لازم نیست از همون اول سراغش برید. قابلیت‌هایی مثل نمودار، فرمول، ویرایش جدول از بخش جلویی سایت و بعضی روش‌های ورود، خروج یا اتصال به منابع داده در این نسخه ارائه می‌شن. چون سازنده ممکنه تقسیم امکانات رو تغییر بده، قبل از خرید حتماً قابلیت موردنیازتون رو در صفحه رسمی افزونه بررسی کنید.

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

نصب افزونه Data Tables Generator در وردپرس

1. وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها»، گزینه «افزودن افزونه تازه» رو انتخاب کنید.
2. عبارت Data Tables Generator by Supsystic رو در کادر جست‌وجو بنویسید.
3. نام سازنده رو بررسی کنید و دکمه نصب افزونه رو بزنید.
4. بعد از تموم‌شدن نصب، افزونه رو فعال کنید.
5. منوی افزونه رو در پیشخوان پیدا کنید. بسته به نسخه افزونه، ممکنه نام این منو Data Tables یا Tables by Supsystic باشه.

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

ساخت اولین جدول در وردپرس

ایجاد جدول تازه

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

نوع جدول معمولی رو انتخاب کنید و یک نام مشخص مثل «مقایسه سرویس‌ها» برای جدولتـون بنویسید. این نام بیشتر برای مدیریت خودتونه و کمک می‌کنه بعداً جدول رو راحت پیدا کنید. بعد دکمه Next رو بزنید.

حالا تعداد اولیه ستون‌ها و ردیف‌ها رو وارد کنید. لازم نیست از همین اول تعداد دقیق اون‌ها رو بدونید؛ بعداً هم می‌تونید ردیف یا ستون اضافه و کم کنید.

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

واردکردن اطلاعات داخل جدول

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

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

واکنش‌گرا کردن جدول برای موبایل

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

انتخاب حالت واکنش‌گرایی مناسب

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

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

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

تنظیم عرض جدول در موبایل و کامپیوتر

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

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

بررسی جدول در اندازه‌های مختلف صفحه

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

تنظیم قابلیت‌های کاربردی جدول

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

فعال‌کردن جست‌وجو

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

فعال‌کردن مرتب‌سازی اطلاعات

مرتب‌سازی یا Sorting، ترتیب ردیف‌ها رو بر اساس ستون انتخابی کاربر عوض می‌کنه. مثلاً کاربر می‌تونه قیمت‌ها رو از کم به زیاد بچینه. این قابلیت با صفحه‌بندی فرق داره؛ مرتب‌سازی ترتیب داده‌ها رو تغییر می‌ده، ولی صفحه‌بندی ردیف‌ها رو بین چند صفحه پخش می‌کنه.

تنظیم صفحه‌بندی و تعداد ردیف‌ها

اگه جدولتـون ده‌ها یا صدها ردیف داره، Pagination یا صفحه‌بندی رو فعال کنید. بعد تعداد ردیف‌های هر صفحه رو مشخص کنید. می‌تونید برای شروع ۱۰ یا ۲۰ ردیف رو امتحان کنید و با توجه به طول محتوای سلول‌ها و راحتی کاربر، این عدد رو تغییر بدید.

تنظیم فرمت عدد، ارز، درصد، تاریخ و زمان

اگه نسخه افزونه شما تنظیم فرمت داده رو داره، می‌تونید نمایش عدد، ارز، درصد، تاریخ یا زمان رو برای ستون مناسب تنظیم کنید. قبل از اعمال یک فرمت روی کل ستون، مطمئن بشید همه داده‌های اون از یک نوع هستن. مثلاً کلمه «رایگان» رو با عدد قیمت در یک ستون عددی قاطی نکنید؛ چون ممکنه مرتب‌سازی درست کار نکنه.

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

فعال یا غیرفعال‌کردن کش جدول

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

تغییر ظاهر جدول

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

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

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

نمایش جدول در نوشته یا برگه

افزودن جدول با بلوک اختصاصی گوتنبرگ

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

1. نوشته یا برگه موردنظرتون رو در ویرایشگر وردپرس باز کنید.
2. علامت «+» رو بزنید و نام افزونه یا عبارت Data Table رو جست‌وجو کنید.
3. بلوک افزونه رو اضافه کنید و جدول موردنظرتون رو از فهرست بردارید.
4. پیش‌نمایش صفحه رو باز کنید و جست‌وجو، مرتب‌سازی و نمایش موبایل رو آزمایش کنید.

افزودن جدول با کد کوتاه

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

1. در فهرست جدول‌ها، کد کوتاه جدول موردنظرتون رو کپی کنید.
2. نوشته یا برگه رو باز کنید و یک بلوک «کد کوتاه» به اون اضافه کنید.
3. کد رو بدون تغییر داخل بلوک بذارید.
4. صفحه رو به‌روزرسانی یا منتشر کنید و نتیجه رو در بخش جلویی سایت ببینید.

تفاوت نسخه رایگان و Pro افزونه

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

قابلیت‌هایی مثل نمودار، فرمول، ویرایش جدول از بخش جلویی سایت و بعضی روش‌های ورود، خروج یا اتصال به منابع داده در نسخه Pro ارائه می‌شن. نوع منبع داده و روش همگام‌سازی موردنیازتون هم روی انتخاب نسخه اثر می‌ذاره.

پیش از خرید، دقیق بنویسید به چه قابلیتی نیاز دارید و همون مورد رو در صفحه رسمی Data Tables Generator by Supsystic بررسی کنید. قیمت و تقسیم امکانات ممکنه تغییر کنه، پس تصمیم نهایی رو با توجه به فهرست فعلی سازنده بگیرید.

رفع مشکل‌های رایج جدول در وردپرس

جدول در موبایل از صفحه بیرون می‌زنه

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

مرتب‌سازی یا جست‌وجو کار نمی‌کنه

اول مطمئن بشید Search یا Sorting برای همون جدول فعاله. بعد کش سایت و مرورگر رو پاک کنید. اگه افزونه بهینه‌سازی دارید، فقط برای آزمایش، ترکیب یا تأخیر اجرای JavaScript رو موقتاً غیرفعال کنید. JavaScript کدیه که قابلیت‌های تعاملی مثل جست‌وجو و مرتب‌سازی رو اجرا می‌کنه. وقتی عامل تداخل رو پیدا کردید، تنظیم بهینه‌سازی رو دوباره فعال کنید و فقط فایل یا قابلیت مشکل‌ساز رو کنار بذارید.

تغییرات جدول نمایش داده نمی‌شن

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

کد کوتاه به‌جای جدول دیده می‌شه

مطمئن بشید افزونه فعاله و کد کوتاه رو کامل کپی کرده‌اید. کد رو داخل بلوک «کد کوتاه» بذارید، نه بلوک «کد» یا «HTML سفارشی». اگه جدول حذف شده یا شناسه اون تغییر کرده، کد کوتاه تازه رو از فهرست جدول‌ها بردارید.

فونت و ظاهر جدول با قالب هماهنگ نیست

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

نکته‌های مهم برای ساخت جدول بهتر

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

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

سؤال‌های متداول

جمع‌بندی

اگه یک جدول کوتاه و ساده می‌خواید، بلوک داخلی Table وردپرس سریع‌تر کارتون رو راه می‌اندازه. ولی برای ساخت جدول واکنش‌گرا در وردپرس همراه با جست‌وجو، مرتب‌سازی و صفحه‌بندی، Data Tables Generator امکانات بیشتری بهتون می‌ده.

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

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

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