كيفية إنشاء شريط تقدم القراءة لمنشورات مدونة Divi الخاصة بك (بدون مكون إضافي)

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

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

سنوضح لك كيفية إضافة شريط تقدم القراءة هذا إلى قالب منشور مدونة Divi الافتراضي أو قالب منشور مخصص باستخدام Divi Theme Builder.

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى Divi Theme Builder الخاص بك ، انتقل إلى Divi Theme Builder.

انقر فوق أيقونة قابلية النقل.

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيظهر قالب القسم في Divi Theme Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: استيراد قوالب Premade

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

هام: من الأفضل استيراد هذه القوالب إلى موقع اختبار حتى لا تفسد موقعًا مباشرًا.

قم باستيراد قالب موقع الويب الافتراضي

أولاً ، ستحتاج إلى تنزيل الحزمة الرابعة مجانًا منشئ القوالب لـ Divi. ثم قم بفك ضغط الملف.

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد. ثم اختر ملف JSON لقالب موقع الويب الافتراضي من المجلد الذي تم تنزيله وانقر على زر الاستيراد. سيؤدي هذا إلى استيراد قالب موقع ويب افتراضي جديد برأس وتذييل عمومي.

قم باستيراد نموذج النشر

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

قم بتعطيل عام في عنوان قالب المشاركة

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

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

تصميم شريط تقدم القراءة

إضافة القسم والصف

داخل محرر تخطيط الرأس ، أنشئ قسمًا عاديًا جديدًا ضمن القسم الحالي الذي يحتوي على الرأس.

ثم أضف عمودًا واحدًا إلى القسم.

إعدادات القسم

افتح إعدادات القسم وقم بتحديث ما يلي:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات الصف

بعد إضافة إعدادات القسم ، افتح إعدادات الصف وقم بتحديث ما يلي:

• لون الخلفية: # 2b2b2b

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إنشاء شريط التمرير باستخدام وحدة Divider

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

إضافة وحدة المقسم

قم بإنشاء وحدة مقسم جديدة داخل العمود.

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

• إظهار المقسم:
• اللون الأيسر متدرج للخلفية: # ff4349
• تدرج الخلفية اللون الصحيح: # fe7f47
• اتجاه التدرج: 90 درجة

ضمن علامة تبويب التصميم ، قم بتحديث ارتفاع شريط التقدم:

• الارتفاع: 20 بكسل

ضمن علامة التبويب "خيارات متقدمة" ، امنح الحاجز معرف CSS مخصصًا على النحو التالي:

• معرف CSS: scrollBar

سنحتاج إلى هذا لاستهداف شريط التمرير للوظائف مع jQuery لاحقًا.

إضافة تسمية شريط النسبة المئوية للعداد

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

ثم أضف HTML التالي إلى محتوى النص الأساسي:

<p>Reading Progress: <span></span></p>

تعتبر علامات span مهمة هنا لأننا سنستخدم jQuery لملء علامات span بعداد النسبة المئوية.

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط النص: Heebo
• وزن خط النص: غامق
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 13 بكسل
• تباعد حروف النص: 3 بكسل
• ارتفاع خط النص: 1em

ثم قم بتحديث الحشوة اليسرى قليلاً:

• المساحة المتروكة: 10 بكسل متبقية

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

• الموقف: مطلق
• الموقع: مركز اليسار

قبل أن تغادر وحدة النص ، أضف فئة CSS حتى نتمكن من استهدافها باستخدام كود jQuery الخاص بنا.

• فئة CSS: تسمية التقدم

إضافة كود jQuery

لمنح شريط التقدم الوظيفة السحرية التي يحتاجها ، نحتاج إلى إضافة كود jQuery الضروري.

للقيام بذلك ، قم بإضافة وحدة رمز نمطية جديدة ضمن وحدة النص.

ثم الصق الكود التالي:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

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

افتح إعدادات القسم للقسم الذي يحتوي على شريط التقدم وقم بتحديث ما يلي:

• المركز: ثابت
• الفهرس Z: 998

ثم افتح إعدادات القسم العلوي الذي يحتوي على محتوى الرأس وقم بتحديث Z Index على النحو التالي:

• الفهرس Z: 999

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

لا تنس حفظ التغييرات.

إضافة المحدد (فئة CSS) إلى وحدة محتوى النشر في قالب منطقة النص.

في الوقت الحالي ، تمت كتابة الكود للتعرف على عنصر به فئة "et-post-content" باعتباره محتوى المنشور الرئيسي.

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

للقيام بذلك ، افتح قالب منطقة النص لقالب المنشور في منشئ السمة.

افتح إعدادات وحدة محتوى النشر وأضف فئة CSS التالية:

• فئة CSS: et-post-content

ثم احفظ التغييرات.

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

النتيجة النهائية

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

استخدام شريط تقدم القراءة في قالب المشاركة الافتراضي لديفي (وليس نموذجًا مخصصًا)

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

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

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

 var $postContent = $('.et-post-content');

مع هذا…

 var $postContent = $('.entry-content');

ستستهدف فئة "محتوى الإدخال" div في قالب المشاركة الافتراضي الذي يحتوي على محتوى منشور المدونة (باستثناء العنوان والصورة المميزة والبيانات الوصفية أعلاه والتعليقات أدناه التي قد تؤدي إلى انحراف الطول الفعلي للمقالة).

نتيجة

هذه نتيجة المنشور باستخدام قالب المنشور الافتراضي.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!