كيفية استخدام TablePress مع Elementor (Widget + Shortcode)

الوجبات السريعة الرئيسية

• يعمل TablePress مع Elementor بطريقتين: عنصر واجهة مستخدم يسمى جدول TablePress يضيفه TablePress 3.4 إلى لوحة Elementor، والرمز القصير [معرف الجدول = 1 /] الموضوع في عنصر واجهة المستخدم Shortcode.
• تحتوي أداة جدول TablePress في Elementor على جدول منسدل وحقل معلمات التكوين، ولا تحتوي على علامة تبويب النمط.
• يقوم TablePress بتشغيل الفرز والبحث وترقيم الصفحات للزائرين بشكل افتراضي، بواقع 10 صفوف في كل صفحة.
• يتم إيقاف التمرير الأفقي افتراضيًا في TablePress، لذلك يفيض جدول مكون من خمسة أعمدة على هاتف 390 بكسل حتى تحدده في إعدادات الجدول.
• بالنسبة للجدول القصير الذي يجب تحريره وتصميمه داخل Elementor، فإن أداة الجدول مثل Master Addons Dynamic Table أقل عملاً من TablePress.

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

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

الخطوة 1: إنشاء أو استيراد الجدول في TablePress

تم إنشاء الجدول نفسه خارج Elementor، على شاشات TablePress في لوحة تحكم WordPress.

1. تثبيت وتنشيط TablePress من المكونات الإضافية، أضف جديدًا.
2. يفتح TablePress في قائمة لوحة المعلومات.
3. لكتابة جدول، انقر أضف جديدأدخل اسمًا، وقم بتعيين عدد الصفوف والأعمدة، واملأ الخلايا.
4. لإحضار جدول بيانات، انقر يستورداختر تحميل الملف، حدد الملف، احتفظ به أضف كجدول جديد وانقر يستورد.
5. لاحظ معرف الجدول. الجدول الأول هو المعرف 1.

يقوم TablePress باستيراد ملفات Excel وCSV وHTML وJSON. لقد استوردنا ملف CSV مكون من ستة صفوف من أسعار الشحن، ووصل مع تعيين الصف الأول بالفعل كرأس.

الخطوة 2: أضفها مع أداة جدول TablePress

يقوم TablePress بتسجيل عنصر واجهة المستخدم Elementor الخاص به، لذلك لا تحتاج هذه الطريقة إلى رمز قصير.

1. قم بتحرير صفحتك باستخدام Elementor.
2. ابحث في لوحة الأدوات عن جدول اضغط على الجدول.
3. اسحب الأداة إلى الحاوية.
4. افتح ال طاولة قم بالتنزيل واختيار الجدول الخاص بك. يتم سرد الجداول حسب المعرف والاسم.
5. نشر الصفحة.

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

أو قم بإضافته باستخدام رمز قصير

يقوم الرمز القصير بنفس المهمة ويعمل في أي مكان تقوم به الرموز القصيرة.

1. اسحب العنصر الرمز القصير القطعة في حاوية.
2. يكتب [table id=1 /]، استبدال 1 بمعرف الجدول الخاص بك.
3. انقر يتقدم لتحميل المعاينة.

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

الفرز والبحث وترقيم الصفحات

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

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

تصميم طاولةاضغط على الطاولة في Elementor

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

• خيارات الجدول على شاشة تحرير الجدول: أي الصفوف هي الرأس والتذييل ألوان الصف المتناوبة, تسليط الضوء على تحوم الصفو فئات CSS إضافية مجال.
• Css مخصص للألوان والخطوط والحدود. يمنح TablePress كل جدول فئة بناءً على معرفه، حتى تتمكن من استهداف جدول واحد.
• علامة التبويب المتقدمة لعنصر واجهة المستخدم في Elementor للهامش والحشو والعرض حول الطاولة.

مثال قصير لـ CSS يعيد كتابة رأس الجدول 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

الصقه في المظهر، أو التخصيص، أو CSS الإضافي، أو في أي مربع CSS مخصص يحتوي عليه الإعداد الخاص بك. يحتوي Elementor Pro على واحد لكل عنصر، والإضافات الرئيسية امتداد CSS مخصص يضيف واحدة كذلك.

إصلاح الطاولة على الهواتف

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

1. تحرير الجدول في TablePress.
2. تحت ميزات الجدول لزوار الموقععلامة التمرير الأفقي.
3. انقر حفظ التغييرات وأعد تحميل الصفحة على هاتفك.

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

عندما تكون أداة الجدول هي الخيار الأفضل

تم تصميم TablePress للبيانات. بالنسبة لجدول صغير يعد جزءًا من تصميم الصفحة، فإنه يضيف خطوات: شاشة مسؤول ثانية، وCSS في مكان آخر، ومكون إضافي لمواصلة التحديث.

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

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

الأسئلة المتداولة

الأفكار النهائية

يتناسب TablePress وElementor معًا بشكل جيد لجداول البيانات: قم باستيراد الملف، ثم قم بإسقاطه في أداة جدول TablePress، وتذكر تشغيل التمرير الأفقي للهواتف. يستغرق التصميم القليل من CSS لأن الأداة لا تحتوي على علامة تبويب Style.

للجداول القصيرة التي ينبغي أن تبدو وكأنها جزء من الصفحة، الجدول الديناميكي يحافظ على الخلايا والتصميم داخل Elementor.

القراءة ذات الصلة

• كيفية إنشاء جدول في العنصر (4 طرق)
• أفضل المكونات الإضافية لجدول المحتويات لـ WordPress