أداة أسعار الذهب اليوم: دليل التضمين والاستخدام
اعرض أسعار الذهب اليومية الحية مباشرة على موقعك الإلكتروني. توفّر أداة أسعار الذهب اليوم تفصيلًا فوريًا لأسعار الذهب للأوقية (الأونصة الترويسية) وللجرام عبر العيارات الرئيسية (عيار 24، 22، 21، 18، و14) بـ 150 عملة عالمية دون أي حاجة للصيانة.
1. البدء السريع: تضمين الأداة في موقعك
تضمين جدول أسعار الذهب اليوم سهل ومباشر. أضف كود السكربت وعنصر HTML المخصص داخل وسم <body> في المكان الذي ترغب بظهور الأداة فيه:
<!-- تحميل محرك الأداة -->
<script src="https://www.forexinvestors.com/widgets/gold-price-today/widget.js"></script>
<!-- عنصر أسعار الذهب اليوم -->
<gold-price-widget
lang="ar"
currency="USD"
change-currency="on"
show-header="on"
header-text="أسعار الذهب اليوم"
theme="default"
border-radius="5">
</gold-price-widget>نصيحة للأداء: يكفي استيراد ملف السكربت widget.js مرة واحدة فقط في الصفحة، حتى عند تضمين عدة أدوات لأسعار الذهب بعملات مختلفة في نفس الصفحة.
2. خصائص التخصيص والإعدادات
يمكنك التحكم في العملة الافتراضية وخيار تغيير العملة وشريط العنوان والمظهر اللوني عبر تعديل الخصائص على عنصر <gold-price-widget>:
| الخاصية | النوع | القيمة الافتراضية | الوصف |
|---|---|---|---|
lang |
نص (String) | en |
تحدد لغة الواجهة لمسميات الأوقية والعيارات وأسماء الدول وتنسيق التاريخ (en، ar، fr، es، ru). |
currency |
نص (String) | USD |
رمز العملة الافتراضية المعروضة عند التحميل وفق معيار ISO 4217 (مثل USD، EUR، GBP، SAR، AED، EGP، INR). |
change-currency |
نص (String) | on |
التحكم في إمكانية قيام الزائر بتغيير العملة عبر القائمة المنسدلة (on أو off). اضبطها على off لتثبيت الأداة على عملة واحدة فقط. |
show-header |
نص (String) | on |
التحكم في إظهار أو إخفاء شريط العنوان العلوي للأداة (on للإظهار أو off للإخفاء). |
header-text |
نص (String) | Gold Price Today |
نص العنوان المخصص الذي يظهر في رأس الأداة عندما تكون show-header="on" (الافتراضي هو العنوان المترجم للغة المختارة). |
header-link |
نص (String) | http://www.goldpricedata.com/ |
رابط اختياري (http أو https) لعنوان الأداة العلوي. |
theme |
نص (String) | default |
اختيار نمط الألوان: default، blue، green، yellow، red، ocean، purple، teal، dark، rose، أو custom. |
border-radius |
رقم (Number) | 0 |
درجة استدارة الحواف بالبكسل لإطار الأداة (عدد صحيح من 0 إلى 20 في أداة الإعداد، ويدعم حتى 50، مثل 0، 5، 12). |
native-dropdown |
نص (String) | off |
اضبطها على on لاستخدام قائمة المتصفح التقليدية <select> بدلاً من القائمة المنسدلة المزودة بالبحث والأعلام عندما تكون change-currency="on". |
خصائص ألوان المظهر المخصص (Custom Theme)
عند ضبط theme="custom"، يمكنك تخصيص ألوان الأداة باستخدام أكواد الألوان السداسية المكونة من 6 خانات (بدون علامة #):
| الخاصية | القيمة الافتراضية | الوصف |
|---|---|---|
bg-color |
F6F6F6 |
لون خلفية حاوية الأداة والصفوف الفردية في جدول الأسعار. |
border-color |
BCBCBC |
لون الإطار الخارجي للأداة والخط الفاصل لرأس الدولة وقائمة اختيار العملة. |
text-color |
222222 |
لون النص الأساسي لمسميات العيارات وأسعار الذهب والتاريخ. |
input-bg-color |
FFFFFF |
لون خلفية الصفوف الزوجية في الجدول وقائمة العملات المنسدلة. |
bg-color-button |
535353 |
لون خلفية أزرار الشريط السفلي (FI و+). |
button-border-color |
2E2E2E |
لون إطار أزرار الشريط السفلي. |
button-hover-color |
8A8A8A |
لون التمييز عند تمرير المؤشر فوق صفوف الجدول وأزرار الشريط السفلي. |
3. مميزات الأداة للمستخدم النهائي
يستفيد زوار موقعك عند مشاهدة أداة أسعار الذهب اليوم من المزايا المدمجة التالية:
- تفصيل شامل لأسعار الذهب: تعرض الأداة أسعار الذهب الحية في جدول منظم من 6 صفوف يشمل سعر الأوقية (الأونصة الترويسية) وسعر الجرام لكل من عيار 24، عيار 22، عيار 21، عيار 18، وعيار 14.
- شريط معلومات الدولة والعملة: يعرض علم الدولة واسمها (مع رابط مباشر لصفحة أسعار الذهب التفصيلية لتلك الدولة) ورمز العملة وفق ISO ورمزها المحلي.
- وضع تغيير العملة التفاعلي أو العملة الثابتة: يمكنك السماح للزوار بالتبديل بين 150 عملة عبر قائمة منسدلة قابلة للبحث مع الأعلام (
change-currency="on") بتحديث فوري خفيف، أو تثبيت الجدول على عملة محلية واحدة (change-currency="off"). - عزل التنسيقات عبر Shadow DOM وتباين تلقائي: تعمل الأداة داخل بيئة Shadow DOM معزولة لضمان عدم تعارض تنسيقات موقعك مع جدول الأسعار، مع ضبط تلقائي لتباين نصوص الأزرار.
- توقيت آخر تحديث للأسعار: تعرض الأداة تاريخ ووقت آخر مزامنة لأسعار السوق في الشريط السفلي إلى جانب روابط سريعة لمصدر البيانات (
FI) وصفحة إعداد الأداة (+).
4. تعليمات التضمين في أنظمة إدارة المحتوى (CMS)
ووردبريس (WordPress / Gutenberg & Elementor)
- أضف مكوّن HTML مخصص (Custom HTML) في المقال أو الصفحة أو الشريط الجانبي.
- الصق كود السكربت وعنصر
<gold-price-widget>الناتج أعلاه. - احفظ الصفحة أو انشرها.
Webflow وWix وShopify
- أدرج عنصر تضمين كود مخصص (Embed / Custom Code) في تخطيط الصفحة.
- الصق كود تضمين الأداة.
- تأكد من أن عرض الحاوية الأب لا يقل عن
240pxإلى340pxللحصول على أفضل تنسيق للجدول.
5. الأسئلة الشائعة (FAQ)
كم مرة يتم تحديث أسعار الذهب في الأداة؟
يتم تحديث أسعار الذهب الفورية وأسعار صرف العملات كل 5 دقائق من مصادر بيانات السوق الحية. يوضح الطابع الزمني أسفل الأداة وقت آخر تحديث.
هل يمكنني تثبيت الأداة على عملة واحدة بحيث لا يتمكن الزوار من تغييرها؟
نعم. اضبط الخاصية change-currency="off" على عنصر <gold-price-widget> (أو اختر "لا" تحت خيار "القدرة على تغيير العملة" في أداة الإعداد أعلاه). سيؤدي ذلك إلى إخفاء القائمة المنسدلة وتقليل حجم البيانات المحملة.
هل يمكنني وضع أكثر من أداة لأسعار الذهب في نفس الصفحة؟
نعم. يمكنك إضافة عدة عناصر <gold-price-widget> بعملات أو لغات أو قوالب ألوان مختلفة في نفس الصفحة، مع تضمين وسم <script> مرة واحدة فقط.
هل الأداة متوافقة مع الهواتف المحمولة؟
نعم. تتكيف الأداة تلقائيًا مع عرض الحاوية الأب لتلائم شاشات الهواتف الذكية والأجهزة اللوحية والأشرطة الجانبية لأجهزة سطح المكتب.
هل تتطلب الأداة مفتاح API أو خاصية data-endpoint؟
لا يلزم أي مفتاح API، ولا تحتاج إلى إضافة خاصية data-endpoint؛ حيث تستنتج الأداة رابط البيانات تلقائيًا من مسار ملف widget.js.