كيفية إنشاء جدول مقارنة في WordPress باستخدام جداول Ninja

اضطررت الأسبوع الماضي إلى إنشاء جدول مقارنة باستخدام WordPress لتقديم بعض البيانات. في البداية ، لم أتمكن من العثور على أي شيء ملائم داخل WordPress لإنشاء جدول تفاعلي سريع الاستجابة. إذا اضطررت إلى إنشاء جدول ، فسيتعين علي ترميزه بالكامل بتنسيق HTML مع العديد من علامات <TABLE> و <TR> و <TD>. على سبيل المثال ، سيبدو الرمز الموجود خلف نموذج الجدول كما يلي:

الطاولة:

الكود وراء الطاولة:

<TABLE BORDER = "5 ″ WIDTH =" 50٪ "CELLPADDING =" 4 ″ CELLSPACING = "3 ″>

<TR>
<TH COLSPAN = ”2 ″> <BR> <H3> عنوان الجدول </ H3>
</TH>
</TR>
<TR>
<TH> العمود أ </TH>
<TH> العمود B </TH>
</TR>
<TR ALIGN = "CENTER">
<TD> البيانات 1 </TD>
<TD> البيانات 2 </TD>
</TR>
</TABLE>

لكن هذا ليس نهجًا عمليًا. في كل مرة أنوي فيها إنشاء طاولة ، سيستغرق الأمر الكثير من وقتي وجهدي ، وهو أمر من الواضح أنه مشكلة لا داعي لها. وبينما كنت أتعامل مع عملية معقدة لجدول المقارنة ، فكرت في التعامل معها بطريقة أكثر ذكاءً. لذلك ، قررت إلقاء نظرة على مكونات WordPress الإضافية المختلفة بخصوص هذه المشكلة.

لقد وجدت العديد من المكونات الإضافية القادرة على حل المشكلة ، ولكن مع واحد أو اثنين من القيود الرئيسية ؛ ما عدا واحدة. قبل التحدث عن هذا البرنامج المساعد المحدد ، أود أن أتحدث بالتفصيل عن المشكلات الرئيسية التي وجدتها أثناء دراسة المكونات الإضافية للجدول المختلفة لـ WordPress.

النكسة المزعجة التي لاحظتها في كل مكون إضافي تقريبًا هي أن الجداول التي تم إنشاؤها باستخدام هذه المكونات الإضافية تستجيب فقط من حيث النوع ولا تتوافق مع جميع أنواع الأجهزة. الشيء الجيد هو أنني وجدت المكوِّن الإضافي Ninja Tables الذي كان مستجيبًا حقًا وساعدني في إنشاء طاولة جميلة وتفاعلية بسرعة كبيرة.

تعتبر المقارنة من أصعب الأنشطة التي يقوم بها المستخدمون على الإنترنت. في معظم الحالات ، تكون هذه خطوة واضحة يتخذها زوارك في كل مرة قبل شراء منتج أو الاشتراك في عضوية أو طلب عرض أسعار. وهذا هو المكان الذي تقفز فيه جداول المقارنة لجعل حياتنا أسهل قليلاً من خلال تمثيل كمية كبيرة من البيانات بشكل مرئي.

يمكن إنشاء نوعين من جداول المقارنة لأغراض العمل. أحدهما عبارة عن جدول مقارنة ثابت والآخر ديناميكي. تعد جداول المقارنة الديناميكية أكثر ملاءمة وتفاعلية ، وهي مناسبة لبيئة عمل صحية. يسمح للمستخدمين بالتفاعل مباشرة مع الخدمات التي يريدونها.

من ناحية أخرى ، لا تخدم جداول المقارنة الثابتة أي أغراض أخرى سوى الإعلان عن المنتج ككل. لا يمكن للمستخدم التفاعل ولا يمكنه اتخاذ إجراء فوري باستخدام هذا النوع من الجداول. وقد يبدو هذا تجربة مستخدم سيئة لجمهور موقع الويب الخاص بك.

إنشاء جدول مقارنة مع Ninja Tables: دليل خطوة بخطوة

هل ألهمك عمل جداول مقارنة تفاعلية دون إضاعة الكثير من الوقت؟ في هذه المرحلة ، سأنتقل بك إلى دليل تفصيلي حول كيفية إنشاء جدول مقارنة سريع الاستجابة وديناميكي لعملك. لنلقي نظرة.

على سبيل المثال ، أقدم قائمة أسعار لشركة مزود خدمة استضافة الويب. سيوضح لك هذا الجدول كيف تتفاعل الشركة مع عملائها ببساطة عن طريق عرض جدول التسعير الوارد أدناه.

لقد قمت بإنشاء الجدول ببساطة باستخدام المكون الإضافي Ninja Tables. الأهم من ذلك أنها تستجيب في النوع. يمكنك التحقق من الاستجابة ببساطة عن طريق تغيير حجم نافذة المتصفح لإلقاء نظرة سريعة على ما إذا كنت تتصفح من سطح المكتب أو الكمبيوتر المحمول.

سأوضح لك الآن كيف يمكنك ، كمسؤول أو محرر موقع WordPress ، إنشاء مثل هذه الجداول التفاعلية في WordPress.

الخطوة 1:

بادئ ذي بدء ، تحتاج إلى تنزيل وتثبيت المكون الإضافي Ninja Tables. للحصول على معرفة تفصيلية حول عملية التثبيت: [readme] .

الخطوة 2:

بعد تفعيل جداول النينجا ، فقط اضغط على " جداول النينجا " لبدء عملها. ثم ستظهر صفحة بها زر " إضافة جدول ".

الخطوه 3:

سيؤدي النقر فوق الزر " إضافة جدول " إلى فتح مربع حوار يحتوي على المعلومات الضرورية لملء إنشاء جدول. بعد ملء النموذج ، انقر فوق الزر "إضافة". بعد ذلك ، سيتم إنشاء جدول بخيارات العمود الخاص به.

الخطوة الرابعة:

سيتم فتح صفحة ديناميكيًا مع نموذج لملء المعلومات الضرورية حول الأعمدة الموجودة أسفل الجدول المعني. يمثل كل نموذج عمودًا واحدًا من هذا الجدول. بعد ملء نموذج واحد ، انقر فوق الزر "إضافة عمود" للانتقال إلى العمود التالي.

سيتم إنشاء عمود باسم الخطة 1 ضمن جدول خدمة الاستضافة. يمكننا النقر فوق الزر " إضافة عمود " لإضافة المزيد من الأعمدة إلى الجدول.

الخطوة الخامسة:

بهذه الطريقة ، يمكنك إضافة المزيد من الأعمدة إلى الجدول. ستبدو الواجهة بهذا الشكل إذا أضفت واحدة أخرى.

الخطوة السادسة:

الآن ، يجب عليك إضافة البيانات في خلايا هذا الجدول. للقيام بذلك ، انقر فوق خيار " صفوف الجدول " ، ثم سيكون لديك صفحة بها زر " إضافة بيانات ". انقر فوق هذا الزر لإضافة بيانات محددة إلى صف الأعمدة بصف.

سيظهر مربع حوار لملء المعلومات المطلوبة للعمود.

سيكون هناك مربع حوار به نموذج إدخال لملء البيانات في الجدول.

الخطوة السابعة:

بعد ملء النموذج ، ما عليك سوى النقر فوق الزر " إضافة " لتضمين جميع البيانات المقدمة في صف واحد. يمكنك تحرير وحذف وإضافة المزيد من البيانات بالنقر فوق الرمز المعني. بهذه الطريقة أضف المزيد من البيانات ، وزيادة الصف. ستكون الواجهة هكذا حينئذٍ.

الخطوة 8:

الآن ، بالطريقة نفسها ، سنضيف عشرة أعمدة بيانات أخرى إلى الجدول ويمكننا تعديل بياناتنا المعطاة بالنقر فوق زر التحديث. يمكن استخدام الرمز القصير عن طريق النقر فوق زر النص لتخصيص أي عنصر محدد. سنقوم بتغيير بعض البيانات باستخدام مخطط ألوان مختلف. ثم انقر فوق الزر "تحديث".

ستكون معاينة هذه الواجهة هكذا. يبدو رائعًا أن ننظر إليه. هذه هي الطريقة التي يمكننا بها إنشاء هيكل جدول أساسي.

هذه هي الطريقة التي أنشأت بها جدول المقارنة ككل. في هذه المقالة ، أردت أن أوضح أنه في WordPress ، يمكن لأي شخص أداء مهمة ثقيلة بسلاسة شديدة بمساعدة المكون الإضافي الصحيح. في هذا الجزء من الكتابة ، أوضحت كيف أن المكون الإضافي Ninja Tables يجعل الأمور سهلة كمثال. جعلت مهمتي سلسة ومريحة للغاية. الأهم من ذلك ، الشيء الجيد هو أن هذا البرنامج المساعد يستجيب بشكل كامل من حيث النوع في السوق.