ملحق طريقة عرض عدد الزوار او المشاهدين لكل قسم في الزينفورو

مهدي حميد

مهدي حميد

Moderator
طاقم الإدارة
مشرفين انكور
عضو انكور
طريقة عرض عدد الزوار والمشاهدين لكل قسم في XenForo (هاك يشاهد الآن)
أهلاً بكم في انكور التطويري. في هذا الشرح، سنتعلم كيفية إضافة ميزة تفاعلية رائعة لمنتداتنا، وهي إظهار عدد الزوار أو الأعضاء الذين يتصفحون كل قسم حالياً بجانب اسم القسم. هذه الميزة تعطي انطباعاً بالحيوية والنشاط وتجذب الزوار لاستكشاف الأقسام النشطة.
لماذا اخترنا طريقة "الكاش" اليدوية بدلاً من إضافة PHP برمجية؟
ملاحظة تقنية هامة: في هذا الشرح، اعتمدنا على جلب البيانات من "كاش الأقسام" (Node Cache) الذي يوفره XenForo افتراضياً، ولم نقم بإنشاء استعلامات PHP مباشرة لقاعدة البيانات.
السبب: الاستعلام المباشر (Direct Query) في كل مرة يتم فيها تحميل الصفحة الرئيسية سيجعل السيرفر يقوم بعمليات فحص لجدول الجلسات (Sessions) لكل قسم على حدة، مما يؤدي إلى استهلاك كبير لموارد السيرفر (CPU & RAM) وربما بطء في تصفح المنتدى إذا كان عدد الزوار كبيراً. أما طريقة الكاش فهي تجلب أرقاماً جاهزة ومخزنة مسبقاً، مما يحافظ على سرعة الموقع بنسبة 100%.
أنقر للتوسيع...
خطوات التطبيق عبر تعديلات القوالب (Template Modifications):
أولاً: تعديل القالب الأساسي
1. توجه إلى لوحة تحكم المنتدى > المظهر > تعديلات القوالب.
2. اضغط على إضافة تعديل قالب واملأ البيانات التالية:

  • القالب: node_list_forum
  • مفتاح التعديل: codenet_watching_now
  • نوع البحث: Regular expression
خانة البحث:
كود: 
/(<h3 class="node-title">.*?</h3>)/s
خانة الاستبدال:
كود: 
$1
<xf:if is="{$node.Data.cache.visitor_count} > 0">
<span class="watching-now-badge" title="يشاهدون هذا القسم الآن">
<i class="fas fa-eye"></i> {{ {$node.Data.cache.visitor_count}|number }} يشاهد الآن
</span>
</xf:if>
ثانياً: تنسيق المظهر (CSS)
لإعطاء الإضافة شكلاً احترافياً وعصرياً، توجه إلى قالب extra.less وأضف الكود التالي:
CSS: 
/* هاك يشاهد الآن - كود نت */
.watching-now-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
background: rgba(39, 174, 96, 0.15);
color: #27ae60;
padding: 2px 10px;
border-radius: 20px;
margin-right: 8px;
font-weight: 600;
border: 1px solid rgba(39, 174, 96, 0.2);
vertical-align: middle;
}
.watching-now-badge i {
margin-left: 5px;
animation: watchingPulse 2s infinite ease-in-out;
}
@keyframes watchingPulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
بهذه الخطوات البسيطة، أصبح لديك نظام تتبع نشط للأقسام يظهر للزوار بشكل أنيق دون التأثير على أداء منتداك. نتمنى أن ينال الشرح إعجابكم.
اعداد بواسطة : مهدي حميد - منتدى انكور التطويري ، يُمنع النقل دون ذكر المصدر !.
 
  • Like
التفاعلات: Admin
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى