شرح إضافة ويدجت الساعة الرقمية والتاريخ (Digital Clock Widget) لمنتديات xenforo

إضافة ويدجت الساعة الرقمية والتاريخ (Digital Clock Widget) لمنتديات XenForo

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

أولاً: رفع ملفات الخط والأيقونة:
يجب تحميل مجلد الخطوط المرفق ورفعه إلى مسار المنتدى عبر (FTP أو cPanel) بحيث يكون المسار النهائي للملفات كالتالي:
*

styles/fonts/clock/led.ttf

*

styles/fonts/clock/set.cur

ثانياً: طريقة تركيب الويدجت (Widget):
1. توجه إلى لوحة تحكم الإدارة (Admin Control Panel).
2. من القائمة الجانبية، انتقل إلى: المظهر (Appearance) > الأدوات الذكية (Widgets).
3. اضغط على زر إضافة أداة ذكية (Add widget) واختر نوعها: HTML.
4. قم بضبط إعدادات الويدجت الافتراضية (العنوان ومكان العرض مثل *Forum sidebar*).
5. في خانة قالب الـ Template، ضع الكود التالي بالكامل:

<style type="text/css">
@font-face {
font-family: 'led';
src: url('styles/fonts/clock/led.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#date-time-container {
text-align: center;
}
#server-date {
font-size: 1.0em;
color: #647fa5;
margin-top: -23px;
text-shadow: 0 0 2px #506b6f;
}
#server-time {
font-size: 3.3em;
padding-top: 5px;
padding-bottom:10px;
text-shadow: 0 0 5px #74bff8;
font-family: 'led';
border-top: none;
border-bottom: none;
color: #000000;
border-left: 2px solid #00b1ff;
border-right: 2px solid #00b1ff;
box-shadow: inset 0 0 10px #164e66;
border-radius: 40px;
}
.sclock {
cursor: url(styles/fonts/clock/set.cur), auto;
}
/* تخصيص الألوان إذا كنت تستخدم ثيم أو ستايل فاتح (Light Theme) */
.xf-style-light #server-time {
color: #dcdfe5;
text-shadow: 0 0 5px #0c0c0c;
border-left: 2px solid #213138;
border-right: 2px solid #213138;
box-shadow: inset 0 0 10px #93b5c4;
}
</style>
<div id="date-time-container">
<div class="sclock" onclick="window.location = 'index.php?account/preferences';">
<div id="server-time" data-server-time="{{ date($xf.time, 'Y-m-d H:i:s') }}"></div>
<div id="server-date"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const serverTimeElement = document.getElementById('server-time');
const serverDateElement = document.getElementById('server-date');
let serverTime = new Date();
const [dateString, timeString] = serverTimeElement.dataset.serverTime.split(' ');
const [hours, minutes, seconds] = timeString.split(':').map(Number);
const [year, month, day] = dateString.split('-').map(Number);
serverTime.setFullYear(year, month - 1, day);
serverTime.setHours(hours, minutes, seconds);
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
function updateServerTime() {
serverTime.setSeconds(serverTime.getSeconds() + 1);
const hours = serverTime.getHours().toString().padStart(2, '0');
const minutes = serverTime.getMinutes().toString().padStart(2, '0');
const seconds = serverTime.getSeconds().toString().padStart(2, '0');
const day = serverTime.getDate().toString().padStart(2, '0');
const month = monthNames[serverTime.getMonth()];
const year = serverTime.getFullYear();
const timeString = ${hours}:${minutes}:${seconds};
const dateString = ${year}. ${month} ${day}.;
serverDateElement.textContent = dateString;
serverTimeElement.textContent = timeString;
}
setInterval(updateServerTime, 1000);
updateServerTime();
});
</script>

6. اضغط على زر حفظ (Save).
ميزات الإضافة:
* تعرض الساعة الرقمية معتمدة على دالة

{{ date($xf.time, 'Y-m-d H:i:s') }}

لضمان مزامنة الوقت الفعلي بدقة مع توقيت المنتدى.
* عند الضغط على الساعة، يتم توجيه العضو تلقائياً إلى صفحة (خيارات الحساب الشخصية) لتعديل التوقيت والمنطقة الزمنية الخاصة به إذا أراد ذلك.
حقوق الطبع والنشر © منتدى كود نت codeNET. جميع الحقوق محفوظة.