كتلة علامات التبويب

يُتيح لك بلوك علامات التبويب (Tabs block) تنظيم المحتوى في أقسام منفصلة ذات تبويبات ينقر الزوار عليها واحداً تلو الآخر، بدلاً من إظهار كل شيء على الصفحة مرة واحدة. وهو مفيد للأسئلة الشائعة، أو مواصفات المنتجات، أو أي محتوى ترغب في تقديم عدة قطع مرتبطة من المعلومات فيه دون إجبار الزوار على التمرير عبرها جميعاً. يتبع هذا البلوك نمط علامات التبويب (Tabs pattern) من دليل ممارسات كتابة W3C ARIA، لذا فهو مزود مسبقاً بسلوكيات إمكانية الوصول عبر لوحة المفاتيح وقارئ الشاشة.

المتطلبات

• ووردبريس 7.1 أو أحدث.

إضافة بلوك علامات التبويب

1. افتح مقالاً أو صفحة في المحرر.
2. ضع مؤشرك في المكان الذي تريد ظهور علامات التبويب فيه.
3. افتح أداة إدراج البلوكات (+) في شريط الأدوات العلوي، وابحث عن "Tabs"، وحدد بلوك علامات التبويب.

يمكنك أيضاً كتابة /tabs في محرر البلوكات والضغط على مفتاح الإدخال (Enter).

اقرأ إرشادات تفصيلية حول إضافة البلوكات.

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

كيفية هيكلة بلوك علامات التبويب

يتكون بلوك علامات التبويب من عدة بلوكات متداخلة تعمل معاً:

• علامات التبويب (Tabs) — البلوك الخارجي الذي يضم كل شيء معاً.
  • قائمة علامات التبويب (Tab List) — صف أزرار علامات التبويب القابلة للنقر.
    • علامة التبويب (Tab) — كل زر فردي قابل للنقر داخل قائمة علامات التبويب، بواقع زر واحد لكل تبويب.
  • لوحات علامات التبويب (Tab Panels) — الحاوية التي تحمل محتوى كل تبويب.
    • لوحة علامات التبويب (Tab Panel) — منطقة المحتوى الخاصة بتبويب واحد. اللوحة المرتبطة بعلامة التبويب المحددة حالياً هي وحدها التي تكون مرئية في أي وقت.

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

إضافة وإزالة علامات التبويب

لإضافة تبويب جديد:

1. حدد علامة التبويب الأخيرة في قائمة علامات التبويب.
2. ضع مؤشرك في نهاية التسمية التوضيحية الخاصة بها واضغط على مفتاح الإدخال (Enter).

يتم إضافة تبويب جديد بعدها، إلى جانب لوحة تبويب فارغة مطابقة.

يمكنك أيضاً استخدام خيار إضافة تبويب (Add tab) في شريط أدوات البلوك لإضافة تبويب جديد في نهاية القائمة.

لإزالة تبويب:

1. حدد علامة التبويب التي تريد إزالتها ووضع مؤشرك في بداية التسمية التوضيحية الخاصة بها مباشرة.
2. اضغط على مفتاح الرجوع (Backspace).

يتمت إزالة علامة التبويب ولوحة علامات التبويب المقابلة لها معاً.

ملاحظة: يجب أن يحتفظ بلوك علامات التبويب بتبويب واحد على الأقل، لذا لا يمكنك حذف جميع علامات التبويب.

إعادة ترتيب علامات التبويب

لإعادة ترتيب علامات التبويب:

1. حدد علامة تبويب (Tab) في قائمة علامات التبويب.
2. استخدم أزرار إعادة الترتيب في شريط أدوات البلوك لتحريكها لتكون في وقت مبكر أو متأخر من القائمة.

تؤدي إعادة ترتيب لوحة علامات التبويب مباشرةً - على سبيل المثال، عن طريق سحبها في عرض القائمة (List View) - إلى تحريك علامة التبويب المطابقة لها في قائمة علامات التبويب للحفاظ على التزامن.

مضاعفة علامة تبويب

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

1. حدد علامة التبويب التي تريد مضاعفتها.
2. حدد أيقونة خيارات إضافية (النقاط العمودية الثلاث) في شريط أدوات البلوك واختر مضاعفة (Duplicate).

اقرأ المزيد حول مضاعفة البلوكات.

إضافة محتوى إلى لوحة علامات التبويب

تتعامل كل لوحة علامات تبويب (Tab Panel) مثل بلوك المجموعة (Group block) تماماً - حيث يمكنك إدراج أي بلوكات بداخله: فقرات، صور، عناوين، أعمدة، وما إلى ذلك. هذا يعني أن تبويباً واحداً يمكن أن يحتوي على قدر كبير أو قليل من المحتوى كما ترغب.

1. حدد علامة التبويب التي تريد إضافة محتوى إليها.
2. انقر داخل لوحة علامات التبويب الخاصة بها.
3. استخدم أداة إدراج البلوكات (+) لإضافة أي بلوك، بنفس الطريقة التي تستخدمها في أي مكان آخر بالمحرر.

شريط أدوات البلوك

يأتي شريط أدوات كل بلوك بخيارات مختلفة تتيح لك تخصيص أو تعديل البلوك في المحرر. لعرض شريط أدوات البلوك، حدد البلوك وسيعرض قائمة بخيارات شريط الأدوات.

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

اقرأ عن هذه الإعدادات وغيرها.

إعدادات البلوك

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

أيقونة الإعدادات في شريط الأدوات العلوي للمحرر

إعدادات قائمة علامات التبويب

حدد قائمة علامات التبويب (Tab List) للوصول إلى إعداداتها.

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

إعدادات زر علامة التبويب

حدد زر علامة تبويب (Tab) فردي للوصول إلى إعداداته. تدعم أزرار علامات التبويب نفس أنواع عناصر التحكم الموجودة في العديد من البلوكات الأخرى:

• اللون (Color): تعيين ألوان النص والخلفية لزر علامة التبويب، بما في ذلك لحالته المحددة/النشطة. راجع نظرة عامة على إعدادات الألوان للتفاصيل.
• الطباعة (Typography): ضبط حجم الخط وإعدادات النصوص الأخرى لتسمية علامة التبويب. راجع نظرة عامة على إعدادات الطباعة للتفاصيل.
• الحدود (Border): إضافة لون الحد وعرضه ونصف قطره لزر علامة التبويب. راجع نظرة عامة على إعدادات الحدود والظلال للتفاصيل.
• التباعد (Spacing): ضبط الحشو الداخلي لزر علامة التبويب. راجع نظرة عامة على إعدادات الأبعاد للتفاصيل.

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

عرض توضيحي

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