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

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

تصویر(1)

نحوه نمایش جداول در وردپرس

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

ایجاد جدول واکنش گرا در وردپرس به صورت دستی

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

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

• یک جدول HTML با فرمت مناسب
• کمی کد جاوا اسکریپت برای مرتبط کردن سلول های عنوان با سلول های داده ای که در همان ستون جدول ظاهر می شوند.
• مجموعه قوانین ساده CSS که زمان کاهش عرض نمایشگر از یک مقدار تعیین شده، اعمال می شوند.

تصویر(2)

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

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

تصویر(3)

افزودن مستقیم کد به قالب را می توانید طی 4 مرحله زیر انجام دهید:

• مطمئن شوید که از Child Theme استفاده می کنید تا در زمان بروزرسانی قالب، تنظیماتی که روی آن اعمال کرده اید از بین نرود.
• محتوای کد CSS را در فایل style.css قالب قرار دهید.
• جاوا اسکریپت را به عنوان یک فایل مجزا ذخیره نموده و آن را در پوشه قالب خود بارگذاری نمایید. 
• از تابع wp_enqueue_script در فایل functions.php قالب خود استفاده کنید تا بتوانید فایل جاوا اسکریپت را به قالب بیفزایید و در عین حال، مطمئن شوید که مقدار in_footer را به true تغییر داده اید.

پیچیده ترین بخش این فرآیند، افزودن فایل اسکریپت با استفاده از wp_enqueue_script است. البته، می توانید به روش ساده تر نیز این روند را انجام دهید. کد زیر نحوه استفاده از تابع wp_enqueue_script برای اضافه کردن فایل جاوا اسکریپت responsive-tables.js را نشان می‌دهد:  

<?php
function responsive_tables_enqueue_script() {
    wp_enqueue_script( 'responsive-tables', get_stylesheet_directory_uri() . '/responsive-tables.js', $deps = array(), $ver = false, $in_footer = true );
}
add_action( 'wp_enqueue_scripts', 'responsive_tables_enqueue_script' );

ممکن است نحوه نوشتن کدها در فایل functions.php قالب‌های مختلف کمی متفاوت باشد اما با استفاده از کد فوق، می‌توانید یک ایده کلی در خصوص نحوه نوشتن تابع enqueue در functions.php به دست آورید. بعد از انجام این چهار مرحله، فایل‌های CSS و JavaScript در هر صفحه از سایت شما قابل استفاده خواهند بود و جداول موجود در سایت، واکنش‌گرا می شوند. 

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

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

تصویر(4)

جمع بندی  

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