كيفية عرض ما بعد وقت القراءة المقدر وعدد الكلمات في Divi (مع ReadingTime.js)

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

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على وقت القراءة وعدد الكلمات الذي سنضيفه إلى قالب منشور في Divi.

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

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

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

تنزيل مجاني

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

تحميل

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

كيفية تحميل النموذج

انتقل إلى Divi Theme Builder

لتحميل القالب ، انتقل إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك.

تحميل قالب الموقع

بعد ذلك ، في الزاوية العلوية اليمنى ، سترى رمزًا به سهمان. انقر فوق الرمز.

انتقل إلى علامة التبويب "استيراد" ، وقم بتحميل ملف JSON الذي تمكنت من تنزيله في هذا المنشور ، وانقر فوق "استيراد قوالب Divi Theme Builder".

حفظ تغييرات Divi Theme Builder

بمجرد تحميل الملف ، ستلاحظ نموذجًا جديدًا به منطقة نصية جديدة تم تعيينها لكل المنشورات. احفظ تغييرات Divi Theme Builder بمجرد أن تريد تنشيط القالب.

دعنا ننتقل إلى البرنامج التعليمي حتى نتمكن من تعلم بناء هذا الشيء من البداية ، أليس كذلك؟

كيفية عرض مشاركة وقت القراءة المقدر وعدد الكلمات في Divi

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. انتقل إلى Divi Theme Builder
2. انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.
3. حدد علامة التبويب استيراد في النافذة المنبثقة إمكانية النقل.
4. اختر / قم باستيراد ملف قالب وظيفة Divi Business Consultant (قم بالتنزيل هنا).
5. انقر فوق الزر "استيراد"

بعد ذلك ، سيكون لديك قالب منشور جاهز للتحرير.

إضافة النص / HTML إلى نموذج المشاركة

لتحرير قالب المنشور ، انقر فوق رمز التحرير في منطقة النص المخصص.

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

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

في إعدادات وحدة النص ، الصق HTML التالي داخل النص (باستخدام علامة تبويب النص):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

الشيء المهم الذي يجب تذكره هو أن علامة span مع الفئة "eta" ستعرض في النهاية وقت القراءة المقدر لمحتوى المنشور. وسيعرض علامة span مع الفئة "عدد الكلمات" عدد الكلمات لمحتوى المنشور.

تصميم نص وقت القراءة

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

• خط النص: بوبينز
• وزن خط النص: غامق
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 14 بكسل (سطح المكتب) ، 12 بكسل (الهاتف)
• تباعد حروف النص: 2 بكسل
• محاذاة النص: مركز

تصميم الصف

بمجرد اكتمال إعدادات النص ، افتح إعدادات الصف وقم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

في علامة التبويب خيارات متقدمة ، قم بتحديث الموضع:

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

إضافة الكود

لإضافة الكود اللازم لإنشاء وقت القراءة المقدر وعدد الكلمات ، أولاً ، أضف وحدة رمز ضمن وحدة النص.

سنستخدم مكتبة Readingtime.js مع بعض التعليمات البرمجية المخصصة لاستهداف منطقة محتوى المنشور ، وقراءة فئة الوقت الهدف eta ، وعدد الكلمات المستهدف في فئة عدد الكلمات .

قم بلصق التعليمة البرمجية التالية في مقطع التعليمات البرمجية مع التأكد من التفاف التعليمات البرمجية في علامات البرنامج النصي :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

حول المدونة

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

يتم تعيين ReadingTimeTarget للفئة eta التي تتوافق مع الفئة التي أضفناها إلى علامة span في وحدة النص. ويتم تعيين wordCountTarget لفئة عدد الكلمات التي نضيفها إلى علامة span الأخرى في وحدة النص.

أيضًا ، لا تتردد في تحديث قيمة الدقيقة لكل كلمة (حاليًا 275) لتمثل ما تعتقد أنه يجب أن يكون. سيؤثر هذا بالطبع على وقت القراءة المعروض. من خلال ما قمت بالبحث عنه ، يقرأ البالغ العادي حوالي 300 كلمة في الدقيقة. بالإضافة إلى أنه يمكنك دائمًا تحديث قيمة اللغة أيضًا. على سبيل المثال ، يمكنك استبدال "en" بـ "fr" إذا كنت تريد عرض النص باللغة الفرنسية). لمزيد من المعلومات يمكنك التحقق من الوثائق على جيثب.

احفظ تخطيط القالب ومنشئ السمة.

ثم انتقل إلى Divi> Theme Options> Integrations.

ثم أضف المكتبة إلى منطقة الرأس بعلامات البرنامج النصي :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

يجب أن تبدو هذه…

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

الآن كل ما عليك فعله هو زيارة منشور مدونة مباشر على موقعك لمعرفة وقت القراءة المقدر وعدد الكلمات في الجزء العلوي من محتوى المنشور.

افكار اخيرة

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

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

هتافات!