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

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

آموزش افزونه Ninja Tables

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

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

افزونه Ninja Tables دارای بهترین استایل فرانت اند شامل Footables، Bootstrap 3، Bootstrap 4 و Symmetric UI است و بک اند روی VueJS و VueRouter به عنوان SPA ساخته شده است.

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

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

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

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

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

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

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

آموزش افزونه Ninja Tables

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

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

آموزش افزونه Ninja Tables

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

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

تب Table Rows

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

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

در این صفحه می توانید تنظیمات اولیه ساخت ستون مانند نام ستون، کلید ستون (کلید ستون به صورت خودکار بر اساس نام ستون ساخته می شود)، نوع داده ای که می خواهید در ستون وارد کنید و نوع نمایش آن در صفحه نمایش های مختلف (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 برای وارد کردن داده در ستون های ساخته شده است.

آموزش افزونه Ninja Tables

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

تب Table Confirmation

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

آموزش افزونه Ninja Tables

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

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

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

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

تب Table Design

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

آموزش افزونه Ninja Tables

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

در سایدبار سمت چپ صفحه سه گزینه طراحی برای پیکربندی جداول وجود دارد که عبارتند از: 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 رنگ مختلف انتخاب کنید.

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

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

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

تب Import-Export

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

آموزش افزونه Ninja Tables

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

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

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

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

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

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

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

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

آموزش افزونه Ninja Tables

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

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

آموزش افزونه Ninja Tables

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

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

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

دانلود افزونه
صفحه افزونه
امتیاز دادن به این نوشته:
  • میزان رضایت کاربران
  • میزان خوانایی متن
  • تصاویر مرتبط

درباره ی مینا قدسی

مطلب پیشنهادی

افزونه All-in-One WP Migration

افزونه All-in-One WP Migration و انتقال سایت وردپرس به یک سرور جدید

افزونه All-in-One WP Migration یکی از قدرتمندترین و ساده ترین افزونه های وردپرس برای انتقال …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *