كيفية إضافة جداول ديناميكية في WordPress بدون أي HTML

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

تبدو مألوفة؟

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

هل تريد بيانات قابلة للتصفية؟ لا.

هل تريد أن يكون الجدول مستجيبًا للجوّال؟ لا.

هل تريد استيراد البيانات من ملف CSV؟ ليست فرصة.

ها هي الأخبار السارة:

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

جنبا إلى جنب مع الرسوم البيانية وجميع أنواع.

يبدو جيدا؟ دعنا نلقي نظرة على كيفية القيام بذلك باستخدام wpDataTables.

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

يتيح لك هذا المكون الإضافي إنشاء جداول جميلة دون أي معرفة بلغة HTML

wpDataTables هو مكون إضافي لبرنامج WordPress يجعل عملية إنشاء الجداول ونشرها على موقع الويب الخاص بك أمرًا سهلاً. إنه خفيف الوزن وبديهي وينجز المهمة في غضون دقائق ، مما يترك لك رمزًا أقل للتجول فيه ومزيدًا من الوقت للتدوين.

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

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

يمكنك حتى استخدامه من أجل:

• كتالوج المنتج
• مخططات مقارنة للمنتجات
• قائمة الأسعار
• جمع البيانات من المستخدمين
• النتائج الرياضية
• تتبع تقدمك لأي شيء يتضمن أرقامًا (مثل تقرير دخل المدونة)

الاحتمالات لا حصر لها.

إنشاء جدول من البداية إلى النهاية: دليل خطوة بخطوة

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

إليك كيفية البدء:

الخطوة 1 - جهز ملفك

أدناه ، قمت بإنشاء مثال مستند Excel لعدد من النفقات العشوائية. يتضمن ذلك عدة أعمدة مثل التاريخ وطريقة الدفع والتكلفة.

تأكد من عرض بياناتك بطريقة مماثلة ، وإلا فإن المكون الإضافي سيعاني من تحديد الأعمدة في جدولك.

الخطوة 2 - إنشاء جدول جديد

انتقل إلى wpDataTables على الجانب الأيسر من لوحة معلومات WordPress الخاصة بك.

سيؤدي النقر فوق هذا الارتباط إلى نقلك إلى الشاشة أعلاه. هذا هو المكان الذي ستنشئ فيه جدولك الجديد وتضيفه:

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

الخطوة 3 - تحديد ميزات الجدول الخاص بك

في الأقسام الثلاثة الأولى من صفحة إعداد الجدول ، يمكنك القيام بالأشياء التالية:

• قم بإنشاء عنوان
• حدد ما إذا كنت تريد إظهار عنوان الجدول الخاص بك على الصفحة
• حدد نوع مصدر الإدخال للجدول الخاص بك

هذه هي إعدادات الجدول الأساسية الخاصة بك.

انقر فوق "تحميل ملف" وابحث عن المستند الخاص بك. يمكن أن تكون الجداول التي يمكنك إنشاؤها معقدة بالقدر الذي تريده.

كما ترى ، أعطيت الجدول الخاص بي عنوانًا ذا صلة ، واخترت نوع ملف Excel من المربع المنسدل ، وقمت بتحميل ملفي إلى WordPress.

في أسفل الصفحة ، ستصادف المزيد من الإعدادات لتخصيص الجدول الخاص بك:

هؤلاء هم:

• متجاوب - يسمح لجدولك بالعرض بشكل مختلف على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف المحمولة
• قابل للتمرير - يمكنك من تمرير الجدول أفقيًا
• إخفاء الجدول حتى يتم تحميل الصفحة بالكامل - مفيد لتحميل الصفحات ببطء
• تصفية متقدمة - لعرض عامل تصفية أسفل كل عمود
• عامل التصفية في النموذج - لمرشح داخل النموذج نفسه
• أدوات الجدول - للحصول على خيارات مثل النسخ والحفظ في Excel والحفظ في ملف CSV المضمّن في النموذج الخاص بك
• تمكين الفرز - يمكّنك هذا من فرز الجداول الخاصة بك
• تخطيط الجدول المحدد - قم بقصر عرض الجدول على 100٪ من الحاوية الرئيسية
• طول العرض - تحديد عدد الإدخالات التي يتم عرضها على الصفحة

بالنقر على "معاينة" يمكنك عرض الجدول الخاص بك وتغيير أي إعدادات تشعر أنها ضرورية لجعلها تبدو كما تريد.

بمجرد تحديد الخيارات التي تناسب نوع الجدول الذي ترغب في عرضه ، فقد حان الوقت للنقر فوق الزر "حفظ".

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

أدناه ، أضفت بعض الألوان وقمت بتحرير أنواع الأعمدة إلى نص ورقم وسلسلة.

الخطوة 4 - حفظ ونسخ الرمز القصير

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

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

الخطوة 5 - أضف الرمز المختصر للنشر أو الصفحة

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

الخطوة 6 - انشر

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

ستسمح الخيارات الموجودة أعلى الجدول للمستخدمين بتصدير محتويات الجدول بتنسيقات متنوعة. يمكنك أيضًا تصفية النتائج بسهولة في الواجهة الأمامية لموقعك.

ما هي الجداول الأخرى التي يمكنك إنشاؤها؟

ومع ذلك ، فأنت لا تقتصر فقط على الجداول المبنية على CSV. يمكن أن تعرض جداول بيانات WP مجموعة واسعة من البيانات بتنسيقات متعددة.

فيما يلي مثال لجدول يعمل بشكل كامل وسريع الاستجابة وقابل للتحرير يحتوي على أعمدة وخيارات متعددة.

هذا الجدول قائم على MySQL مع مرشحات لفرز المحتوى حسب احتياجات المستخدم:

هذا الجدول المستند إلى مصفوفة PHP مُسلسل ويتضمن صورًا - وهذا يضيف ديناميكية ووظائف مختلفة تمامًا قد تجدها العديد من متاجر التجارة الإلكترونية مفيدة بشكل خاص:

أنت لست مقيدًا بملفات CSV فقط. تسمح WP Data Tables أيضًا باستخدام الملفات المستندة إلى Excel ، مما يتيح لك الاستفادة من العديد من الميزات المحددة التي تأتي معها:

ميزات wpDataTable الأخرى الجديرة بالذكر

• معالج wpDataChart - يسمح لك بتحويل بياناتك إلى رسم بياني أو مخطط في بضع خطوات سهلة. وهو يدعم حاليًا 3 محركات عرض - مخططات Google و Highcharts و Chart.js. اعثر على المزيد من الوثائق هنا.
• التنسيق الشرطي - يسمح لك بتمييز الخلايا والصفوف والأعمدة بناءً على محتواها. إنه مفيد خاصة إذا كان الجدول رقميًا بالكامل. اعثر على المزيد من الوثائق هنا.
• أعمدة الصيغة - تُمكِّنك من إضافة عمود يمكن استخدامه لحساب رقم بناءً على الأرقام المحددة في الخلايا الأخرى. اعثر على المزيد من الوثائق هنا.
• أعمدة التاريخ والوقت - تُستخدم للخلايا التي تحتوي على كل من التواريخ والأوقات. ستظهر تلقائيًا بالتنسيق الذي قمت بتعيينه في صفحة الإعدادات. اعثر على المزيد من الوثائق هنا.
• صف المجموع / الإجمالي - يُستخدم للأعمدة الرقمية ، ويسمح لك بحساب مجموع كل القيم. اعثر على المزيد من الوثائق هنا.
• Report Builder - هو برنامج إضافي لـ wpDataTables. يقوم Report Builder على الفور بإنشاء مستندات وجداول بيانات تملأ القوالب الخاصة بك ببيانات فعلية من موقع WordPress الخاص بك. اعثر على المزيد من الوثائق هنا.
• جداول التفاصيل الرئيسية - هي وظيفة إضافية لـ wpDataTables تتيح لك ولزوار موقعك الاطلاع على تفاصيل كل صف بنقرة بسيطة. اعثر على المزيد من الوثائق هنا.

افكار اخيرة

تعد الجداول طريقة رائعة لعرض البيانات. وعندما تضيف ميزات ديناميكية مثل التصفية ، فإنك تجعل الأمور أفضل كثيرًا لزوار موقع الويب الخاص بك.

لقد أطلعتك على كيفية إنشاء جدول ديناميكي في WordPress عن طريق تحميل البيانات من Microsoft Excel (أو باستخدام أي أداة جداول بيانات أخرى). لكن هناك الكثير مما هو ممكن.

يمكنك حتى تحويل أي من جداولك إلى مخططات أو رسوم بيانية ، والمزيد.

الآن ، حان الوقت للبدء على طاولتك الخاصة - استمتع!

القراءة ذات الصلة: 5 إضافات قوية ومتجاوبة للجوال لـ WordPress.

الإفصاح: هذا المنشور برعاية لكن آرائنا خاصة بنا.