قرار دادن قیمت ارز در سایت با کد HTML؛ آموزش برای هر سایت‌ساز و قالب

اگر سایت شما با وردپرس نیست یا می‌خواهید قیمت را در جای مشخصی از یک صفحهٔ HTML، سایت‌ساز یا فروشگاه‌ساز نشان دهید، ساده‌ترین روش کد ویجت است. در این آموزش قرار دادن قیمت ارز در سایت را برای پلتفرم‌های مختلف قدم‌به‌قدم انجام می‌دهیم.

این آموزش بخشی از راهنمای ابزارهای نمایش قیمت ارز و طلا است. اگر سایت وردپرسی دارید، نمایش قیمت ارز در وردپرس با افزونه ساده‌تر است.

گام ۱: ساخت ویجت

1. در EZRate ثبت‌نام و وارد پنل کاربری شوید.
2. بخش ویجت را از منو سمت راست باز کنید و ویجت جدید بسازید.
3. دارایی‌ها را انتخاب کنید؛ مثلاً دلار، یورو، طلای ۱۸، سکه امامی و تتر.
4. نوع نمایش را انتخاب کنید: نوار ثابت، زیرنویس متحرک، کارت‌ها یا نمودار.
5. زبان، واحد پول و تم روشن یا تیره را تنظیم کنید و پیش‌نمایش را ببینید.
6. روی دکمه ساخت ویجت و دریافت کد بزنید و کد را کپی کنید.

شکل کد

<!-- جای نمایش ویجت -->
<div class="ezrate-widget" data-ezrate="WIDGET_ID"><a href="https://ezrate.me/fa">قیمت ارز — EZRate</a></div>

<!-- یک‌بار در هر صفحه، ترجیحاً قبل از </body> -->
<script src="https://ezrate.me/widget.js" async></script>

لینک داخل div تا لحظهٔ بارگذاری ویجت دیده می‌شود و بعد جای خود را به قیمت‌ها می‌دهد. اگر چند ویجت در یک صفحه دارید، تگ script را فقط یک‌بار بگذارید.

گام ۲: جای‌گذاری در پلتفرم‌های مختلف

صفحهٔ HTML ساده

div را در جایی از بدنه که می‌خواهید قیمت دیده شود و script را قبل از </body> بگذارید.

وردپرس بدون افزونه

در ویرایشگر گوتنبرگ یک بلوک «HTML سفارشی» اضافه کنید و هر دو بخش کد را در آن بچسبانید. برای نمایش در همهٔ صفحه‌ها، از «نمایش › ابزارک‌ها» یک ابزارک HTML در ستون کناری یا فوتر بسازید.

سایت‌سازها و فروشگاه‌سازها

بیشتر سایت‌سازهای ایرانی و خارجی بخشی برای «کد سفارشی»، «HTML» یا «اسکریپت سفارشی» دارند. نام این بخش در پلتفرم‌ها متفاوت است، اما اصل یکی است: div را در بلوک HTML صفحه و script را در بخش «کد پایان صفحه» یا همان بلوک بگذارید. اگر پلتفرم شما فقط اجازهٔ کد در هدر می‌دهد، چون script با async بارگذاری می‌شود، در هدر هم کار می‌کند.

فریم‌ورک‌های جاوااسکریپتی (React، Vue)

script را یک‌بار در قالب اصلی (index.html) بگذارید. در صفحه‌هایی که بعد از بارگذاری اولیه ساخته می‌شوند، بعد از قرار گرفتن div در DOM، window.EZRateWidgets?.scan() را صدا بزنید تا ویجت‌های جدید پیدا و پر شوند.

ویژگی‌های اختیاری روی div

<!-- همان ویجت در صفحهٔ انگلیسی سایت، با قیمت به دلار -->
<div class="ezrate-widget" data-ezrate="WIDGET_ID" data-lang="en" data-currency="usd"></div>

این یعنی برای نسخه‌های چندزبانهٔ سایت لازم نیست چند ویجت جدا بسازید.

کجای صفحه بهتر است؟

• نوار ثابت بالای صفحه: برای سایت‌های خبری و فروشگاه‌هایی که می‌خواهند قیمت دلار در همهٔ صفحه‌ها دیده شود.
• کارت‌ها در ستون کناری: برای وبلاگ‌ها و سایت‌های شرکتی.
• نمودار داخل مقاله: برای تحلیل‌ها؛ نمودار کنار متن، ماندگاری خواننده را بیشتر می‌کند.
• زیرنویس متحرک بالای فوتر: وقتی نمی‌خواهید بالای صفحه شلوغ شود.

رفع مشکلات رایج

برای تنظیمات ظاهری بیشتر، شخصی‌سازی ویجت قیمت ارز و برای سرعت، ویجت سبک قیمت ارز را بخوانید.

نرخ‌های لحظه‌ای مرتبط با این مطلب: قیمت دلار، قیمت طلای ۱۸ عیار، قیمت سکه امامی.