ستوفر هذه المقالة الإجراء الخاص بإضافة شريط التقدم في WordPress باستخدام المخطط التفصيلي التالي:
- ما هو شريط التقدم في WP؟
- كيفية إضافة أشرطة التقدم إلى مواقع WordPress باستخدام التعليمات البرمجية؟
- كيفية إضافة أشرطة التقدم إلى مواقع WordPress باستخدام المكونات الإضافية؟
ما هو شريط التقدم في ووردبريس؟
يُظهر شريط التقدم تقدم شيء ما بالنسبة المئوية باستخدام شريط أفقي. وهو عبارة عن تمثيل رسومي لبعض البيانات التي يمكن أن توفر المعلومات للمستخدم بمجرد لمحة واحدة. يمكن أن يساعد استخدام أشرطة التقدم في منشورات WordPress الخاصة بك لتمثيل البيانات أو الإحصائيات في تحسين جاذبية موقع الويب وتفاعل المستخدمين.
كيفية إضافة أشرطة التقدم إلى مواقع WordPress باستخدام التعليمات البرمجية؟
لإضافة شريط تقدم إلى WordPress بدون مكون إضافي، سيتعين على المستخدم استخدام HTML وCSS المخصصين في المنشور. للقيام بذلك، اتبع الخطوات الموضحة أدناه:
الخطوة 1: قم بتسجيل الدخول إلى لوحة التحكم
افتح المتصفح وانتقل إلى ' http://localhost/<Website-Name>/wp-login.php ' وصلة. قم بتوفير بيانات اعتماد المسؤول واضغط على ' تسجيل الدخول ' زر:
الخطوة 2: إنشاء منشور جديد
اذهب إلى ' المشاركات > إضافة جديد 'من القائمة الجانبية للوحة تحكم المشرف:
الخطوة 3: إضافة كود HTML مخصص
في هذا المنشور، قم بتوفير العنوان والمحتوى الإضافي. ثم اضغط على ' + أيقونة '، وابحث عن' HTML مخصص ' حاجز:
في كتلة HTML المضافة، الصق الكود المتوفر أدناه. غير ال ' عرض ' داخل ' <سبان> علامات للنسبة المطلوبة من شريط التقدم. وبالمثل، قم بتغيير ' نص التقدم ' وفقاً لذلك:
< شعبة فصل = 'شريط التقدم المخصص' >< فترة أسلوب = 'العرض: 80%' >< / فترة >
< شعبة فصل = 'نص التقدم' > 80% < / شعبة >
< / شعبة >
بعد ذلك اضغط على ' ينشر زر 'لرفع المنشور إلى الموقع:
الخطوة 4: إضافة CSS مخصص
بعد نشر المنشور اضغط على ' رأي آخر ' زر:
في المعاينة، انقر على ' يعدل أو يكيف 'زر لإضافة التصميم لشريط التقدم:
ستظهر قائمة المحرر على الجانب الأيسر من الشاشة. هنا قم بالتمرير للأسفل وانقر على ' CSS إضافية ' قسم:
الصق كود CSS التالي في المربع لتصميم شريط التقدم:
.شريط التقدم المخصص {خلفية- لون : #1a1a1a;
ارتفاع : 30 بكسل؛
الحشو: 5 بكسل؛
عرض : 500 بكسل؛
الهامش: 5 بكسل 0 ;
نصف قطر الحدود: 5 بكسل؛
ظل الصندوق: 0 1px 5px #000 أقحم، 0 1 بكسل 0 # 444 ;
}
.شريط التقدم المخصص فترة {
خلفية- لون : #0000FF؛
العرض: كتلة مضمنة؛
تعويم: اليسار؛
ارتفاع : 100 %؛
نصف قطر الحدود: 3 بكسل؛
ظل الصندوق: 0 1 بكسل 0 rgba ( 255 , 255 , 255 ، .5 ) أقحم؛
انتقال: عرض .4s سهولة الدخول والخروج؛
}
.التقدم- نص {
نص- محاذاة : يمين؛
لون : أبيض؛
الهامش: 0 بكسل؛
}
الخطوة 5: نشر المنشور
وأخيرا اضغط على ' ينشر 'نشر لحفظ هذه التغييرات:
عند إعادة تحميل الصفحة، يمكن للمستخدم أن يرى أنه يمكن رؤية شريط التقدم في المنشور:
كيفية إضافة أشرطة التقدم إلى مواقع WordPress باستخدام المكونات الإضافية؟
سيستخدم هذا العرض التوضيحي المكوّن الإضافي 'Ultimate Blocks' لإضافة شريط تقدم إلى موقع WordPress الإلكتروني. للقيام بنفس الشيء، اتبع الخطوات الموضحة أدناه.
الخطوة 1: إضافة مكون إضافي جديد
بعد تسجيل دخول المستخدم إلى لوحة التحكم، انتقل إلى ' الإضافات > إضافة جديد 'الخيار من شريط القائمة الجانبية:
الخطوة 2: تثبيت البرنامج المساعد Ultimate Blocks
ابحث عن الكتل النهائية واضغط على ' يدخل ' مفتاح. ثم قم بالضغط على الزر الموضح بالأسفل “ تثبيت الآن ' زر:
الخطوة 3: تفعيل الكتل النهائية
بمجرد تثبيت البرنامج المساعد، انقر فوق ' تفعيل زر 'لاستخدام شريط التقدم في WordPress:
الخطوة 4: إنشاء منشور جديد
لإضافة شريط تقدم إلى منشور WordPress، انتقل إلى ' المشاركات > إضافة جديد 'الخيار من القائمة الجانبية:
الخطوة 5: إضافة كتلة شريط التقدم
قم بتوفير عنوان ومحتوى للمنشور. بعد ذلك اضغط على ' + أيقونة لإضافة كتلة جديدة. في القائمة ابحث عن ' شريط التقدم ' وحدد الكتلة:
الخطوة 6: تعيين النسبة المئوية للشريط
لتعيين نسبة مئوية لشريط التقدم، استخدم شريط التمرير الأزرق أو أدخل النسبة المئوية في مربع التحديد أدناه:
الخطوة 7: نشر المنشور
بعد الانتهاء من التدوينة اضغط على ' ينشر زر 'لرفع المنشور إلى الموقع:
الخطوة 8: عرض المنشور
بعد نشر المنشور اضغط على زر 'عرض المنشور' لرؤية معاينة المنشور على الموقع:
يمكن أن نرى في الإخراج أدناه أنه تمت إضافة شريط التقدم إلى المنشور:
هذا كل ما يتعلق بإضافة شريط التقدم في WordPress.
خاتمة
لإضافة شريط تقدم إلى موقع WordPress، انتقل إلى ' الإضافات > إضافة جديد 'الخيار من القائمة الجانبية. بحث وتثبيت ' الكتل النهائية ' توصيل في. بعد التثبيت قم بتفعيله. ثم اذهب الى ' المشاركات > إضافة جديد ' وتقديم عنوان ومحتوى المنشور. وبعد ذلك اضغط على '' + أيقونة 'وابحث عن' شريط التقدم ' حاجز. اضبط نسبة التقدم باستخدام شريط التمرير أو عن طريق إدخال الرقم. لقد أوضحت هذه المقالة الإجراء الخاص بإضافة شريط التقدم في WordPress مع وبدون البرنامج الإضافي.