آموزش افزونه wpDataTables و ساخت جدول های حرفه ای در وردپرس

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

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

 جداول می توانند از هر منبع داده ای شامل MySQL، Google Spreadsheet ، آرایهPHP ، فایلExcel ، فایلCSV ، منابع ورودی JSON و XML ایجاد شوند. همچنین می توانید کوئری های MySQL را در پایگاه داده وردپرس یا هر پایگاه داده MySQL دیگری بدون داشتن هیچ گونه آگاهی از SQL تولید کنید.

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

رای دستیابی به این ویژگی ها داشتن حداقل اطلاعات کدنویسی نیاز است و بروز نگه داشتن مرتب جداول نیز نیاز به تکرار کد نویسی دارد. wpDataTables یکی از بهترین افزونه های جدول ساز وردپرس است که تمام کارها را بدون نیاز به کدنویسی برای شما انجام می دهد. تنها کاری که باید انجام دهید این است که فقط یک بار آن را تنظیم کنید.

در این آموزش افزونه wpDataTables را مورد بررسی قرار داده و نحوه ساخت جدول با استفاده از این افزونه را توضیح می دهیم.

آموزش افزونه wpDataTables و نحوه ساخت حرفه ای جدول در وردپرس

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

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام wpDataTables در پیشخوان وردپرس اضافه می شود.

قبل از شروع به ساخت اولین جدول توسط افزونه wpDataTables بهتر است ابتدا با نحوه تنظیمات جدول آشنا شوید.

برای پیکربندی تنظیمات جداول در افزونه wpDataTables در منوی wpDataTables پیشخوان وردپرس روی زیرمنوی Settings کلیک کنید.

صفحه تنظیمات افزونه wpDataTables از چهار تب مختلف تشکیل شده است که هریک مربوط به تنظیمات بخشی از جداول است. در ادامه آموزش به بررسی نحوه تنظیمات و پیکربندی افزونه wpDataTables می پردازیم.

آموزش تنظیمات افزونه wpDataTables

Main Settings

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

Date format: در این قسمت می توانید از میان 20 قالب تاریخ مشترک یک قالب تاریخ را برای استفاده در ستون های تاریخ انتخاب کنید.

Interface language: افزونه wpDataTables برای رابط کاربری اصلی اش از 45 زبان زنده در سراسر جهان برای ویژگی های اصلی رابط پشتیبانی می کند. شما در این قسمت می توانید زبان مورد نظر خود را انتخاب کنید.

توجه داشته باشید که تنها المان های اصلی جدول در فرنت اند ترجمه می شوند. به این معنی که ابزارهای جدول مانند “Copy” ، “Print” ، “Excel” و غیره و برچسب های فیلترینگ پیشرفته ترجمه نمی شوند. در صورت تمایل می توانید خودتان آنها را ترجمه کنید.

Time format: در این قسمت می توانید فرمت 12 ساعته یا 24 ساعته را برای نمایش زمان انتخاب کنید.

Base skin: افزونه wpDataTables دارای چندین پوسته درون ساخته است که می توانید از آنها برای تنظیم ظاهر کلی جدول در فرانت اند مانند رنگ ها، دکمه ها و غیره استفاده کنید. در این قسمت می توانید یکی از پوسته های Aqua، Graphite، Material ،Light ، Purple و Dark را انتخاب کنید.

Number format: با استفاده از این قسمت می توانید فرمت خروجی اعداد را انتخاب کنید. به این صورت که برای جداکننده هزارگان و همچنین برای جدا کردن اعشار از چه علامتی استفاده شود.

Render advanced filter: در این قسمت می توانید موقعیت قرار گیری ابزارهای فیلترینگ پیشرفته را هنگام فیلتر کردن انتخاب کنید. دو گزینه در اختیار شما قرار داده شده است. می توانید ابزارهای فیلترینگ را در هدر یا فوتر جدول قرار دهید.

Decimal places: در این قسمت می توانید تعداد اعشار اعداد را تعیین کنید به عنوان مثال با انتخاب 2 اعداد به صورت 10,05 نشان داده می شوند. این تنظیمات می تواند برای ستون های خاصی نادیده گرفته شود.

CSV delimiter: از نسخه 2.2.3 افزونه wpDataTables، انتخاب جدا کننده CSV در اختیار کاربران قرار گرفته است. پس از ایجاد جدول به صفحه تنظیمات افزونه رفته و در قسمت CSV delimiter، جدا کننده ای را انتخاب کنید که با فایل شما مطابقت دارد. سپس روی Apply کلیک کنید. افزونه جدا کننده را تشخیص داده و جدول را طبق آن می سازد.

گزینه های Tablet width و Mobile width در نسخه پرمیوم افزونه wpDataTables عرضه شده است و برای داشتن این ویژگی ها باید افزونه خود را ارتقا دهید. در ادامه آموزش توضیح مختصری راجع به هریک خواهیم داد.

Tablet width: با استفاده از تنظیمات این قسمت می توانید عرضی را که افزونه به عنوان عرض تبلت تشخیص می دهد، دوباره تعریف کنید. از این ویژگی می توان برای سوئیچ کردن به حالت رسپانسیو در دسکتاپ ها نیز استفاده کرد و عرض را تنظیم نمود (به عنوان مثال 1920). مقداری که در این قسمت وارد می شود باید به پیکسل باشد.

Mobile width: این تنظیمات به شما امکان می دهد تا عرضی را که افزونه به عنوان عرض دستگاه تلفن همراه تشخیص می دهد، مجدداً تعریف کنید.

Tables per admin page: در این قسمت می توانید تعیین کنید که چند جدول در صفحه ادمین افزونه wpDataTables قابل مشاهده باشند. این تنظیمات برای “wpDataCharts” نیز استفاده می شود.

Align numbers to the right: اگر این گزینه را فعال کنید، تمام اعداد در ستونهای جدول راست چین می شوند.

گزینه های Maximum functions label، Minimum functions label، Average functions label و Sum functions label در نسخه پرمیوم افزونه عرضه شده اند و با استفاده از آنها می توانید آیکون هایی که برای نمایش جمع، میانگین، مینیمم و ماکزیمم به کار برده می شود را سفارشی سازی کنید.

Include full bootstrap front-end and back-end: اگر bootstrap.js در یکی از فایل های قالب شما از قبل موجود باشد، توصیه می شود که این گزینه را غیرفعال کنید. غیرفعال کردن این گزینه از بروز خطا جلوگیری می کند.

Prevent deleting tables in database: با فعال کردن این گزینه جداول حتی بعد از پاک کردن افزونه نیز باقی می مانند. جداول به صورت پیش فرض پس از پاک کردن افزونه در دیتابیس ذخیره می شوند.

Show plugin credentials below tables: با فعال کردن این گزینه خط Powered by wpDataTables در پایین جداول نشان داده می شود.

قسمت بعدی آموزش مربوط به تب Separate database connection است. این تب در نسخه پرمیوم افزونه wpDataTables قابل استفاده است و شامل نسخه رایگان نمی شود.

Separate DB connection

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

اتصالات پایگاه داده جداگانه برای دیتابیس های MySQL ، MS SQL و PostgreSQL وجود دارد.

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

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

تب بعدی در صفحه تنظیمات افزونه wpDataTables مربوط به Color and font settings tab است. ادامه آموزش به بررسی این تب اختصاص دارد.

Color and font settings tab

در این قسمت می توانید طراحی فرانت اند افزونه خود را پیکربندی کنید. لیستی از تنظیماتی که می توانید در این صفحه برای تغییر ظاهر جداول خود در افزونه wpDataTables استفاده کنید عبارتند از:

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

قسمت بعدی به آموزش تب Custom JS and CSS در صفحه تنظیمات افزونه wpDataTables اختصاص دارد.

Custom JS and CSS

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

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

در قسمت Custom wpDataTables CSS می توانید قوانین CSS سفارشی مانند مخفی کردن بلوک جستجو، صفحه بندی و بسیاری موارد دیگر را به صفحاتی که شامل جداول wpDataTables هستند، وارد کنید.

Use minified wpDataTables Javascript: فایل های مینیفای شده به صورت پیش فرض به صفحات پیوست می شوند. در صورت تمایل می توانید این گزینه را غیرفعال کنید. به عنوان مثال برای تغییر جاوااسکریپت ویرایش فایل های مینیفای نشده بسیار راحت تر است.

حال که با نحوه تنظیمات جداول آشنا شدید در ادامه آموزش نحوه ساخت اولین جدول با افزونه wpDataTables را توضیح می دهیم.

ساخت جدول در افزونه wpDataTables

برای ساخت اولین جدول خود در افزونه wpDataTabes در پیشخوان وردپرس به مسیر wpDataTables » Create a Table بروید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

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

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

پس از انتخاب گزینه Create a table linked to an existing data source روی دکمه Next کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

در این صفحه می توانید منبع داده مورد نظر خود (MySQL، Excel، CSV، Google Spreadsheet، JSON، XML، Serialized PHP array) را انتخاب کرده و جدول خود را بسازید.

1- ابتدا در قسمت Table Title input یک نام برای جدول خود انتخاب کنید. این نام به شما کمک خواهد کرد که جدول خود را راحت تر پیدا کنید.

2- در قسمت Input data source type منبع داده مورد نظر خود را انتخاب کنید. منابع داده ای که در افزونه wpDataTables موجود هستند عبارتند از: MySQL، Excel، CSV، Google Spreadsheet، JSON، XML و Serialized PHP array. در این آموزش فایل Excel را به عنوان منبع داده انتخاب می کنیم.

3- با انتخاب Excel file باکسی ظاهر می شود که می توانید مسیر فایل را در آن قرار دهید. با کلیک بر روی دکمه Browse فایل مورد نظر خود را انتخاب کنید.

پس از انجام تمام مراحل فوق روی دکمه Apply کلیک کنید.

با کلیک بر روی دکمه Apply ساختار جدول توسط افزونه wpDataTables خوانده شده و متاداده ستون ها آغاز می شود و صفحه ای مشابه شکل زیر نشان داده می شود.

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

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

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

قسمت هدر بلوک تنظیمات جدول شامل ابزارها و دکمه های زیر است:

1- ورودی نام جدول: برای تغییر نام جدول wpData می توانید از این قسمت استفاده کنید.

2- دکمه شورت کد جدول: هنگامی که جدول ذخیره می شود، یک کد کوتاه برای آن ایجاد می شود. با کلیک بر روی این دکمه شورت کد جدول کپی می شود.

3- دکمه کشویی نمایش/عدم نمایش تنظیمات جدول: با کلیک بر روی این دکمه می توانید بلوک تنظیمات جدول را نشان داده یا مخفی کنید. این دکمه را می توان برای عدم نمایش تنظیمات جدول هنگام ویرایش داده های جدول استفاده کرد.

4- دکمه Cancel: با کلیک بر روی این دکمه می توانید کلیه تغییرات ذخیره نشده را لغو کنید.

5-دکمه Apply: با کلیک بر روی این دکمه می توانید تمام تغییرات را اعمال کنید تا تاثیر آنها را روی جدول ببینید.

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

Data Source

این تب مشابه صفحه قبل است و شامل تنظیماتی است که به شما امکان تعریف منبعی که داده باید از آن خوانده شود را می دهد.

Display

تب Display بلوک تنظیمات جدول به کاربر امکان تعریف تمام پارامترهای مربوط به ظاهر جدول را می دهد.

Table title یا عنوان جدول: اگر این گزینه روشن باشد، عنوان جدول در بالای آن به صورت تگ H3 ظاهر می شود.

Default rows per page (ردیف های پیش فرض در هر صفحه): این قسمت مشخص می کند که چند ردیف به صورت پیش فرض در جدول قابل مشاهده خواهد بود.

 Info block (بلوک اطلاعات): فعال کردن این گزینه باعث می شود که اطلاعات مربوط به میزان ورودی ها در زیر جدول نشان داده شود.

Responsiveness (پاسخگویی): این گزینه مربوط به نسخه Pro افزونه است و مشخص کننده رسپانسیو بودن جدول است. اگر این گزینه فعال باشد، مشخص می کند که کدام ستون ها باید بر روی تلفن همراه و تبلت ها جمع شوند.

Rows per page (ردیف در هر صفحه): فعال کردن این گزینه باعث می شود که کنترل تغییر تعداد ردیف ها در هر صفحه در بالای جدول نشان داده شود.

  Limit table width (محدوده عرض جدول): اگر این گزینه روشن باشد، عرض جدول محدود به عرض صفحه خواهد بود. اگر می خواهید عرض ستون ها را به صورت دستی تنظیم کنید باید این گزینه را فعال کنید.

 Hide until loaded(پنهان تا زمانی که بارگیری شود): با فعال کردن این گزینه داده های جدول تا زمانیکه صفحه فرانت اند در مرحله اولیه است، نشان داده نمی شود.

Scrollable: با فعال کردن این گزینه یک نوار پیمایش افقی در پایین جدول نشان داده می شود. این گزینه برای جداول بزرگ چند ستونی مفید است. همچنین سوئیچ “Limit table width” را غیرفعال می کند.

Word wrap: با فعال کردن “Limit table width”، این گزینه ظاهر می شود و مشخص می کند که آیا تمام کلمات را در سلول ها در یک خط نشان دهید یا آنها را در چند خط به نمایش بگذارید.

ادامه آموزش به بررسی تب مرتب سازی و فیلترینگ در صفحه تنظیمات جدول افزونه wpDataTables اختصاص دارد.

Sorting and Filtering

این تب شامل تنظیمات مربوط به جستجو ، مرتب سازی و فیلترهای پیشرفته در هر ستون است.

 Advanced column filters (فیلترهای ستون پیشرفته): این تنظیم مربوط به نسخه Pro افزونه است و با فعال کردن آن می توانید فیلترهای پیشرفته هر ستون را در هدر، فوتر یا به صورت یک فرم در بالای جدول ظاهر کنید.

Sorting (مرتب سازی): با فعال کردن این گزینه می توانید مرتب سازی را برای تمام جدول اعمال کنید. اگر این گزینه فعال باشد باز هم می توانید مرتب سازی هر ستون را به صورت جداگانه غیرفعال کنید. اگر غیرفعال باشد هیچ ستونی قابل مرتب سازی نیست.

Main search block (بلوک جستجوی اصلی): با استفاده از این گزینه می توانید بلوک جستجوی جدول را در گوشه بالا سمت راست جدول نمایش دهید.

Table Tools

در این تب می توانید ابزارهای جدول را برای برون بری داده های جدول پیکربندی کنید.

Enable Table Tools: فعال کردن این گزینه بلوک ابزارهای جدول را برای هر جدول فعال می کند.

Buttons: در این قسمت می توانید دکمه هایی که می خواهید در بلوک ابزارهای جدول نشان داده شوند را انتخاب کنید.

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

آموزش وارد کردن جدول افزونه wpDataTables در نوشته ها و برگه های وردپرس

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

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

در ویرایشگر گوتنبرگ وردپرس روی آیکون + که مربوط به اضافه کردن بلوک است، کلیک کنید. بلوک wpDataTables را جستجو کرده و روی آن کلیک نمایید.

با کلیک بر روی این بلوک، تنظیمات بلوک در سایدبار سمت چپ صفحه ظاهر می شود.

از قسمت Select wpdatatable جدول مورد نظر خود را پیدا کرده و روی آن کلیک کنید. شورت کد مربوط به آن در بلوک wpDataTables ظاهر می شود.

سپس نوشته را انتشار دهید یا بروزرسانی کنید.

در ویرایشگر کلاسیک وردپرس روی آیکون افزونه wpDataTables که در نوار ابزار بالای صفحه قرار دارد، کلیک کنید.

یک پنجره پاپ آپ مطابق شکل زیر ظاهر می شود.

جدول مورد نظر خود را انتخاب کرده و روی دکمه “قبول” کلیک کنید.

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

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه