جداول حرفه ای در وردپرس با Data Tables Generator by Supsystic
در این مقاله به آموزش یکی از قدرتمندترین افزونه های رایگان وردپرس برای ساخت جداول حرفه ای، پیشرفته و واکنش گرا می پردازیم و آن افزونه Data Tables Generator by Supsystic است.
افزونه Data Tables Generator by Supsystic یکی از بهترین افزونه های جدول ساز وردپرس است که به شما اجازه سفارشی سازی جداول را به میزان بسیار زیادی می دهد و تمام نیازهای شما برای ساخت یک جدول حرفه ای و رسپانسیو را برآورده می کند.
آموزش افزونه Data Tables Generator by Supsystic و نحوه ساخت جدول های حرفه ای در وردپرس
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Tables by Supsystic در پیشخوان وردپرس اضافه شده و یک پنجره پاپ آپ حاوی پیام خوش آمد گویی و آموزش افزونه به شما نشان داده می شود.
می توانید با کلیک بر روی دکمه “بستن آموزش”، این پنجره را ببندید.
روی منوی Tables by Supsystic در پیشخوان وردپرس کلیک کنید. با کلیک بر روی این منو صفحه ای مشابه شکل زیر نشان داده می شود.
برای ساخت اولین جدول روی تب “افزودن جدول جدید” در ساید بار سمت راست صفحه کلیک کنید.
یک پنجره مطابق شکل زیر باز می شود.
عنوان جدول را وارد کرده و تعداد سطرها و ستون ها را مشخص کنید. سپس روی دکمه Create کلیک کنید.
جدول به صورت زیر ساخته می شود.
افزونه Data Tables Generator by Supsystic تمام ویژگی های لازم برای سفارشی سازی جدول ها و تطبیق آنها با ساختار سایت را دارد. برای تغییر پیکربندی جدول روی تب تنظیمات در بالای صفحه کلیک کنید.
صفحه تنظیمات افزونه Data Tables Generator by Supsystic برای شما باز می شود.
این صفحه از چهار قسمت مختلف Main، ویژگی ها، Appearane و Text تشکیل شده است که در ادامه آموزش به بررسی آنها می پردازیم.
آموزش تنظیمات اصلی جداول در افزونه Data Tables Generator by Supsystic در تب Main
عناصر جدول
در بخش عناصر جدول می توانید المان هایی از جدول که می خواهید در صفحه سایت شما نمایش داده شوند را انتخاب کنید.
Options
Disable Table Cache: این ویژگی برای مواردی که جدول حاوی شورت کد است مفید می باشد. با فعال کردن این گزینه می توانید مطمئن باشید که این شورت کدها به خوبی اجرا شده و تحت تأثیر کش قرار نمی گیرند.
فرمت های اطلاعات
Use Comma as Delimiter: با فعال کردن این گزینه می توانید اعداد صحیح و اعشاری را در قسمت های قابل ویرایش فرانت اند سایت با یک کاما از یکدیگر جدا کنید.
فرمت عددی: با فعال کردن این گزینه فرمت تمام اعداد در جدول تنظیم می شود.
واحد پول: در این قسمت می توانید فرمت واحد پول مورد نظر خود را وارد کنید. برای هر جدول تنها یک واحد پول را می توانید انتخاب کنید. همچنین در این قسمت می توانید جدا کننده اعداد صحیح و اعشاری و تعداد صفرها در قسمت اعشاری را مشخص کنید. به عنوان مثال 1,000.00 IRR یا 1.00$.
درصد: در این قسمت می توانید فرمت اعداد درصدی را مشخص کنید. به عنوان مثال 10.00% یا 10%.
تاریخ: در این بخش می توانید فرمت تاریخ را مشخص کنید. به عنوان مثال تاریخ با فرمت YYY-MM-DD به صورت 1991-12-25 نشان داده می شود. یا DD.MM.YY به صورت 25.12.91 قابل نمایش است.
Time / Duration: در این قسمت می توانید فرمت ساعت یا مدت زمان را مشخص کنید. به عنوان مثال برای ساعت می توانید فرمت HH:mm که به صورت 18:00 نشان داده می شود یا فرمت hh:mm a که به صورت 6:00 pm نشان داده می شود را انتخاب کنید.
برای مدت زمان می توانید فرمت های hh:mm به صورت 36:40 و hh:mm:ss به صورت 36:40:12 را انتخاب کنید.
تب بعدی در صفحه تنظیمات افزونه Data Tables Generator by Supsystic تب ویژگی ها است. در ادامه آموزش به بررسی این تب می پردازیم.
آموزش ویژگی ها در افزونه Data Tables Generator by Supsystic
در این قسمت می توانید توابع بیشتری را برای کار با جدول فعال کنید. بخش ویژگی ها نیز از قسمت های مختلفی به شرح ذیل تشکیل شده است.
General
حالت واکنشگرا: در این قسمت می توانید چهار گزینه مختلف را انتخاب کنید که شامل موارد زیر هستند:
- حالت واکنش گرای استاندارد: در این مد اگر محتوای جدول به اندازه صفحه نمایش نباشد، تمام ستون ها در زیر یکدیگر قرار گرفته و در هر ردیف فقط یک سلول قرار می گیرد.
- پنهان کردن خودکار ستون: در این مد اگر محتوای جدول متناسب با عرض صفحه نباشد، ستون های جدول از سمت راست و چپ جمع می شوند.
- اسکرول افقی: در این مد اگر عرض جدول بیشتر از صفحه نمایش باشد یک نوار اسکرول افقی ظاهر می شود.
- غیرفعال کردن واکنش گرایی: در این مد طرح بندی پیش فرض جدول ثابت بوده و در هیچ صفحه نمایشی تغییر نمی کند.
اطلاعات جدول: با فعال کردن این گزینه اطلاعات مربوط به ورودی های جدول نشان داده می شود.
مرتب سازی: مرتب سازی داده ها به صورت صعودی و نزولی انجام می شود.
صفحه بندی: با فعال کردن این گزینه، کنترل صفحه فعال می شود و محتوای جدول به صفحات مجزا تقسیم می شود. به این ترتیب کاربران می توانند بین مجموعه صفحات مختلف پرش کنند.
در حال جستجو: جستجوی جدول فعال می شود.
موتور جستجو لیست نکند: ایندکس کردن جدول توسط ربات های جستجو را غیرفعال می کند.
Execute JS Script After Table Load: با فعال کردن این گزینه کدهای جاوااسکریپت سفارشی بعد از لود شدن جدول اجرا می شوند.
بخش های Frontend Fields و Export/Import مربوط به نسخه Pro افزونه Data Tables Generator by Supsystic هستند و در این آموزش به بررسی آنها نمی پردازیم.
تب بعدی در صفحه تنظیمات افزونه Appearance است که بخش بعدی آموزش را به خود اختصاص می دهد.
Appearance
در این قسمت می توانید یک استایل بصری برای جدول خود ایجاد کنید.
Auto Table Width: با فعال کردن این گزینه عرض سلول به صورت خودکار شناسایی شده و عرض ستون های جدول به صورت خودکار برای عرض جدول 100% محاسبه می شود.
در غیر این صورت می توانید عرض جدول را به صورت دستی تنظیم کنید. عرض ستون ها بر طبق گزینه Fixed Table Width انتخاب می شود یا براساس عرض ستون ها در ویرایشگر جدول محاسبه می شود.
Fixed Table Width و Fixed Table Width (mobile): در این قسمت می توانید عرض جدول را به پیکسل یا % تنظیم کنید. اگر گزینه disable را انتخاب کنید عرض جدول ثابت نبوده و براساس محتوای جدول تنظیم می شود.
Align by First Tables: اگر این گزینه فعال شود، این جدول با اولین جدولی که توسط افزونه ساخته شده است هم اندازه می شود. این گزینه فقط در صورتی اعمال می شود که جدول در حالت رسپانسیو نباشد یا حالت رسپانسیو غیرفعال شده باشد. همچنین اگر جدول اول تعداد ستون ها یا تنظیمات متفاوتی داشته باشد، اندازه آنها ممکن است برابر نشود.
جدول جمع و جور: میزان فضای سفید در جدول را کاهش می دهد.
غیرفعال کردن بسته بندی سلول ها: با فعال کردن این گزینه هر کلمه در سلول ها در یک خط قرار می گیرد.
حالت پاراگراف: این حالت به شما امکان می دهد محتوای جدول را به پاراگراف های مجزا تقسیم بندی کنید. برای رفتن به خط بعدی در سلول CTRL+Enter را فشار دهید.
Lightbox: یک لایک باکس به تصاویر اضافه می کند. این ویژگی مربوط به نسخه Pro افزونه است.
حاشیه ها: برای چهار طرف سلول یا یک سطر حاشیه می گذارد. با انتخاب هیچکدام حاشیه ها برداشته می شوند.
ردیف نواری: هایلایت های خودکار برای ردیف های فرد جدول ایجاد می کند.
Highlighting by Mousehover: با فعال کردن این گزینه می توانید ردیف ها را با هاور کردن موس بر روی آنها هایلایت کنید.
ستون ترتیب گزاری هایلایت شود: ستون فعلی ذخیره شده هایلایت می شود.
Hide Table Loader: نمایش آیکون بارگذاری جدول قبل از اینکه جدول به صورت کامل بارگذاری شود غیرفعال می شود.
Table Loader Icon: در این قسمت می توانید آیکون نمایش بارگذاری جدول را انتخاب کنید.
Table Loader Color: در این قسمت می توانید برای آیکون رنگ انتخاب کنید.
Table Styling
Use custom styles: با فعال کردن این قسمت گزینه های سفارشی سازی استایل جدول برای شما فعال می شود. در این قسمت می توانید استایل سفارشی مورد نظر خود را انتخاب کنید. هر گزینه ای که در این قسمت خالی گذاشته شود براساس استایل قالب شما انتخاب می شود.
در این قسمت می توانید تنظیمات مرز بندی های جدول، هدر، سلول، ترازبندی افقی، موقعیت صفحه بندی و بسیاری موارد دیگر را پیکربندی کنید.
تب بعدی در صفحه تنظیمات افزونه Data Tables Generator by Supsystic مربوط به تنظیمات متن و زبان جدول است که تمام قسمت های آن فارسی سازی شده است بنابراین نیازی به آموزش آن نیست.
آموزش اضافه کردن داده به جدول در افزونه Data Tables Generator by Supsystic
برای اضافه کردن داده ها به جدول روی تب “ویریشگر” کلیک کنید. صفحه ای مشابه شکل زیر مشاهده می کنید.
در این صفحه می توانید:
- ردیف و ستون به جدول اضافه کنید
- فونت متن، ایتالیک و بولد بودن متن ها را تنظیم کنید.
- رنگ متن و پس زمینه را مشخص کنید.
- ترازبندی افقی و عمودی را مشخص کنید.
- رسانه شامل ویدئو، عکس، لینک به سلول های جدول وارد کنید.
- یک فرمت برای ردیف انتخاب کنید.
- و بسیاری موارد دیگر
همچنین ویژگی هایی که هر ویرایشگر متنی می تواند داشته باشد شامل موارد زیر را دارا باشید:
- اضافه یا حذف کردن ردیف ها و ستون ها
- دکمه های undo و redo
- تنظیم وضعیت “read-only” برای سلول ها/ردیف ها/ستون ها
- تنظیم ترازبندی
- اضافه یا پاک کردن کامنت ها
- کات و کپی کردن دکمه ها
- و بسیاری موارد دیگر
اگر روی جدول کلیک راست کنید می توانید ویژگی های زیر را داشته باشید:
- اضافه کردن سطر و ستون هر جا که بخواهید.
- بازیابی یا کنسل کردن عملیات ها
- فعال کردن مد “Read-only” برای همه سلول ها، ردیف ها، ستون ها و حتی کل جدول
- ترازبندی متن
- اضافه یا حذف کردن کامنت ها
- فرمت بندی شرطی
حال که جدول خود را با استفاده از افزونه Data Tables Generator by Supsystic ساختید و تنظیمات آن را پیکربندی کردید نوبت به اضافه کردن جدول به نوشته ها و برگه های وردپرس و نمایش آن در سایت می رسد. در ادامه آموزش به بررسی نحوه انجام این کار می پردازیم.
اضافه کردن جدول به نوشته ها و برگه های وردپرس
برای اضافه کردن جدول به نوشته ها و برگه های وردپرس در منوی ناوبری سمت راست صفحه روی Tables کلیک کنید.
در این صفحه تمام جدول هایی که با افزونه Data Tables Generator by Supsystic ساخته شده اند را می توانید ملاحظه کنید. شورت کد جدول مورد نظر خود را کپی کنید.
یک نوشته یا برگه جدید بسازید یا یکی از نوشته ها و برگه های موجود در سایت که می خواهید جدول را در آن قرار دهید را به حالت ویرایش باز کنید.
در ویرایشگر گوتنبرگ وردپرس بلوک کد کوتاه را انتخاب کرده و شورت کد کپی شده را در آن پیست کنید.
در ویرایشگر کلاسیک وردپرس شورت کد کپی شده را در قسمت متنی ویرایشگر (نه قسمت بصری) پیست کنید.
سپس صفحه مورد نظر خود را انتشار دهید.
نسخه Pro افزونه Data Tables Generator by Supsystic ویژگی های بیشتری مانند برون بری فرانت اند به PDF، Excel و CSV را ارائه می دهد. همچنین گزینه های درون ریزی و برون بری را برای جدول های بزرگ ارائه می دهد. از دیگر ویژگی های نسخه Pro می توان به دکمه پرینت، تاریخ جدول، نمودارها و دیاگرام ها و گزینه محدودیت نقش ها اشاره کرد. همچنین می توانید این افزونه را با افزونه WooCommerce و برخی از افزونه های دیگر Supsystic مانند افزونه فرم ساز Supsystic ادغام کنید.
دانلود افزونه
دیدگاه ها