افزونه Ninja Tables

افزونه Ninja Tables

افزونه Ninja Tables یک افزونه پیشرفته و مدرن جدول ساز وردپرس است. شما برای ساخت جدول توسط این افزونه نیاز به هیچ دانش HTML و CSS ندارید و می توانید هر نوع جدول HTML که بخواهید را با سازنده ستون قدرتمند آن بسازید و همچنین ظاهر جدول خود را در دستگاه های مختلف ببینید. افزونه Ninja Tables دارای بهترین استایل فرانت اند شامل Footables، Bootstrap 3، Bootstrap 4 و Symmetric UI است و بک اند روی VueJS و VueRouter به عنوان SPA ساخته شده است.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه Ninja Tables می پردازیم.

در افزونه Ninja Tables همه چیز از ساخت جدول گرفته تا پیکربندی تنظیمات، ایمپورت کردن از CSV، تنظیم مجدد ستون ها و غیره در زمان واقعی اتفاق می افتد. همچنین به دلیل بارگذاری JS و CSS کمتر، رندر کردن جدول فرانت اند هم سریعتر انجام می گیرد. از آنجا که این افزونه برای بارگذاری داده فرانت اند با Ajax ادغام شده است، بنابراین می تواند هزاران سطر جدول را بدون اینکه بر زمان بارگذاری صفحه تأثیر بگذارد، اداره کند. همانطور که می دانید استفاده از افزونه های باکیفیت و خوب کدنویسی شده یکی از بهترین روش ها برای افزایش سرعت وردپرس است.

?برخی از ویژگی های این افزونه عبارتند از:

• ساخت جدول های کاملاً رسپانسیو
• پیکربندی آسان و ساده جدول ها
• دارا بودن تسهیلات دوپلیکت کردن جدول ها
• قابلیت ایمپورت و اکسپورت کردن
• ساخت جدول های سئو دوستانه
• شورت کد دوستانه
• قابلیت فیلتر کردن سفارشی
• و بسیاری ویژگی های دیگر

❇️آموزش افزونه Ninja Tables و نحوه ساخت جدول های حرفه ای در وردپرس

ابتدا افزونه را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

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

برای ساخت اولین جدول خود روی دکمه Create your first table کلیک کنید.

یک صفحه پاپ آپ مشابه شکل زیر نشان داده می شود.

این صفحه فرم اضافه کردن جدول جدید است که شامل عنوان و توضیحات جدول می باشد. فرم را پر کرده و روی دکمه Add کلیک کنید تا جدول جدید ساخته شود.

بعد از کلیک روی دکمه Add به صفحه اضافه کردن سطرها و ستون ها در افزونه Ninja Tables هدایت می شوید. در این صفحه چند تب مختلف قرار دارد که در ادامه آموزش به بررسی این تب ها می پردازیم. اولین تب که بعد از کلیک کردن روی دکمه Add نشان داده می شود، تب Table Rows است.

❇️آموزش تنظیم ستون های جدول در افزونه Ninja Tables

در ابتدا در تب Table Rows تنها دکمه Add Column برای ساخت ستون ها وجود دارد.

با کلیک بر روی این دکمه صفحه ای مشابه شکل زیر نشان داده می شود.

در این صفحه می توانید تنظیمات اولیه ساخت ستون مانند نام ستون، کلید ستون (کلید ستون به صورت خودکار بر اساس نام ستون ساخته می شود)، نوع داده ای که می خواهید در ستون وارد کنید و نوع نمایش آن در صفحه نمایش های مختلف (Responsive breakpoint) را پیکربندی کنید.

افزونه Ninja Tables پنج نقطه شکست (breakpoint) مختلف برای کاربران خود ارائه می دهد تا داده ها را با فرمت جدولی نشان دهند. این ویژگی یک ویژگی قدرتمند افزونه Ninja Tables است تا رسپانسیو بودن جدول های ساخته شده در سایت را تضمین کند. گزینه هایی که در قسمت Responsive breakpoint در اختیار کاربران قرار داده شده است شامل موارد زیر می باشند:

• Always show in all device: اگر این گزینه انتخاب شود، ستون های جدول در تمام دستگاه ها نشان داده می شوند.
• Initial hidden Mobile: این گزینه اجازه می دهد تا ستون ها در همه دستگاه ها به جز دستگاه های تلفن همراه نشان داده شوند. در دستگاه تلفن همراه ستون در زیر آیکون (+) پنهان خواهد شد. اگر بازدیدکننده روی آیکون (+) کلیک کند، ستون پنهان شده ظاهر می شود.
• Initial hidden Mobile and Tab: این گزینه به ستون اجازه می دهد تا در همه دستگاه ها به جز دستگاه تلفن همراه و تبلت نشان داده شود. در دستگاه های تلفن همراه و تبلت، ستون در زیر آیکون (+) پنهان می شود. اگر بازدید کننده روی آیکون (+) کلیک کند، ستون پنهان شده ظاهر می شود.
• Initial hidden Mobile, Tab, and all Regular Computer: اگر این گزینه انتخاب شود، داده های ستون در تمام دستگاه ها زیر آیکون (+) پنهان می شود. بازدید کنندگان برای دیدن اطلاعات باید روی آیکون (+) کلیک کنند.
• Totally hidden on all device: اگر این گزینه را انتخاب کنید، ستون ها در تمام دستگاه ها پنهان می شوند.

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

همچنین در نسخه Pro افزونه می توانید در تب های دیگر این صفحه تنظیمات بیشتری داشته باشید. در تب تنظیمات Advanced (پیشرفته) می توانید چندین گزینه پیشرفته برای پیکربندی ستون های خود داشته باشید. تب Conditional Formatting (فرمت بندی مشروط) به شما امکان می دهد شرایطی را برای قالب بندی ستون های خود به روش های مختلف ارائه دهید. با استفاده از تب Transform Value (تبدیل مقادیر) می توانید مقادیر را به دیگری تبدیل کنید.در انتها روی دکمه Add Column کلیک کنید.

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

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

بخش Table Rows برای ایجاد ستون ها و قرار دادن داده ها در ستون های ایجاد شده در افزونه Ninja Tables استفاده می شود. در ادامه آموزش به بررسی تب Table Confirmation می پردازیم.

❇️ویرایش ستون ها و اضافه کردن ستون جدید

تب Table Confirmation در واقع تب تأیید ستون است. در این تب می توانید با کلیک کردن روی دکمه Add Column یک ستون جدید اضافه کنید.

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

پس از وارد کردن مقادیر فوق روی دکمه “Add Column” کلیک کنید تا ستون اضافه شود.

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

ادامه آموزش به بررسی تب Table Design در افزونه Ninja Tables اختصاص دارد.

❇️آموزش طراحی ظاهر جدول در افزونه Ninja Tables

قبل از هر چیز لازم است در مورد عملکردهای تب Tables Design اطلاعات لازم را داشته باشید.

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

در سایدبار سمت چپ صفحه سه گزینه طراحی برای پیکربندی جداول وجود دارد که عبارتند از: Table colors، Styling و Other.

اولین گزینه Styling است که دارای 3 بخش مختلف می باشد.

• در بخش Select Styling Library می توانید کتابخانه ای که می خواهید برای استایل دهی جداول با آن کار کنید را انتخاب نمایید. این کتابخانه ها عبارتند از: Bootstrap 3، Symmetric UI و Bootstrap 4.
• بخش دوم Styles است که استایل های Hover rows (هاور کردن ردیف ها)، Striped rows (ردیف های خط خط)و Vertically centered table cell contents (تراز عمودی و مرکزی محتوای سلول های جدول) به صورت پیش فرض انتخاب شده است. در این قسمت می توانید هر نوع استایلی که بخواهید را انتخاب کنید.
• بخش آخر Features است که ویژگی های مختلفی را مشخص می کند. کافی است هر ویژگی که مورد نظر شما است را فعال کنید.

تب Table Colors دارای دو قسمت Pre Defined Scheme و Custom Scheme است.

در قسمت Pre Defined Scheme می توانید رنگ مورد نظر خود را از بین 13 رنگ مختلف انتخاب کنید.

قسمت Custom Schemex به شما امکان انتخاب ترکیب رنگی دلخواه را می دهد. با استفاده از این گزینه می توانید در قسمت خاصی از جدول رنگ ها را تغییر دهید. البته این گزینه مربوط به نسخه Pro افزونه است.

آخرین قسمت در تب Table Design افزونه Ninja Tables که به آموزش آن می پردازیم، تب Other است. این تب دارای 5 بخش مختلف است که عبارتند از: Pagination Items Per Page, Pagination Position, Select Sorting Method, Row Details, Extra CSS Class for the Table

Pagination Items Per Page به شما امکان می دهد تعداد ردیف های مورد نظر خود در جدول را محدود کنید.  Pagination Position محلی که شماره صفحه بندی در آن قرار دارد یا نشان داده می شود را تعیین می کند. Row Details مربوط به رسپانسیو بودن است و آخرین بخش Extra CSS Class به شما امکان اضافه کردن کدهای CSS اضافی را می دهد.

تب ویرایش فرانت اند یا Frontend Editing مربوط به قابلیت های نسخه پرمیوم افزونه Ninja Tables است بنابراین از آموزش آن صرف نظر می کنیم.

❇️درون ریزی و برون بری اطلاعات جدول

افزونه Ninja Tables دارای این قابلیت است که فایل های CSV را به صورت جدول ایمپورت کند. برای این کار کافی است در تب Import/Export روی دکمه Browse کلیک کرده و فایل مورد نظر خود را انتخاب کنید. سپس روی دکمه Import from CSV کلیک کنید.

برای ایمپورت کردن داده از فایل CSV به یکی از جداول موجود در سایت باید ساختار هدر فایل CSV مشابه اطلاعات موجود در عنوان یا هدر جدول باشد. برای آگاهی از ساختار هدر فایل CSV خود می توانید نمونه ساده فایل CSV را با کلیک بر روی دکمه “Download Sample CSV” بارگیری کنید.

همچنین می توانید جداول سایر افزونه های جدول ساز مانند افزونه TablePress را ایمپورت کنید.

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

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

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

در ویرایشگر گوتنبرگ وردپرس روی آیکون (+) که مربوط به اضافه کردن بلوک است کلیک کنید. بلوک Ninja Tables را جستجو کرده و روی آن کلیک نمایید.

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

در ویرایشگر کلاسیک وردپرس پس از نصب و فعال سازی افزونه در قسمت بالای ویرایشگر آیکون افزونه Ninja Tables اضافه می شود.

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

در این صفحه جدول مورد نظر خود را پیدا کرده و روی آن کلیک کنید. شورت کد مربوط به جدول به صفحه ویرایشگر اضافه می شود.

همچنین در پیشخوان وردپرس می توانید با رفتن به مسیر Ninja Tables » All Tables به شورت کد جداول ساخته شده در قسمت ShortCode دسترسی پیدا کنید.

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