كيفية إنشاء علامات تبويب في WordPress لمحتوى مبوب مذهل

هل تريد معرفة كيفية إنشاء علامات تبويب في WordPress؟

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

في هذه المقالة ، سنوضح لك كيفية إضافة علامات تبويب في WordPress خطوة بخطوة.

لماذا تحتاج إلى محتوى WordPress المبوب؟

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

على سبيل المثال ، يستخدم WordPress.org علامات التبويب في صفحة المكونات الإضافية لعرض معلومات مثل التفاصيل والمراجعات والدعم والتطوير.

تتضمن بعض الطرق الأخرى لاستخدام علامات التبويب ما يلي:

• في أوصاف المنتج لإظهار مواصفات المنتج المختلفة
• في الشريط الجانبي لمدونتك لتصفية الفئات
• على صفحات الاتصال لفرز معلومات الاتصال

نصيحة للمحترفين: لا ينبغي الخلط بين علامات التبويب والأكورديون. ينقر المستخدمون على علامات التبويب لتبديل المعلومات ، بينما يتم توسيع الأكورديونات لكشف المعلومات.

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

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

هيا بنا نبدأ.

الطريقة الأولى: كيفية عمل علامات تبويب في WordPress باستخدام أداة إنشاء الصفحات

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

SeedProd هو منشئ صفحات سحب وإفلات قوي يتيح لك إنشاء تخطيطات WordPress مرنة دون كتابة تعليمات برمجية. من خلال مجموعات مواقع الويب الاحترافية وقوالب الصفحات المقصودة والمحرر المرئي المباشر ، يمكنك تخصيص كل جزء من موقعك ومشاهدة التغييرات في الوقت الفعلي.

يمكنك أيضًا استخدام SeedProd من أجل:

• إنشاء قوالب ووردبريس مخصصة
• بناء مواقع WooCommerce
• إنشاء صفحات مقصودة عالية التحويل
• ضع موقعك في وضع الصيانة
• وأكثر بكثير

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

اتبع الخطوات أدناه لإنشاء علامات تبويب في WordPress باستخدام SeedProd.

الخطوة 1. تثبيت SeedProd Website Builder

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

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

بعد تنشيط المكون الإضافي ، انتقل إلى SeedProd »الإعدادات وأدخل مفتاح ترخيص المكون الإضافي الخاص بك.

يمكنك العثور على مفتاح ترخيص SeedProd الخاص بك في لوحة معلومات حسابك ضمن قسم التنزيلات .

تذكر أن تنقر على زر التحقق قبل التوجه إلى الخطوة التالية.

الخطوة الثانية. قم بإنشاء سمة WordPress أو الصفحة المقصودة

هناك طريقتان لاستخدام SeedProd لإضافة علامات تبويب إلى موقع الويب الخاص بك:

1. استخدم Theme Builder لإنشاء سمة WordPress مخصصة ، وإضافة علامات تبويب إلى أي صفحة WordPress.
2. قم بإنشاء صفحة مقصودة مستقلة بمحتوى مبوب باستخدام أداة إنشاء صفحات السحب والإفلات.

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

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

الخطوة الثالثة. أضف علامات تبويب إلى صفحات WordPress الخاصة بك

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

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

للقيام بذلك ، انتقل إلى Pages »جميع الصفحات من مسؤول WordPress الخاص بك وابحث عن الصفحة التي ترغب في تحريرها.

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

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

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

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

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

يمكنك الآن البحث عن كتلة علامات التبويب في اللوحة اليمنى وسحبها إلى القسم الجديد في صفحتك.

يؤدي النقر فوق الكتلة إلى إظهار إعدادات المحتوى الخاصة بها حيث يمكنك:

• أضف عدة علامات تبويب
• إظهار أو إخفاء أيقونة علامة التبويب
• تغيير حجم الخط
• قم بزيادة أو تقليل المسافة بين علامات التبويب
• اضبط محاذاة الجدولة

يتيح لك توسيع كل علامة تبويب إضافة عنوان علامة تبويب وكتابة المحتوى الخاص بك باستخدام محرر كلاسيكي مع إعدادات "ما تراه هو ما تحصل عليه" (WYSIWYG).

يمكنك أيضًا تمكين رمز مخصص لإضافة المزيد من الاهتمام إلى علامات التبويب الخاصة بك وإبرازها. ما عليك سوى تبديل "إخفاء رمز علامة التبويب" إلى وضع "إيقاف التشغيل" واختيار رمز مخصص من مكتبة Font Awesome.

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

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

تذكر أن تنقر فوق الزر " حفظ " في الزاوية العلوية اليمنى من الشاشة لحفظ التغييرات.

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

الخطوة 4. انشر المحتوى المبوب

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

للقيام بذلك ، انتقل إلى SeedProd »صفحة Builder Theme وقم بتبديل" Enable SeedProd theme "إلى وضع" On ".

يمكنك الآن معاينة صفحاتك ومشاهدة المحتوى المبوب الخاص بك أثناء العمل.

الطريقة الثانية: كيفية إضافة علامات تبويب باستخدام برنامج WordPress الإضافي

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

أولاً ، ستحتاج إلى تثبيت المكون الإضافي Tabs Responsive وتنشيطه من مسؤول WordPress الخاص بك.

بعد ذلك ، انتقل إلى استجابة علامات التبويب »إضافة علامات تبويب جديدة وتعيين عنوان لعلامة التبويب الخاصة بك.

من هناك ، يمكنك تحديد النموذج الافتراضي ، أو إذا كنت تستخدم الإصدار الاحترافي ، فيمكنك الاختيار من بين 18+ نمط قالب.

الخطوة التالية هي إضافة علامات التبويب الخاصة بك. يمكنك إنشاء العديد من علامات التبويب كما تريد وتضمين:

• عناوين علامات التبويب
• أوصاف علامة التبويب
• رموز علامات التبويب

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

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

على سبيل المثال ، يمكنك لصق الرمز القصير في منشور أو صفحة WordPress مثل هذا:

هذه هي الطريقة التي ستبدو بها في الواجهة الأمامية لموقعك:

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

بعد ذلك ، سترى المحتوى المبوب مباشرة في مناطق الشريط الجانبي:

ها أنت ذا!

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

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

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

شكرا للقراءة. يرجى متابعتنا على YouTube و Twitter و Facebook لمزيد من المحتوى المفيد لتنمية أعمالك.