توثيق الويدجت
دليل كامل لتضمين وتخصيص ويدجت محول العملات Currency.Wiki على موقعك.
جدول المحتويات
1 البدء
إضافة ويدجت محول العملات إلى موقعك أمر سهل. اتبع هذه الخطوات البسيطة:
- انتقل إلى صفحة منشئ الويدجت وخصص مظهر الويدجت
- اختر نمط الويدجت المفضل، العملات، والثيم
- انسخ كود التضمين المُولد (سكريبت أو Iframe)
- الصق الكود في HTML موقعك حيث تريد ظهور الويدجت
نصيحة: استخدم إعدادات البدء السريع في منشئ الويدجت للانطلاق بسرعة مع ويدجت مُعد مسبقاً.
2 طرق التضمين
تضمين سكريبت (موصى به)
طريقة تضمين السكريبت تضيف الويدجت مباشرة إلى صفحتك. قوائم العملات المنسدلة ستظهر أمام المحتوى المحيط لسهولة الاختيار.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- القوائم تظهر خارج حاوية الويدجت
- الأفضل لاختيار العملات بشكل تفاعلي
- تكامل سلس مع صفحتك
تضمين Iframe
طريقة تضمين Iframe تنشئ حاوية معزولة للويدجت. هذه الطريقة آمنة وتعمل في بيئات ذات سياسات محتوى صارمة.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- معزول تماماً عن أنماط صفحتك
- يعمل مع سياسات أمان المحتوى الصارمة
- تنفيذ بسيط وآمن
ملاحظة: استخدم تضمين السكريبت للتفاعل الكامل (القوائم تظهر فوق المحتوى). استخدم Iframe عند الحاجة للعزل أو وجود قيود CSP.
3 أنماط الويدجت
اختر من بين 11 نمطاً مختلفاً للويدجت ليتناسب مع تصميم موقعك. كل نمط محسّن لحالات استخدام وأحجام عرض مختلفة.
mini
250x140px
محول مضغوط بسطر واحد. مثالي للرؤوس أو المساحات الضيقة.
square
250x250px
ويدجت بنسبة 1:1 مع زر التبديل. رائع للشريط الجانبي.
compact
300x180px
محول صغير الحجم مع جميع الميزات الأساسية.
inline
480x56px
تخطيط أفقي. مثالي للتضمين داخل المحتوى أو التنقل.
tall
200x280px
تخطيط شريط جانبي رأسي مع تسميات كلاسيكية.
mini-chart
250x260px
محول مضغوط مع مخطط شرارة يعرض تاريخ الأسعار.
multi-expandable
300x320px
محول متعدد العملات. يمكن للمستخدمين إضافة/إزالة العملات.
multi-fixed
300x300px
قائمة أسعار صرف ثابتة. الأفضل لعرض أسعار محددة.
rates-compact
250x320px
قائمة أسعار صرف مضغوطة مع وقت آخر تحديث.
rates-viewer
300x500px
عرض مخطط كامل مع معلومات أسعار مفصلة.
rates-viewer-compact
300x400px
نسخة مضغوطة من عارض الأسعار مع مخططات.
4 معاملات URL
خصص ويدجتك باستخدام معاملات URL. هذه المعاملات تعمل مع طريقتي التضمين (سكريبت وIframe).
| المعامل | الافتراضي | الوصف |
|---|---|---|
| style | compact | نمط الويدجت (mini، square، compact، inline، tall، mini-chart، multi-expandable، multi-fixed، rates-compact، rates-viewer، rates-viewer-compact) |
| theme | light | ثيم الألوان (فاتح، داكن، أو تلقائي) |
| from | USD | رمز العملة المصدر (مثلاً USD، EUR، GBP) |
| to | EUR | رمز العملة الهدف (مثلاً EUR، USD، JPY) |
| amount | 1000 | المبلغ الافتراضي للتحويل |
| accent | #2563eb | لون التمييز بصيغة hex (بدون #) |
| lang | en | رمز لغة الويدجت (مثلاً en، es، fr، de) |
| flags | 1 | عرض أعلام الدول (1=عرض، 0=إخفاء) |
| display | iso | تنسيق عرض العملة (iso=USD، symbol=$) |
| lock | 0 | قفل العملات (1=مقفل، 0=غير مقفل) |
| currencies | EUR,GBP,JPY | قائمة العملات مفصولة بفواصل للويدجت متعدد العملات |
| dropdown | all | عملات القائمة المنسدلة (all، top10، top20، أو قائمة مفصولة بفواصل) |
| branding | 1 | عرض العلامة التجارية (1=عرض، 0=إخفاء) |
| brandinglink | 1 | جعل العلامة التجارية قابلة للنقر (1=رابط، 0=نص فقط) |
| format | auto | تنسيق الأرقام (auto، us، eu، french، indian) |
| decimals | 2 | عدد الخانات العشرية (0-6) |
| chart | 0 | تفعيل المخطط (1=مفعل، 0=معطل) |
| chartperiod | 7d | فترة المخطط (7d، 14d، 30d، 90d) |
أمثلة
محول مضغوط بثيم داكن:
?style=compact&theme=dark&from=USD&to=EUR
أسعار صرف متعددة العملات:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
محول صغير مع مخطط 30 يوماً:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
عرض رموز العملات بدلاً من الأكواد:
?style=compact&display=symbol&from=USD&to=EUR
عملات مقفلة مع مبلغ مخصص:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 خيارات التخصيص
خيارات الثيم
- light - خلفية فاتحة مع نص داكن
- dark - خلفية داكنة مع نص فاتح
- auto - يتبع تفضيل نظام المستخدم تلقائياً
تنسيق عرض العملة
- iso - يعرض أكواد ISO مثل USD، EUR، GBP
- symbol - يعرض رموز العملات مثل $، €، £
تنسيقات الأرقام
- auto - يكتشف إعدادات متصفح الزائر تلقائياً
- us - تنسيق أمريكي: 1,234.56
- eu - تنسيق أوروبي: 1.234,56
- french - تنسيق فرنسي: 1 234,56
- indian - تنسيق هندي: 1,23,456.78
خيارات عملات القائمة المنسدلة
- all - جميع العملات المدعومة الـ 170+
- top10 - أكثر 10 عملات شعبية
- top20 - أفضل 20 عملة حسب حجم التداول
- USD,EUR,GBP,... - قائمة مخصصة من العملات المحددة
نصيحة: استخدم منشئ الويدجت لضبط جميع هذه الخيارات بصرياً وتوليد كود التضمين تلقائياً.
6 استكشاف الأخطاء
الويدجت لا يظهر
تأكد من وضع كود التضمين بشكل صحيح في HTML. لتضمين السكريبت، تأكد من وجود div الحاوي بالمعرف الصحيح. تحقق من وحدة تحكم المتصفح لأي أخطاء JavaScript.
القائمة المنسدلة لا تعمل
إذا كنت تستخدم تضمين iframe، ستتحرك القوائم المنسدلة داخل منطقة الأداة. للحصول على وظيفة القوائم المنسدلة الكاملة مع التراكبات، استخدم طريقة تضمين السكربت بدلاً من ذلك.
تعارضات النمط
إذا كان CSS الخاص بموقعك يؤثر على مظهر الأداة، جرب استخدام طريقة تضمين iframe التي تعزل أنماط الأداة عن صفحتك.
مشاكل سياسة أمان المحتوى
إذا كانت لديك سياسة CSP صارمة، قد تحتاج إلى إضافة currency.wiki إلى توجيهات script-src و frame-src المسموح بها. مثال: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
تحتاج إلى مساعدة؟
لا يمكنك العثور على ما تبحث عنه؟ فريق الدعم لدينا هنا لمساعدتك.
