كيفية إضافة زر تبديل إلى موقع WordPress الخاص بك

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

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

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

تم تقديم هذا الدليل لإظهار كيفية استخدام هذا المكون الإضافي لتحقيق تأثير زر تبديل أنيق وسهل الاستخدام. لنبدأ. 

الخطوة 1: تثبيت البرنامج الإضافي Ultimate Blocks

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

تثبيت البرنامج الإضافي Ultimate Blocks

الخطوة 2: إضافة كتلة المحتوى المبوبة

بمجرد تنشيط Ultimate Blocks، حدد مكان إضافة زر التبديل. يمكنك فتح صفحة أو منشور جديد أو الاستمرار في منشور موجود. 

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

إضافة كتلة محتوى مُبوبة

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

الواجهة الأولية للكتلة

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

الخطوة 3: تخصيص وتكوين كتلة المحتوى المبوبة 

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

انتقل إلى الإعدادات وحدد نمط الحبوب

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

ضبط محاذاة الكتلة

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

إضافة علامة تبويب أخرى

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

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

إعادة تسمية علامات التبويب واستخدام إعدادات الألوان

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

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

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

تخصيص علامات التبويب

الخطوة 4: المعاينة والنشر

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

معاينة ونشر

خاتمة

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



فريق Tableberg