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

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

پیش‌نیازها

• نام کاربری و رمز ورود به پیشخوان وردپرس و دسترسی ویرایش برگه‌ها.
• یک کلید عمومی بلد با دسترسی نقشهٔ برداری. نشانی سایت، شامل http یا https و پورت احتمالی، باید در مبدأهای مجاز کلید ثبت شده باشد.
• اجازهٔ قراردادن تگ script در وردپرس. اگر این دسترسی را ندارید، از مدیر سایت کمک بگیرید.

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

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

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

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

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

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

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

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

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

اگر دکمهٔ ویرایش 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 نقشه را از نزدیک‌تر نشان می‌دهد.

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

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

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

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

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

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

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

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

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

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

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

راهنمای نقشهٔ برداری · راهنمای کلیدها · همهٔ آموزش‌ها