تركيب أضافة الوقت المقدر للقراءة لقوالب بلوجر

 

تركيب ميزة الوقت المقدر للقراءة للموضوع

تُعد ميزة الوقت المقدر للقراءة (Estimated Reading Time) من الإضافات البسيطة ولكن الفعالة التي تُحسن تجربة المستخدم عند تصفحه للمحتوى. تُظهر هذه الميزة للقارئ المدة الزمنية التقريبية التي سيستغرقها لقراءة المقال أو الموضوع، مما يساعده في اتخاذ قرار سريع بشأن ما إذا كان الوقت المتاح لديه يسمح بقراءة الموضوع الآن أم لاحقًا.
تتمثل أبرز فوائد هذه الميزة في ما يلي:
تحسين تجربة المستخدم: من خلال إعطاء فكرة واضحة عن حجم المحتوى.تشجيع القراءة: حيث قد يشعر المستخدم بالارتياح لمعرفة أن القراءة لن تستغرق وقتًا طويلاً.
زيادة التفاعل: عندما يعرف القارئ مسبقًا أن المحتوى قصير أو متوسط الطول، يكون أكثر استعدادًا للتفاعل معه.إدارة الوقت بفعالية: تساعد القرّاء على تنظيم وقتهم بشكل أفضل عند تصفح عدة مواضيع.
تعزيز الشفافية: توحي بأن الموقع يهتم بوقته ويقدّر انشغاله.لهذا السبب، فإن تركيب هذه الميزة على الموقع أو المدونة يُعد خطوة ذكية نحو تقديم تجربة أكثر احترافية وسلاسة للزوار.

شرح التركيب

طريقة أضافة اكواد ميزة الوقت المقدر للقراءة

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

ندخل خلى المظهر ثم تعديل HTML و نبحث عن </head> و نضيف الكود التالي أعلاه 

<script>

function حساب_وقت_القراءة(معرف_المحتوى, معرف_العرض) {

  var العنصر = document.getElementById(معرف_المحتوى);

  if (!العنصر) return;

  var النص = العنصر.innerText || العنصر.textContent;

  var عدد_الكلمات = النص.trim().split(/\s+/).length;

  var سرعة_القراءة = 200; // كلمة في الدقيقة

  var الوقت = Math.ceil(عدد_الكلمات / سرعة_القراءة);

  var الرسالة = 'وقت القراءة: تقريبا ' + الوقت + ' دقيقة';

  document.getElementById(معرف_العرض).textContent = الرسالة;

}

</script>

<style>

#وقت-القراءة {

    font-size: 14px;

    color: #222222;

    margin-bottom: 10px;

    display: block;

    background: #fde2e2;

    padding: 0 20px;

    border-radius: 20px;

</style>

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

<span id="وقت-القراءة"></span>

<script>

  window.addEventListener('DOMContentLoaded', function() {

    حساب_وقت_القراءة('post-body', 'وقت-القراءة');

  });

</script>

ثم نقوم بالحفظ