# افزودن نقشه به برگهٔ وردپرس

<span id="wordpress-map-widget"></span>

در این راهنما یک برگهٔ «تماس با ما» می‌سازید و نقشهٔ برداری بلد را با نشانگر روی آن قرار می‌دهید. اگر برگهٔ تماس دارید، می‌توانید همان را ویرایش کنید.

## پیش‌نیازها

- نام کاربری و رمز ورود به پیشخوان وردپرس و دسترسی ویرایش برگه‌ها.
- یک [کلید عمومی](/dashboard/docs/authentication#کلید-عمومی-برای-مرورگر) بلد با دسترسی نقشهٔ برداری. نشانی سایت، شامل `http` یا `https` و پورت احتمالی، باید در مبدأهای مجاز کلید ثبت شده باشد.
- اجازهٔ قراردادن تگ `script` در وردپرس. اگر این دسترسی را ندارید، از مدیر سایت کمک بگیرید.

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

## ۱. وارد پیشخوان شوید

نشانی ورود وردپرس سایت خود را باز کنید؛ معمولاً با افزودن `/wp-admin` به نشانی سایت به آن می‌رسید. نام کاربری و رمز وردپرس را وارد کنید و **ورود** را بزنید.

[![صفحهٔ ورود وردپرس فارسی؛ فلش‌ها محل نام کاربری، رمز عبور و دکمهٔ ورود را نشان می‌دهند](/dashboard/docs/assets/wordpress-fa-login.webp)](/dashboard/docs/assets/wordpress-fa-login.webp)

## ۲. برگه بسازید یا برگهٔ موجود را باز کنید

در منوی پیشخوان روی **برگه‌ها** بزنید.

[![منوی پیشخوان وردپرس فارسی؛ فلش به گزینهٔ برگه‌ها اشاره می‌کند](/dashboard/docs/assets/wordpress-fa-dashboard.webp)](/dashboard/docs/assets/wordpress-fa-dashboard.webp)

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

[![فهرست برگه‌های وردپرس؛ یک فلش افزودن برگه و فلش دیگر ویرایش برگهٔ تماس با ما را نشان می‌دهد](/dashboard/docs/assets/wordpress-fa-pages.webp)](/dashboard/docs/assets/wordpress-fa-pages.webp)

## ۳. عنوان و بلوک را اضافه کنید

برای برگهٔ جدید، در محل عنوان عبارت «تماس با ما» را بنویسید. سپس روی دکمهٔ **+** برای افزودن بلوک بزنید. در برگهٔ موجود، بلوک را در محل دلخواه اضافه کنید.

[![ویرایشگر برگهٔ تماس با ما؛ فلش‌ها محل عنوان و دکمهٔ افزودن بلوک را نشان می‌دهند](/dashboard/docs/assets/wordpress-fa-title.webp)](/dashboard/docs/assets/wordpress-fa-title.webp)

در کادر جستجوی بلوک‌ها، `HTML سفارشی` را جستجو و همان بلوک را انتخاب کنید. در وردپرس انگلیسی نام آن `Custom HTML` است.

[![جستجوی HTML سفارشی در ویرایشگر فارسی وردپرس؛ فلش‌ها کادر جستجو و بلوک را نشان می‌دهند](/dashboard/docs/assets/wordpress-fa-picker.webp)](/dashboard/docs/assets/wordpress-fa-picker.webp)

اگر دکمهٔ **ویرایش HTML** داخل بلوک نمایش داده شد، آن را بزنید تا کادر واردکردن کد باز شود. در بعضی نسخه‌ها می‌توانید کد را مستقیم داخل بلوک بنویسید.

[![بلوک HTML سفارشی در برگه؛ فلش به دکمهٔ ویرایش HTML اشاره می‌کند](/dashboard/docs/assets/wordpress-fa-edit-block.webp)](/dashboard/docs/assets/wordpress-fa-edit-block.webp)

## ۴. کد نقشه و نشانگر را قرار دهید

کد زیر را کپی و در بخش HTML بلوک جای‌گذاری کنید:

```html
<link href="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.css" rel="stylesheet">

<div id="store-map"
     aria-label="نقشه موقعیت فروشگاه"
     style="height:360px;border-radius:16px;overflow:hidden"></div>

<script src="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.js"></script>
<script>
maplibregl.setRTLTextPlugin(
  "https://tile-vector.services.balad.ir/rtl/mapbox-gl-rtl-text.js", true,
);
const map = new maplibregl.Map({
  container: "store-map",
  style: "https://tile-vector.services.balad.ir/styles/vector.json?api_key=YOUR_PUBLIC_API_KEY",
  center: [51.4197, 35.7042],
  zoom: 15,
  minZoom: 3,
  attributionControl: { compact: false },
});

new maplibregl.Marker()
  .setLngLat([51.4197, 35.7042])
  .addTo(map);
</script>
```

عبارت `YOUR_PUBLIC_API_KEY` را با **کلید عمومی** خود جایگزین کنید. برای نمایش موقعیت خودتان، مختصات `center` و `setLngLat` را به ترتیب **طول جغرافیایی، عرض جغرافیایی** تغییر دهید. عدد بزرگ‌تر در `zoom` نقشه را از نزدیک‌تر نشان می‌دهد.

اگر پنجره‌ای مانند تصویر باز است، پس از ویرایش کد روی **به‌روزرسانی** بزنید. فلش بالا جای کلید نمونه و فلش پایین دکمهٔ ثبت کد را نشان می‌دهد.

[![ویرایشگر HTML فارسی وردپرس؛ فلش‌ها جای کلید نمونه و دکمهٔ به‌روزرسانی را نشان می‌دهند](/dashboard/docs/assets/wordpress-fa-code.webp)](/dashboard/docs/assets/wordpress-fa-code.webp)

تا وقتی کلید نمونه را جایگزین نکنید، نقشه بارگذاری نمی‌شود؛ خالی یا ناقص بودن پیش‌نمایش در این مرحله طبیعی است. در تصویر بالا نیز از جای‌نگهدار کلید استفاده شده است.

## ۵. پیش‌نمایش را بررسی کنید

از نوار بالای ویرایشگر، **نمایش** و سپس **پیش‌نمایش در زبانهٔ تازه** را انتخاب کنید. نقشه باید در یک کادر ۳۶۰ پیکسلی، همراه نشانگر و نوشته‌های فارسی دیده شود.

[![منوی نمایش وردپرس فارسی؛ فلش به گزینهٔ پیش‌نمایش در زبانهٔ تازه اشاره می‌کند](/dashboard/docs/assets/wordpress-fa-preview.webp)](/dashboard/docs/assets/wordpress-fa-preview.webp)

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

## ۶. برگه را منتشر یا ذخیره کنید

برای برگهٔ جدید، **انتشار** را بزنید و اگر پنجرهٔ تأیید باز شد، دوباره **انتشار** را انتخاب کنید. برای برگهٔ موجود، تغییرات را با **ذخیره** یا **به‌روزرسانی** ثبت کنید.

[![دو مرحلهٔ انتشار در وردپرس فارسی؛ فلش‌ها دکمهٔ انتشار و تأیید انتشار را نشان می‌دهند](/dashboard/docs/assets/wordpress-fa-publish.webp)](/dashboard/docs/assets/wordpress-fa-publish.webp)

این تصویر نتیجهٔ نمونهٔ واقعی برگهٔ «تماس با ما» و نشانگر آن است:

[![برگهٔ تماس با ما در وردپرس فارسی؛ فلش نشانگر را روی نقشهٔ برداری بلد نشان می‌دهد](/dashboard/docs/assets/wordpress-fa-result.webp)](/dashboard/docs/assets/wordpress-fa-result.webp)

نام و کپی‌رایت بلد و OpenStreetMap باید روی نقشه دیده شود. حذف آن ممکن است به بسته‌شدن حساب شما منجر شود.

## اگر نقشه دیده نشد

- بررسی کنید `YOUR_PUBLIC_API_KEY` را جایگزین کرده‌اید و کلید، **عمومی** و دارای دسترسی نقشهٔ برداری است.
- مبدأ مجاز باید با نشانی صفحه، شامل `https` و پورت احتمالی، یکسان باشد. کلید خصوصی را در HTML یا کد مرورگر قرار ندهید.
- اگر در ویرایشگر خالی است، پیش‌نمایش را در زبانهٔ تازه باز کنید. اگر آنجا هم خالی است، خطاهای شبکهٔ مرورگر را برای پاسخ `401` یا `403` بررسی کنید.
- وردپرس ممکن است تگ `script` را برای کاربرانی که دسترسی `unfiltered_html` ندارند حذف کند. از مدیر سایت برای استفاده از افزونه یا Shortcode مناسب کمک بگیرید.

[راهنمای نقشهٔ برداری](/dashboard/docs/tile-vector) · [راهنمای کلیدها](/dashboard/docs/authentication) · [همهٔ آموزش‌ها](/dashboard/docs/guides)