كيفية إضافة الجداول المستجيبة للجوال في ووردبريس

ستساعدك المقالة التالية: كيفية إضافة الجداول المستجيبة للجوال في ووردبريس

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

لكن WordPress لم يدمج بعد Excel في جوهره …فكيف يمكنك تسخير قوة الجداول لموقع WordPress الخاص بك؟ باستخدام مكون إضافي يسمى wpDataTables.

يمكن أن يساعدك في إنشاء جميع أنواع الجداول لموقع WordPress الخاص بك. يمكنك إنشاء الجداول من البداية باستخدام أداة إنشاء تشبه Excel الخاصة بالمكون الإضافي، أو يمكنك استيراد الجداول مباشرة من Excel أو Google Sheets ببضع نقرات فقط.

وبعد ذلك، يمكنك عرض تلك الجداول ومعالجتها وتصفيتها بعدة طرق رائعة.

في هذه التدوينة سأقوم بأمرين:

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

في النهاية، يجب أن تعرف ليس فقط كيف يمكن لـ wpDataTables أن يساعد موقعك، ولكن أيضًا كيف يمكنك إنشاء جداول بيانات قابلة للتصفية خاصة بك!

ميزات wpDataTables: لماذا هي الأداة المناسبة لهذه المهمة

لنبدأ من البدايه:

إدخال البيانات الخاصة بك.

بدون وجود بيانات في جداولك، لن تكون مفيدة جدًا، أليس كذلك؟ يتيح لك wpDataTables جلب البيانات بطريقتين:

• من رابط (جداول بيانات Google) أو تحميل ملف (JSON، CSV، Excel، وما إلى ذلك)
• عبر مُنشئ جدول داخل لوحة المعلومات حيث تقوم بإدخال البيانات في واجهة تشبه Excel

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

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

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

يمكنك تصميم جداولك باستخدام إعدادات الألوان والخط المضمنة في البرنامج الإضافي أو من خلال CSS مخصص يمكن إضافته بسهولة داخل واجهة البرنامج الإضافي.

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

هذا عدد كبير من الميزات المجردة، رغم ذلك! لذلك دعونا نجري تدريبًا عمليًا حتى تتمكن من رؤية كيفية ظهور هذه الميزات في العالم الحقيقي.

خطوة بخطوة: إنشاء جدول مقارنة المنتجات القابل للتصفية

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

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

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

يمكننا استخدام جدول مقارنة المنتجات من أجل:

• قائمة السعر
• حدد نوع إلغاء الضوضاء
• قائمة العلامة التجارية
• أضف اشتريه هنا وصلة

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

هيا بنا نبدأ…

الخطوة 1: تثبيت وتفعيل wpDataTables

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

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

الخطوة 2: استيراد البيانات وتعيين الخيارات الأساسية

الآن بعد أن قمت بتثبيت البرنامج المساعد، يمكنك إنشاء جدولك الأول عن طريق التوجه إلى wpDataTables → إضافة جديد:

بعد ذلك، عليك أن تختار نوع الطاولة التي تريدها. لديك العديد من الخيارات، ولكن الأكثر صلة بأهدافنا هي:

• جدول مرتبط بمصدر موجود
• إنشاء جدول يدويا
• استيراد من مصدر آخر

أحب استخدام جداول بيانات Google، لذلك في هذا المثال سأقوم باستيراد جدول من هناك ثم تعديله لاحقًا حسب الحاجة باستخدام واجهة التحرير في WPDataTable.

بعد ذلك، يمكنك التحقق من أعمدة الاستيراد (على افتراض أنك اخترت استيراد الجدول الخاص بك):

بمجرد التحقق من صحة الأمور، يمكنك المتابعة إلى الشاشة التالية.

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

• تفاصيل العرض الأساسية (على سبيل المثال ما إذا كان سيتم عرض العنوان أم لا)
• الرسم المتجاوب
• الفرز والتصفية العالمية

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

الخطوة 3: أضف الرمز القصير حيث تريد عرض الجدول الخاص بك

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

ثم، في الواجهة الأمامية، يجب أن ترى الجدول الخاص بك:

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

لذا…دعونا نصلح ذلك!

الخطوة 4: قم بتعديل أعمدة الجدول الفردية الخاصة بك

العودة الى wpDataTables واجهة لجدولك.

ثم، إذا قمت بالتمرير لأسفل، يجب أن تشاهد معاينة الجدول وإعداد الأعمدة منطقة.

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

لإزالة التصفية على رابط الشراء العمود، ما عليك سوى النقر فوق رمز الترس هذا، والتوجه إلى الفلتره علامة التبويب، وقم بإيقاف تشغيلها:

يمكنك أيضًا إيقاف تشغيل الفرز من فرز فاتورة غير مدفوعة.

وهذا اهتم بالقضية الكبيرة! ولكن دعونا نجعل جدول الأمثلة لدينا حتى أفضل.

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

لذلك، دعونا نجعل الأمور أسهل بالنسبة لهم من خلال السماح لهم بما يلي:

• اختر العلامة التجارية من القائمة المنسدلة
• اختر نوع الإلغاء من القائمة المنسدلة
• حدد نطاقات أسعار مختلفة

لحل المشكلتين الأولين، ما عليك سوى تغيير نوع فلتر ل حدد المربع:

ولحل السؤال الثالث، قم بتغيير سعر العمود نوع فلتر ل نطاق الرقم:

ضع كل ذلك معًا وستحصل على شيء مثل هذا في الواجهة الأمامية:

الآن، يمكن للزائرين الاختيار من القوائم المنسدلة وإدخال النطاق السعري الخاص بهم للاستفادة حقًا من التصفية.

Note – إذا كنت تتساءل عن الشكل الذي ستبدو عليه إضافة المزيد من التصفية، فإليك نظرة خاطفة على خيار “التصفية في النموذج” الذي يمكنك تمكينه من الأعلى الفرز والتصفية فاتورة غير مدفوعة:

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

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

الخطوة 5: تغيير الألوان والخطوط (اختياري)

هل تتذكر كيف قمت بتجاهل الإعدادات الافتراضية لـ wpDataTable؟ وهنا يمكن أن تكون مفيدة.

إذا لم تكن راضيًا عن المظهر الافتراضي لجدولك، فيمكنك المضي قدمًا وتغيير الألوان والخطوط بالانتقال إلى wpDataTables → الإعدادات → إعدادات اللون والخط:

الخطوة 6: إنشاء مخطط (اختياري)

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

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

في الصفحة التالية، اختر الجدول الذي ترغب في إنشاء مخططك عليه:

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

في الشاشة التالية، ستحصل على معاينة مباشرة، بالإضافة إلى القدرة على إضافة بعض التنسيق:

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

استخدامات أخرى لـ wpDataTables

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

نظرًا لأنه يسمح بمجموعة متنوعة من تنسيقات الحقول وتصميمات CSS المخصصة، يمكنك استخدامه لجميع أنواع الأشياء مثل:

• إنشاء جدول زمني لفريقك الرياضي أو فرقتك الرياضية أو أي شيء آخر يتطلب إدراج أوقات ومواقع الأحداث
• بناء جدول تسعير لعرض معلومات المنتج الخاص بك
• قائمة الوحدات السكنية المتاحة
• عرض قائمة قابلة للتصفية بمواقع المتجر/البيع بالتجزئة
• إنشاء كتالوج قابل للفرز لجميع منتجاتك

حقًا…إذا كان بإمكانك فعل ذلك باستخدام جدول، فيمكنك القيام بذلك باستخدام wpDataTables. هناك الكثير من الاستخدامات المتخصصة الإبداعية التي يمكنك ابتكارها بنفسك.

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

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

التفاف الأشياء

الآن يجب أن تعرف:

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

انطلق الآن، وقم ببناء جدولك الأول، وابدأ في استخدام قوة البيانات والجداول لإنشاء موقع WordPress أكثر وظيفية!