اذهب إلى المحتوى

كيفية استخدام مكون الجدول في ووردبريس


Ali Alrohia

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

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

كيفية إضافة مكون الجدول إلى مقالك أو صفحتك

001_wordpress_add_table_block.png

لإضافة مكون جدول اضغط على إشارة "+" ثم اكتب "جدول" ضمن حقل البحث، واضغط على مكون الجدول حين ظهوره في النتائج ليُضاف إلى محتوى المقال أو الصفحة. تستطيع أيضًا كتابة /table ضمن المحتوى، ثم الضغط على المكون عند ظهوره.

002_wordpress_table_block.png

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

003_wordpress_table_block_create_table.png

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

خيارات وإعدادات مكون الجدول

سوف نلقي الضوء باختصار على إعدادات وخيارات الجدول.

شريط أدوات مكون الجدول

004_wordpress_table_block_toolbar.png

يظهر شريط أدوات مكون الجدول فوق الجدول عند النقر على أي جزء منه.

تغيير نوع أو نمط مكون الجدول

005_wordpress_table_block_toolbar_change_type.png

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

تغيير المحاذاة

006_wordpress_table_block_toolbar_change_alignment.png

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

محاذاة الأعمدة

007_wordpress_table_block_toolbar_change_column_alignment.png

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

الخط العريض والمائل

008_wordpress_table_block_toolbar_bold_italic.png

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

الرابط

009_wordpress_table_block_toolbar_link.png

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

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

خيارات المزيد للجدول

010_wordpress_table_block_toolbar_more_options.png

تتضمن الخيارات الإضافية إعدادات لصيغة النص يُمكنك تطبيقها على النص عند تحديده بعد الضغط على السهم الذي يُشير للأسفل (المزيد) واختيار أحد هذه الإعدادات. تتضمن هذه الإعدادات الخيارات التالية:

  • كود مضمن: يغير طريقة عرض النص ليبدو وكأنه شيفرة برمجية ويمنع تنفيذ الشيفرة البرمجية. وقد استخدمنا هنا الكود المضمن على كلمة "كاميرا".
  • صورة مضمنة: تُضيف صورة من مكتبة الوسائط إلى المكان الذي يتواجد فيه مؤشر الفأرة.
  • مدخلات لوحة المفاتيح: يعرض النص المُدخل من لوحة المفاتيح بصيغة HTML. وقد استخدمنا هذه الصيغة على كلمة "سامسونغ".
  • يتوسطه خط: يعرض خطًا يمر ضمن النص، مثل كلمة "يوجد" في المثال السابق.
  • أحرف سفلية: يجعل النص أصغر وأدنى من غيره، مثل كلمة "أيفون 12" في المثال السابق.
  • أحرف علوية: يجعل النص أصغر من غيره لكن أعلى ارتفاعًا، مثل كلمة "المتانة" في المثال السابق.
  • لون النص: يسمح لك بتغيير لون النص، مثل كلمة "أيفون 12 برو" في المثال السابق.

تحرير الجدول

011_wordpress_table_block_toolbar_edit_table.png

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

خيارات المكون

012_wordpress_table_block_toolbar_options.png

تتضمن الخيارات:

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

إعدادات مكون الجدول

013_wordpress_table_block_toolbar_table_settings.png

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

الأنماط

014_wordpress_table_block_toolbar_table_style.png

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

اللون

015_wordpress_table_block_toolbar_table_color.png

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

016_wordpress_table_block_toolbar_table_color.png

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

إعدادات الجدول

017_wordpress_table_block_toolbar_table_setting.png

توفر إعدادات الجدول خيارات يُمكنك تفعيلها أو تعطيلها، وهي تتضمن:

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

متقدم

018_wordpress_table_block_toolbar_table_advanced.png

تتضمن الإعدادات المتقدمة رابط القفز HTML ووضع CSS Class إضافي. ويوفر رابط القفز رابطًا يُمكنك استخدامه للربط مباشرةً مع المكون؛ في حين يتضمّن حقل CSS Class، الصنف الذي اخترته وتستطيع إضافة أصناف أخرى.

أفضل النصائح لاستخدام فعال لمكون الجدول

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

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

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

أسئلة متكررة عن مكون الجدول

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال How to Use the WordPress Table Block لصاحبه Randy A. Brown.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...