الصفحة الرئيسية
إضافات
افكار

قطعة التقييم بالنجوم (Widget Star Rating)

يساهم نظام التقييم بالنجوم في توجيه القراء نحو المحتوى الجيد وتحفيز المؤلفين لتقديم محتوى أفضل. كما يعزز التفاعل بين المستخدمين والمحتوى، مما يسهم....
جمال الحزازي
Split Post - Split Article Into Several Pages
قطعة التقييم بالنجوم (Widget Star Rating)

السلام عليكم ورحمة الله وبركات، مرحبًا بك في صِوان محور XYZ!

مقدمة

هل سبق لك أن واجهت محتوى رائع على الإنترنت وتمنيت أن تكون لديك طريقة للتعبير عن تقديرك؟ أو ربما واجهت محتوى ضعيف وكنت ترغب في تقديم تغذية راجعة بناءة؟ إذا كانت الإجابة بنعم، فإن تقييم المحتوى بالنجوم هو الحلقة المثالية بالنسبة لك!

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

أهمية تقييم المقالات والمحتوى بواسطة النجوم

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

أهمية وجود أدوات تقييم سهلة الاستخدام

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

المزايا التي يمكن تحقيقها من خلال أدوات التقييم بالنجوم

  1. - توفير ملاحظات فورية:
    يمكن للقرّاء تقديم ملاحظات فورية حول المحتوى من خلال تقييمه بالنجوم، مما يمكن المؤلفين من تحسين المحتوى بناءً على التغذية الراجعة.
  2. - زيادة الانخراط:
    يشجع وجود أدوات التقييم السهلة الاستخدام على مشاركة المستخدمين وزيادة مستوى التفاعل مع المحتوى.
  3. - تحسين روابط الثقة:
    يمكن للتقييمات بالنجوم أن تسهم في بناء ثقة المستخدمين في المواقع والمحتوى، حيث يعتبرون التقييمات من قبل الزملاء كمصدر للمعلومات الموثوقة.

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

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

مهم! قطعة تقييم بالنجوم هذه ليست عملية فعليا هي فقط كماليات للموقع بمعنى ان التقييم لا يتم تخزينه و مراجعته سحابيا تظل هذه الميزة رئيا فرديا للمستخدم ميزتها تقدم تفاعلا مع تجربة المستخدم و تظيف جمالية للموقع لا تعتمد اي احصائيات، ربما مستقبلا سافكر في الموضوع و جعلها معتمدة على منصة API او منصة فايربيس لتتبع احصائيات تفاعل تجربة المستخدم.

معاينة في UnPlug

تحليل و تفسير الشيفرة

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

<style>
/* widget stars rating by elhizazi1*/
	.rating-box .stars.pointer {
	pointer-events:none
}
.rating-wrap {
	display:flex;
	gap:10px;
	padding:22px 0;
	border:1px solid #e4e3e1;
	border-left:0;
	border-right:0
}
.rating-box {
	width:100%;
	text-align:center
}
.rating-box:before {
	content:attr(aria-label);
	font-size:12px;
	font-weight:800
}
.rating-box .stars {
	display:flex;
	justify-content:center;
	gap:15px;
	margin-top:15px
}
.stars-svg {
	width:35px;
	height:35px;
	fill:#b5b8b1
}
.stars svg.active,.stars svg:hover {
	fill:#ffb851;
	transform:scale(1.2)
}
.result-rating {
	font-weight:800
}
.result-rating:after {
	content:attr(aria-label);
	display:flex;
	justify-content:center;
	font-weight:normal;
	opacity:.8
}
.alreadyRt {
	display:none;
	margin-top:10px
}
.alreadyRt:after {
	content:attr(aria-label)
}
@media screen and (max-width:480px) {
	.result-rating {
	font-size:12px
}
.result-rating:after {
	font-size:11px;
	width:50px
}
.rating-box .stars {
	gap:10px
}
}
</style>

ساتطرق لجميع عناصر مضهر تقييم النجوم. سأشرحها لك بالتفصيل:

  1. .rating-box .stars.pointer{pointer-events:none}: هذا القاعدة تعطي تأثير pointer-events:none لعناصر النجوم في عنصر الـ rating-box، وهذا يعني أنه لا يمكن التفاعل معها باستخدام المؤشر.
  2. .rating-wrap: هذا العنصر يحتوي على عناصر تصميم عناصر التقييم بشكل عام. يتم تعيين العديد من الخصائص مثل العرض والهوامش والحواف والتباعد بين العناصر.
  3. .rating-box: هذا العنصر يحتوي على عناصر تصميم عناصر التقييم الفعلية. يتم تعيين العرض والمحاذاة النصية والتباعد بين العناصر.
  4. .rating-box:before: هذا العنصر يستخدم لعرض نص توضيحي قبل عناصر التقييم. يتم تعيين حجم الخط والوزن والمحتوى.
  5. .rating-box .stars: هذا العنصر يحتوي على عناصر تصميم النجوم. يتم تعيين المحاذاة والتباعد بين العناصر والهوامش.
  6. .stars-svg: هذا العنصر يحدد حجم ولون النجوم باستخدام fill.
  7. .stars svg.active,.stars svg:hover: هذه القاعدة تعطي تأثير لون مختلف للنجوم عند تمرير المؤشر عليها أو عندما تكون نشطة.
  8. .result-rating: هذا العنصر يحتوي على عناصر تصميم نتيجة التقييم. يتم تعيين الوزن والمحتوى.
  9. .alreadyRt: هذا العنصر يستخدم لعرض رسالة بعد التقييم. يتم تعيين العرض والمحتوى.
  10. @media screen and (max-width:480px): هذه القاعدة تطبق تغييرات على التصميم عندما يكون عرض الشاشة أقل من 480 بكسل.

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

<script>
// إنشاء النجوم
const starsDiv = document.querySelector('.stars');
for (let i = 1; i <= 5; i++) {
    const starSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    starSVG.setAttribute('class', `stars-svg star${i}`);
    starSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    starSVG.setAttribute('viewBox', '0 0 24 24');
    starSVG.innerHTML = `<g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'></path></g>`;
    starsDiv.appendChild(starSVG);
}

// تحديد العناصر
const stars = document.querySelectorAll('.stars-svg');
const resultRating = document.querySelector('.result-rating');
const alreadyRated = document.querySelector('.alreadyRt');
let ratingValue = 0;

// استعادة التقييم من مخزن المتصفح إذا كان متاحًا
document.addEventListener('DOMContentLoaded', () => {
    const storedRating = localStorage.getItem('userRating');
    if (storedRating) {
        ratingValue = parseInt(storedRating);
        updateStars();
    }
});

// تفاعل مع تقييم النجوم
stars.forEach((star, index) => {
    star.addEventListener('click', () => {
        const starValue = index + 1;
        ratingValue = starValue;
        updateStars();
        localStorage.setItem('userRating', ratingValue);
    });
});

// تحديث النجوم والرسالة بناءً على التقييم المختار
function updateStars() {
    switch (ratingValue) {
        case 1:
            resultRating.textContent = `شكرا لقد أعطيت تقييما عدده ${ratingValue} نجمة`;
            break;
        case 2:
            resultRating.textContent = `شكرا لقد أعطيت تقييما عدده ${ratingValue} 🌟 نجمات`;
            break;
        case 3:
            resultRating.textContent = `🥳 رائع! لقد أعطيت تقييما عدده ${ratingValue} 🌟 نجمات`;
            break;
        case 4:
        case 5:
            resultRating.textContent = `🥳 رائع! لقد أعطيت تقييما عدده ${ratingValue} 🌟 نجمات`;
            break;
        case 4:
        case 5:
            resultRating.textContent = `🥳 🎉 رائع! لقد أعطيت تقييما عدده ${ratingValue} 🌟 نجمات`;
            break;
        default:
            resultRating.textContent = '';
    }
    
    alreadyRated.style.display = 'block';
    alreadyRated.setAttribute('aria-label', resultRating.textContent);
    
    // تحديث ألوان النجوم
    stars.forEach((s, i) => {
        if (i < ratingValue) {
            s.classList.add('active');
        } else {
            s.classList.remove('active');
        }
    });
}
</script>
  • إنشاء النجوم:
    هذا الجزء يقوم بإنشاء 5 نجوم SVG داخل عنصر HTML يحمل الفئة "stars".
const starsDiv = document.querySelector('.stars'); for (let i = 1; i <= 5; i++) { const starSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); starSVG.setAttribute('class', `stars-svg star${i}`); starSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); starSVG.setAttribute('viewBox', '0 0 24 24'); starSVG.innerHTML = `<g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'></path></g>`; starsDiv.appendChild(starSVG); }
  • تحديد العناصر:
    هنا يتم تحديد العناصر الأساسية التي سيتم التفاعل معها: النجوم، الرسالة الناتجة عن التقييم، ورسالة تظهر إذا كان المستخدم قد قام بالتقييم بالفعل.
const stars = document.querySelectorAll('.stars-svg'); const resultRating = document.querySelector('.result-rating'); const alreadyRated = document.querySelector('.alreadyRt'); let ratingValue = 0;
  • استعادة التقييم:
    يستمع هذا الحدث لعندما يتم تحميل الصفحة، ثم يتحقق مما إذا كان هناك تقييم محفوظ في مخزن المتصفح. إذا كان الأمر كذلك، يتم تحديث قيمة التقييم وعرض النجوم المناسبة.
document.addEventListener('DOMContentLoaded', () => { const storedRating = localStorage.getItem('userRating'); if (storedRating) { ratingValue = parseInt(storedRating); updateStars(); } });
  • تفاعل مع تقييم النجوم:
    يستمع هذا الجزء للنقر على كل نجمة ويحدث قيمة التقييم ويعرض النجوم المناسبة ويحفظ التقييم في مخزن المتصفح.
stars.forEach((star, index) => { star.addEventListener('click', () => { const starValue = index + 1; ratingValue = starValue; updateStars(); localStorage.setItem('userRating', ratingValue); }); });
  • تحديث النجوم والرسالة:
    هذه الوظيفة تقوم بتحديث النجوم والرسالة بناءً على قيمة التقييم التي تم اختيارها من قبل المستخدم.
function updateStars() { // يتم التحقق من قيمة التقييم وتحديث الرسالة بناءً عليها // يتم تحديث ألوان النجوم بناءً على قيمة التقييم }

هذا الجزء يتضمن عناصر HTML التي تعرض وتستخدم عناصر تقييم النجوم. سأشرحها لك بالتفصيل:
الواجهة (HTML):
- لا توجد عناصر HTML مباشرة في هذه الشيفرة، ولكن يمكن أن نفترض وجود عناصر HTML تحتوي على النجوم والنصوص التي تعرض التقييم والرسائل.

<div class="rating-wrap">
    <div class="rating-box" aria-label="هل هذه المقالة مفيدة قيمها">
        <div class="stars"></div>
        <div class='result-rating' data-after='voice'></div>      
    </div>
    <div class='alreadyRt' aria-label='لقد أعطيت تقييما عدده'></div>
</div>
  1. <div class="rating-wrap">: هذا العنصر هو العنصر الرئيسي للتقييم. يحتوي على جميع العناصر المتعلقة بتقييم النجوم.
  2. <div class="rating-box" aria-label=" هل هذه المقالة مفيدة قيمها ">: هذا العنصر هو صندوق التقييم. يحتوي على النجوم والرسالة المتعلقة بالتقييم. السمة aria-label تحدد النص الذي يتم قراءته بواسطة تقنيات المساعدة الصوتية عند التركيز على العنصر.
  3. <div class="stars"></div>: هذا العنصر هو عنصر النجوم. يتم إنشاء النجوم داخله باستخدام الشيفرة التي تم شرحها سابقًا.
  4. <div class='result-rating' data-after='voice'></div>: هذا العنصر هو عنصر الرسالة المتعلقة بالتقييم. يتم تحديثه بواسطة الدالة updateStars() لعرض الرسالة المناسبة بناءً على التقييم المحدد. السمة data-after تحدد النص الذي يتم عرضه بعد العنصر باستخدام CSS.
  5. <div class='alreadyRt' aria-label='لقد أعطيت تقييما عدده'></div>: هذا العنصر هو عنصر يعرض رسالة "لقد أعطيت تقييما عدده" بعد تقييم النجوم. يتم تحديثه أيضًا بواسطة الدالة updateStars() لإظهار الرسالة المناسبة بناءً على التقييم المحدد. السمة aria-label تحدد النص الذي يتم قراءته بواسطة تقنيات المساعدة الصوتية عند التركيز على العنصر.

إليك ملخص للشفرات الثلاثة:

  1. HTML: يتم استخدام الشفرة HTML لإنشاء هيكل العناصر المستخدمة في تقييم النجوم. تتضمن العناصر الرئيسية عنصرًا للتقييم وعنصرًا للنجوم وعنصرًا لعرض الرسالة المتعلقة بالتقييم.
  2. CSS: يتم استخدام الشفرة CSS لتنسيق وتحسين المظهر البصري للعناصر. يتم تعيين الأنماط والخصائص اللازمة لتحقيق التصميم المطلوب، مثل لون النجوم وحجمها وتنسيق الرسالة.
  3. JS: يتم استخدام الشفرة JS لتفعيل التفاعل والسلوك الديناميكي للعناصر. يتم استهداف العناصر وإضافة حدث النقر للنجوم لتحديث التقييم وتحديث النجوم وعرض الرسالة المناسبة. كما يتم استخدام مخزن المتصفح لحفظ التقييم المحدد.

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

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

كيفية عمل الشيفرة ودورها في تقييم المحتوى:

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

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

تنبيه مهم

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

  1. أخذ نسخة احتياطية:
    قبل تعديل أي شيء في قالب موقعك أو مدونتك، تأكد من أخذ نسخة احتياطية للقالب الحالي. يمكنك فعل ذلك عن طريق الانتقال إلى قسم القالب في لوحة التحكم واختيار خيار "نسخ القالب" أو "حفظ نسخة احتياطية"، أو يمكنك ببساطة نسخ الكود وحفظه في ملف نصي على جهاز الكمبيوتر الخاص بك.
  2. توثيق الشفرات:
    قبل إضافة أي شيفرة جديدة، قم بتوثيق الشفرة الحالية بشكل جيد. يمكنك ذلك عن طريق إنشاء تعليقات في الشفرة توضح وظيفة كل جزء منها وكيفية عمله. هذا يسهل علىك فهم الشفرة في المستقبل والتعديل عليها بشكل أفضل مثلا فتح و غلق التوثيق <!--[ open adds code]--> و <!--[ close adds code]-->.
  3. الاختبار الشامل:
    بعد إضافة الشفرات الجديدة، قم بإجراء اختبار شامل لموقعك أو مدونتك للتأكد من عمل الشفرات بشكل صحيح وعدم وجود أي مشاكل. قم بفحص صفحات متعددة من الموقع للتأكد من تأثير الشفرات على جميع الصفحات.
  4. التوثيق المستقبلي:
    بمجرد إضافة الشفرات بنجاح والتأكد من عملها بشكل صحيح، قم بتوثيقها في ملف مستقل يحتوي على جميع الشفرات المستخدمة في الموقع مع شرح وظيفة كل منها. هذا يساعدك في المراجعة المستقبلية وإجراء التعديلات عند الحاجة.

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

إضافة الشيفرة

لكل جزء مكان محدد يتم اضافته اذا كنت تحتاج ان تظهر القطعة على جمسع مشاركاتك اتبع الخطوات اسفله. شيفرة CSS في الغالب تظاف فوق وسم ]]</b:skin> و شيفرة JS فوق وسم </body> اما HTML يبقا اختياري على حسب الرغبة. يمكنك اضافة الشيفرةكاملة في صفحة ثابتة او مشاركة دون الحاجة لوضعها داخل القالب (الفرق الوحيد هو انك ستحتاج اضافة الشيفرة كل مرة تنشئ مقالة جديدة)

إضافة CSS

طريقة تركيب الشيفرة

  1. قم بتسجيل الدخول إلى حسابك في بلوجر وانتقل إلى لوحة التحكم الخاصة بالمدونة التي ترغب في تركيب الشيفرة فيها.
  2. انتقل إلى قالب المدونة الخاص بك عن طريق النقر على "المظهر".
  3. اضغط على الرمز السهم بجانب تخصيص اختر "تحرير HTML" للوصول إلى محرر القالب.
  4. ابحث عن ]]</b:skin> في الكود، وهذه العلامة تظهر في نهاية قسم <head>.
  5. قم بلصق الشيفرة CSS التي تريد تركيبها مباشرة قبل علامة ]]</b:skin>.
  6. انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
  7. قم بتحديث مدونتك لتطبيق التغييرات.

بعد اتباع هذه الخطوات، يجب أن تظهر الشيفرة CSS الخاصة بك في الصفحات الخاصة بمدونتك فوق علامة ]]</b:skin> اذا حاولة معاينة فحص مصدر موقعك.

إضافة JS

  1. في نفس صفحة محرر القالب.
  2. ابحث عن </body> في الكود، وهذه العلامة تظهر في نهاية الصفحة قبل إغلاق الجسم (</body>).
  3. قم بلصق الشيفرة JavaScript التي تريد تركيبها مباشرة قبل علامة </body>.

إختياري اذا كان السكريبت مربكا في اضافته على قالبك اكتفي بوضع هذا الاستدعاء الذي اسفله فقط بدلاً من وضع السكريبت كاملاً

<script src="https://cdn.jsdelivr.net/gh/elhizazi2/Siwane@main/Star-Rating.js"></script>

يمكنك فتح رابط الشيفرة و مراجعتها للتاكد من خلوها من اي برمجية او تشفير.

بعد اتباع هذه الخطوات، يجب أن تظهر الشيفرة JavaScript الخاصة بك في الصفحات الخاصة بمدونتك فوق علامة </body>.

إضافة HTML

  1. في نفس صفحة محرر القالب.
  2. ابحث عن <data:post.body/> اسفله هو نهاية جسم الصفحة و بالتالي هناك ستظهر قطعة تقييم بالنجوم على جميع المقالات بشكل افتراضي.
  3. قم بلصق الشيفرة HTML التي تريد تركيبها مباشرة بعد وسم <data:post.body/>.
  4. انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
  5. قم بتحديث مدونتك لتطبيق التغييرات.

المزايا والفوائد

تقدم الشيفرة المستخدمة لتقييم المحتوى بالنجوم العديد من المزايا والفوائد التي تعود بالفائدة على المدونين والقراء على حد سواء:

  1. - تحسين تفاعل المستخدمين: تسهم الشيفرة في تحفيز المستخدمين على التفاعل مع المحتوى بشكل أكبر، حيث يتمكنون من التعبير عن آرائهم وتقييم المحتوى بسهولة.
  2. - تحسين تجربة المستخدم: يعزز استخدام الشيفرة تجربة المستخدم بجعل عملية التقييم سهلة وبسيطة، دون الحاجة إلى تسجيل الدخول أو ملء استمارات طويلة.
  3. - توجيه للمؤلفين: يمكن لتقييمات المحتوى أن تقدم ردود فعل فورية للمؤلفين والمساعدة في تحسين جودة المحتوى المقدم.
  4. - زيادة الثقة: يعتبر وجود تقييمات المحتوى مصدرًا للثقة بالنسبة للقراء، حيث يمكنهم الاعتماد على تقييمات الآخرين في اتخاذ قراراتهم بشأن قراءة المحتوى.

إقتراحات

يمكنك رفع السكريبت على خدمة توزيع المحتوى (CDN) واستدعائه من هناك. هذا يعتبر أفضل ممارسة لتحسين أداء موقع الويب الخاص بك وتحسين سرعة التحميل.
لرفع السكريبت على CDN، يمكنك اتباع الخطوات التالية:

  1. قم بتحميل ملف السكريبت على خدمة تخزين الملفات السحابية الخاصة بك، مثل Amazon S3 أو Google Cloud Storage.
    هذه منصات سحابية تقدم خطط مجانية ولكنها تنتهي اردت التنويه بها فقط هناك بعض المنصات المجانية التي يمكن استخدامها بشكل دائم بدون أي تكاليف. ومع ذلك، يجب مراعاة أن هذه المنصات المجانية قد تكون محدودة في الميزات والقدرات المتاحة.
    بعض الأمثلة على منصات مجانية تشمل:
    • ✦ GitHub Pages: تتيح لك استضافة موقع ويب ثابت مجانًا باستخدام Git و GitHub.
    • ✦ Netlify: توفر خدمة استضافة مواقع ويب سريعة وآمنة ومجانية تدعم الاستضافة الثابتة والاستضافة الديناميكية.
    • ✦ Firebase Hosting: توفر Google Firebase خدمة استضافة مواقع ويب سريعة وآمنة ومجانية.
    • ✦ Vercel: توفر خدمة استضافة مواقع ويب سريعة ومجانية تدعم تطبيقات Next.js و React وغيرها.
    • ومع ذلك، يجب مراعاة أن هذه المنصات المجانية قد تفرض بعض القيود مثل حجم التخزين المسموح به أو حدود النطاق الترددي. قبل استخدام أي منصة مجانية، يُنصح بمراجعة الشروط والأحكام والتعليمات الخاصة بها لضمان الامتثال وفهم القيود المفروضة.
  2. بعد تحميل الملف، ستحصل على رابط للوصول إليه. يجب أن يكون هذا الرابط عامًا ويمكن الوصول إليه من أي موقع.
  3. انتقل إلى موقعك وقم بتحرير الشفرة HTML الخاصة بك لاستدعاء السكريبت من CDN. يمكنك استخدام العنصر <script> وتعيين السمة src لتحديد رابط السكريبت على CDN.
    مثال: <script src="https://cdn.example.com/path/to/script.js"></script> بهذه الطريقة، سيتم تحميل السكريبت مباشرةً من خدمة CDN بدلاً من تحميله من خادم الويب الخاص بك. هذا يعني أن المستخدمين سيحصلون على السكريبت بسرعة أفضل وأداء أفضل.

تأكد من اختيار خدمة CDN موثوقة وموثوقة لضمان توافر السكريبت وسرعة التحميل. كما يجب أن تتأكد من تحديث الرابط عند تحديث السكريبت.

سؤال: ما هي أهمية نظام التقييم بالنجوم؟

- جواب: يساهم نظام التقييم بالنجوم في توجيه القراء نحو المحتوى الجيد وتحفيز المؤلفين لتقديم محتوى أفضل. كما يعزز التفاعل بين المستخدمين والمحتوى، مما يسهم في تحسين تجربة المستخدم بشكل عام.

سؤال: كيف يمكنني استخدام نظام التقييم بالنجوم؟

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

سؤال: هل يؤثر نظام التقييم بالنجوم على التفاعل مع المحتوى؟

- جواب: نعم، يؤثر نظام التقييم بالنجوم بشكل كبير على التفاعل مع المحتوى. يشجع المستخدمين على المشاركة وتقديم آرائهم بسهولة، مما يزيد من تفاعلهم ومشاركتهم مع المحتوى.

سؤال: هل يمكنني الاعتماد على تقييمات النجوم في اتخاذ قراراتي؟

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

الختام

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

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/06/widget-star-rating.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"