كيفية إنشاء جداول متجاوبة في WordPress
نشرت: 2023-02-12الجداول هي أحد عناصر تصميم مواقع الويب التي يمكن أن تساعدك في عرض كميات كبيرة من المعلومات بأناقة بطريقة منظمة. تعمل بشكل جيد على شاشات الكمبيوتر التقليدية ، ولكن يمكنها في كثير من الأحيان إنشاء تجربة غير مرغوب فيها على الأجهزة المحمولة.
لحسن الحظ ، هناك العديد من الحلول العملية لإنشاء جداول أكثر استجابة. يمكن أن يؤدي استخدام ممارسات التصميم سريعة الاستجابة هذه إلى تحسين تجربة المستخدم (UX) لموقعك. وهذا يعني أن الزوار سيكونون قادرين على عرض البيانات والوصول إليها بسهولة أكبر في جداولك ، بغض النظر عن نوع الجهاز الذي يستخدمونه.
في هذه المقالة ، سنلقي نظرة على معنى جعل الجدول مستجيبًا. سننتقل بعد ذلك إلى طريقتين لإنشاء جداول متجاوبة في WordPress. دعنا نتعمق في!
ما هي الجداول المستجيبة؟
عادةً ما يكون الهدف من الجدول هو عرض الكثير من البيانات بطريقة منطقية. عندما تحاول عرض الجداول على جهاز محمول ، قد تنحرف الأمور عن مسارها. يحدث هذا لأن صفوف الجدول غالبًا ما تكون أعمدة عديدة أكبر مما يمكن لشاشة العرض التعامل معها.
عند إنشاء جدول سريع الاستجابة ، فأنت تقوم بشكل أساسي بإنشاء مجموعة من القواعد لجدول البيانات الأصلي. يمكن لهذه القواعد تحديد نقاط التوقف بناءً على حجم العرض. هذا يعني أنه إذا قام مستخدم بالوصول إلى الجدول الموجود على جهاز أصغر من نقطة التوقف التي قمت بتعيينها ، فسوف يستجيب تخطيط الجدول من خلال إعادة التهيئة ليناسب حجم الشاشة.
يمكن إعادة تنسيق الجداول المتجاوبة عادةً عن طريق إضافة شريط تمرير أو تكديس المعلومات. لا تريد فقط تقليص المعلومات الموجودة في الخلايا وحشرها معًا مع تغير حجم الشاشة ، لأن هذا قد يجعل الجدول غير قابل للقراءة. لحسن الحظ ، ليس من الصعب تحقيق التصميم سريع الاستجابة.
كيفية عمل جدول سريع الاستجابة (بدون البرنامج المساعد)
هناك طريقتان أساسيتان لجعل الجدول مستجيبًا في WordPress. أولاً ، سنلقي نظرة على كيفية إنجاز المهمة بدون مكون إضافي.
سيتطلب ذلك بعض المعرفة بالترميز: على وجه التحديد ، فهم أوراق الأنماط المتتالية (CSS). نوصي أيضًا بالعمل في بيئة مرحلية أو تطوير بدلاً من موقع الويب المباشر الخاص بك ، حتى تقوم بتصميم جدول يعمل بشكل موثوق.
الخطوة 1: قم بتنسيق الجدول الخاص بك لـ CSS سريع الاستجابة
في هذا المثال ، سنخبر بيانات نموذج الجدول الخاص بنا لإعادة تنسيقها عند نقطة توقف معينة. يمكنك ببساطة إضافة شريط تمرير إلى جدول في بعض الحالات ، لكننا سنقوم بالفعل بتجميع بيانات الجدول بحيث تظهر بتنسيق أكثر قابلية للقراءة مما يلغي الحاجة إلى التمرير الأفقي.
يعد هذا أسلوبًا رائعًا ، نظرًا لأن التمرير الأفقي قد يعني غالبًا أنك تعرض بيانات العمود خارج السياق:
لجعل هذا الجدول يعمل بشكل أفضل ، ستحتاج أولاً إلى التأكد من تنسيق جدولك بشكل صحيح. إذا كنت تقوم بإنشاء جدول باستخدام Block Editor ، فيمكنك القيام بذلك بشكل طبيعي ثم إضافة سمات <thead> و <tbody> للتأكد من أن CSS الخاص بك سيعمل بشكل صحيح:
بمجرد إضافة الجدول ، يمكنك استخدام محرر HTML لضبط تنسيقه. تحتاج سمة <thead> </thead> إلى التفاف جميع رؤوس الأعمدة. وبالمثل ، ستلتف جميع بيانات الجدول التالية في السمة <tbody> </tbody>.
بمجرد إضافة علامة CSS في الخطوة التالية ، ستتمكن أوراق الأنماط الخاصة بك من فهم ما يفترض أن يتم عرضه كرؤوس لكل عمود في الجدول ، وما هو محتوى النص أو الخلية.
الخطوة 2: أضف علامة مخصصة إلى CSS الخاص بك
بعد ذلك ، سنستخدم مقتطفًا من كود CSS المخصص وموضوع WordPress Twenty Nineteen. هذا الموضوع لديه تصميم سريع الاستجابة كجزء من الكود الأصلي ، لكن تعديلات CSS لدينا ستأخذ ذلك إلى أبعد من ذلك.
نظرًا لأن جميع السمات مختلفة ، فأنت تريد أن تفهم تمامًا بنية السمة الخاصة بك من أجل تنفيذ تصميم جدول سريع الاستجابة بنجاح. قد تتطلب بعض السمات مكتبة JavaScript إضافية.
على سبيل المثال ، سننتقل إلى Appearance > Customize > CSS إضافي ، حيث يمكننا إضافة كود 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; | |
} | |
} |
بمجرد لصق التعليمات البرمجية الخاصة بك في المحرر ، ستحتاج إلى تحديد نشر حتى تدخل تغييراتك حيز التنفيذ.
الخطوة الثالثة: اختبر استجابة الجدول في WordPress
يحتوي WordPress على ميزة اختبار شاشة مضمنة مفيدة تتيح لك اختبار المحتوى الخاص بك على ثلاثة أحجام مختلفة للشاشة. في الجزء السفلي من الشاشة حيث أضفت CSS المخصص ، يمكنك النقر فوق أيقونات الجهاز اللوحي أو الهاتف المحمول لاختبار النمط الجديد لجدولك:
في هذا المثال ، قمنا بالفعل بإنشاء جدول بسيط يحتوي على جميع سمات HTML الضرورية للعمل مع CSS الخاص بنا. تم تعيين نقطة التوقف الخاصة بنا في CSS على 600 بكسل ، ولكن يمكن تغيير ذلك ليناسب احتياجاتك.
بدلاً من إضافة شريط تمرير أو سحق بيانات الجدول ، فإن CSS الذي أضفناه يعيد تنظيم البيانات في تنسيق مناسب للهاتف المحمول. يمكّن هذا المستخدم على جهاز محمول من التمرير عموديًا ، وعرض بيانات الجدول في السياق مع بقية الخلايا ذات الصلة.
كيفية عمل جدول سريع الاستجابة باستخدام البرنامج المساعد
إذا لم تكن مرتاحًا لتخصيص رمز السمة أو CSS ، فهناك خيار آخر. هناك عدد من مكونات WordPress الإضافية المتاحة التي يمكن أن تساعدك في إنشاء تصميم جدول سريع الاستجابة لموقع الويب الخاص بك.
الخطوة 1: تنزيل البرنامج المساعد
للبدء ، ستحتاج إلى اختيار مكون إضافي. نظرًا لوجود عدد غير قليل من الخيارات لتصميم جداول سريعة الاستجابة ، سنقوم بتسليط الضوء على عدد قليل منها لتبدأ:
- Ninja Tables : تم تصنيفها على أنها المكون الإضافي الأول في WordPress لبناء جداول متجاوبة ، وهي تأتي مع أكثر من 100 نمط جدول للاختيار من بينها.
- wpDataTables : هذا مكون إضافي مجاني بإصدار متميز ، ولكن الإصدار البسيط مليء بميزات لإنشاء جداول ومخططات غنية وتفاعلية.
- WP Responsive Table : هذا مكون إضافي بسيط ومجاني يجعل من السهل إنشاء جداول متجاوبة يتم تمريرها أفقيًا على الشاشات الصغيرة.
بالنسبة لبقية هذا المثال ، سنستخدم Ninja Tables لشرح كيفية إنشاء جدول بيانات سريع الاستجابة في WordPress.
الخطوة 2: أدخل بياناتك
بعد تثبيت البرنامج المساعد وتنشيطه ، ستتمكن من القفز مباشرة إلى إنشاء جدول. يمكنك الانتقال إلى NinjaTables> All Tables> Add Table :
يمكنك هنا إضافة جدول جديد من البداية ، أو يمكنك استيراد جدول من ملف. سنقوم بإنشاء جدول من البداية باستخدام خيار إضافة جدول . ستحتاج بعد ذلك إلى إدخال عنوان ووصف لجدولك:
سيكون لديك بعض الخيارات الأخرى هنا أيضًا. على سبيل المثال ، إذا كنت تقوم بإعداد متجر WooCommerce ، فستتمكن من استخدام هذه المعلومات لإنشاء جدول WooCommerce.
بمجرد إضافة معلوماتك ، ستضغط على إضافة لإنشاء الجدول. ستحتاج بعد ذلك إلى بدء إدخال البيانات. يمكنك تحديد إضافة عمود لإعداد هيكل الجدول الخاص بك:
سيكون لديك عدد قليل من الحقول لإكمالها من أجل إنشاء العمود الخاص بك. يتضمن هذا اسم رأس العمود ونوع البيانات التي يحتوي عليها. ستتمكن أيضًا من تعيين نقطة التوقف المتجاوبة:
للاختيار من بين عدد من الخيارات التي تحدد كيفية استجابة الجداول الخاصة بك للأجهزة المختلفة ، يمكنك الوصول إلى القائمة بالنقر فوق إظهار دائمًا في جميع الأجهزة :
بمجرد إنشاء الأعمدة الخاصة بك ، حدد إضافة بيانات ، وستوفر NinjaTables نموذجًا سهلًا لإضافة إدخالات متعددة إلى الجدول بسرعة:
يمكنك ترك خيار متابعة الإضافة محددًا إذا كان لديك عدة إدخالات. بمجرد الانتهاء ، يمكنك إغلاق النافذة والعودة إلى شاشة تحرير الجدول.
الخطوة 3: تنسيق الجدول الخاص بك
الآن بعد أن أصبح لديك جدول به معلومات ، يمكنك استكشاف إعدادات وخيارات النمط في NinjaTable. من داخل نافذة تعديل الجدول ، يمكنك الوصول إلى المزيد من الإعدادات على طول علامات التبويب العلوية ، وأيضًا إلى أسفل الجانب الأيمن من الشاشة:
سيكون لديك العديد من الخيارات لتخصيص نمط الجدول ومظهره ، بما في ذلك ألوان صفوف الجدول البديلة ، وتوسيط النص ، وإخفاء البيانات ، والمزيد.
الخطوة 4: اختبر طاولتك
يجعل NinjaTable من السهل اختبار استجابة الجدول الخاص بك أثناء قيامك بتحريره. في علامة التبويب تصميم الجدول ، ستجد ثلاثة خيارات لاختبار استجابة الشاشة:
يمكنك تحديد سطح المكتب أو الجهاز اللوحي أو الهاتف المحمول لعرض الشكل الذي سيبدو عليه الجدول الخاص بك على هذه الأنواع من الأجهزة.
يأتي كل جدول تقوم بإنشائه أيضًا مع رمز قصير. بالإضافة إلى ذلك ، يمكنك بسهولة إضافة أي من جداولك إلى محتوى موقع الويب الخاص بك باستخدام كتلة NinjaTable التي ستجدها في قسم التنسيق في قائمة Block Editor.
دع WP Engine يساعدك في الحفاظ على استجابة موقعك
لا يجب أن يكون بناء موقع ويب يستخدم تصميمًا متجاوبًا قويًا تحديًا عندما يكون لديك وصول إلى الموارد المناسبة.
هنا في WP Engine ، نريدك أن تكون قادرًا على تقديم أفضل تجربة رقمية لعملائك. تحقق من العديد من خطط استضافة WordPress وحلول المطورين لمشروعك التالي!