ساخت جدول های رسپانسیو HTML در وردپرس

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

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

هنگامی که یک جدول را به عنوان بهترین گزینه شناسایی کردید، باید چه کنید؟ مطمئن شوید که بدون توجه به اندازه دستگاهی که جدول را مشاهده می کند، به زیبایی رندر می شود.

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

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

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

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

برخی از تم ها نسبت به بقیه، از جدول های رسپانسیو پشتیبانی داخلی بهتری دارند. به عنوان مثال، قالب TwentySixteen. با این حال، همه تم ها مانند TwentySixteen طراحی نشده اند.

بیایید نگاهی بیندازیم که چگونه Twenty Sixteen یک جدول HTML را هنگام رندر کردن در یک دستگاه دستی مدیریت می کند. در اینجا کمی HTML وجود دارد که جدولی با پنج ستون و شش ردیف ایجاد می کند.

بعنوان مثال، جدول زیر محبوب ترین سیستم های مدیریت محتوا را طبق W3Techs نشان می دهد.

<table>
     <caption>Most Popular Content Management Systems | July 2016</caption>
     <thead>
          <tr>
               <th>CMS</th>
               <th>Usage</th>
               <th>Change Since 6/1/16</th>
               <th>Market Share</th>
               <th>Change Since 6/1/16</th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td>WordPress</td>
               <td>26.5%</td>
               <td>+0.1%</td>
               <td>59.5%</td>
               <td>No change</td>
          </tr>
          <tr>
               <td>Joomla</td>
               <td>2.6%</td>
               <td>-0.1%</td>
               <td>5.9%</td>
               <td>No change</td>
          </tr>
          <tr>
               <td>Drupal</td>
               <td>2.2%</td>
               <td>No change</td>
               <td>4.9%</td>
               <td>No change</td>
          </tr>
          <tr>
               <td>Magento</td>
               <td>1.3%</td>
               <td>No change</td>
               <td>2.8%</td>
               <td>No change</td>
          </tr>
          <tr>
               <td>Blogger</td>
               <td>1.2%</td>
               <td>No change</td>
               <td>2.6%</td>
               <td>No change</td>
          </tr>
     </tbody>
</table>

هنگامی که این جدول در یک برگه یا نوشته با تم child TwentySixteen فعال شده است،در لپ تاپ یا مانیتور دسکتاپ بسیار خوب به نظر می رسد. کاملاً واضح است که TwentySixteen شامل یک طراحی متفکرانه روی جدول ها است.

ما می‌توانیم از حالت دستگاه  Chrome Developer Tools Device Mode استفاده کنیم تا ببینیم در یک دستگاه کوچک‌تر چگونه به نظر می‌رسند.

همانطور که میبینید، خوب به نظر نمیرسد.

توسعه دهندگان TwentySixteen دارای استایل های CSS هستند که جدول ها را در وردپرس رسپانسیو می کند. اگر این جدول فقط شامل دو یا سه ستون باشد، احتمالاً بسیار خوب به نظر می رسد.

با این حال، این جدول شامل پنج ستون است که برای استایل جدول پیش‌فرض موجود با TwentySixteen بسیار زیاد است.

خرید هاست وردپرس با ارزان ترین قیمت

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

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

برای رسپانسیو بودن جدول ها در وردپرس به سه چیز نیاز داریم:

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

توجه به این نکته مهم است که جدول باید به درستی قالب بندی شده باشد تا این کار کار کند. این اسکریپت برای جستجوی سلول‌های عنوان در یک عنصر thead و اختصاص آنها به عنوان ویژگی‌های HTML به سلول‌های داده در یک عنصر tbody طراحی شده است.

توجه : اگر جدولی ایجاد کنید که شامل عناصر thead و tbody نباشد، کد کار نخواهد کرد.

کد جاوا اسکریپت:

var headertext = [];

        var headers = document.querySelectorAll("thead");

        var tablebody = document.querySelectorAll("tbody");

        for (var i = 0; i < headers.length; i++) {

            headertext[i] = [];

            for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {

                var current = headrow;

                headertext[i].push(current.textContent);

            }

        }

        for (var h = 0, tbody; tbody = tablebody[h]; h++) {

            for (var i = 0, row; row = tbody.rows[i]; i++) {

                for (var j = 0, col; col = row.cells[j]; j++) {

                    col.setAttribute("data-th", headertext[h][j]);

                }

            }

        }

کد CSS:

@media screen and (max-width: 600px) {
    table {
      width:100%;
    }
    thead {
      display: none;
    }
    tr:nth-of-type(2n) {
      background-color: inherit;
    }
    tr td:first-child {
      background: #f0f0f0;
      font-weight:bold;
      font-size:1.3em;
    }
    tbody td {
      display: block;
      text-align:center;
    }
    tbody td:before { 
      content: attr(data-th); 
      display: block;
      text-align:center;  
    }
}

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

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

در اینجا نحوه پیش نمایش جدول با پیش نمایش iPhone5 در Google Chrome را میبینید.

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

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

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

• ابتدا مطمئن شوید که از طرح زمینه child(فرزند) استفاده می‌کنید تا دفعه بعد که طرح زمینه خود را به‌روزرسانی می‌کنید، کار خود را از دست ندهید.
• CSS را در فایل style.css تم کپی و جایگذاری کنید.
• جاوا اسکریپت را به عنوان یک فایل جداگانه ذخیره کنید و آن را در فهرست تم خود آپلود کنید.
• چهارم، از تابع wp_enqueue_script در فایل themes functions.php خود استفاده کنید تا منبع جاوا اسکریپت را به تم خود اضافه کنید، مطمئن شوید که در حین انجام این کار، in_footer را روی true تنظیم کنید.

مشکل‌ترین بخش فرآیند اضافه کردن فایل اسکریپت با wp_enqueue_script است، اما می‌توانیم این مرحله را کمی آسان‌تر کنم.

در اینجا یک قطعه کد وجود دارد که می توانید آن را به فایل functions.php اضافه کنید که با فرض فایل جاوا اسکریپت 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 چگونه باید باشد.

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

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

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

• Visualizer: Tables and Charts Manager for WordPress
• TablePress
• wpDataTables
• Data Tables Generator by Supsystic
• Ninja Tables – Best WP DataTables Plugin for WordPress

کدام راه گزینه برای شما مناسب است؟

این سوال به چند مورد بستگی دارد. چند وقت یکبار از جداول استفاده می کنید؟ چه نوع مجموعه ای از داده ها را در جداول HTML ارائه می کنید؟ آیا افزونه ای می خواهید که تمام کارهای سنگین را انجام دهد یا دوست دارید کدهای وب سایت خود را به صورت دستی انجام دهید؟

نحوه پاسخ دادن به این سؤالات به تعیین اینکه کدام یک از این ابزارها برای وب سایت وردپرس شما مناسب است کمک می کند.

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