نمایش موقعیت مکانی در وردپرس با افزونه رایگان WP Go Maps

اگه می‌خواید آدرس دفتر، فروشگاه، مطب یا محل برگزاری رویدادتون رو روی سایت نشون بدید، لازم نیست کدنویسی بلد باشید یا برای سرویس نقشه پول بدید. توی این آموزش، نمایش موقعیت مکانی در وردپرس رو با نسخه رایگان افزونه WP Go Maps انجام می‌دیم. برای نقشه هم سراغ موتوری می‌ریم که برای شروع به کلید API گوگل نیاز نداره.

اول افزونه رو نصب می‌کنیم و موتور نقشه رو انتخاب می‌کنیم. بعد یک نشانگر برای آدرسمون می‌سازیم و نقشه رو داخل برگه «تماس با ما» یا هر بخش دیگه‌ای از سایت می‌ذاریم. در کنارش می‌بینیم خود وردپرس چه امکاناتی داره، Google Maps چه زمانی به کلید API و صورت‌حساب نیاز داره و چطور می‌تونیم خطاهای رایج نقشه رو برطرف کنیم.

نمایش موقعیت مکانی در وردپرس بدون پرداخت هزینه

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

البته اضافه‌کردن نقشه به‌تنهایی رتبه محلی سایتتون رو در گوگل بالا نمی‌بره. برای سئوی محلی، درست‌بودن نام، آدرس و شماره تماس کسب‌وکار هم مهمه. کامل‌بودن نمایه کسب‌وکار گوگل و مرتبط‌بودن محتوای صفحه با چیزی که کاربر جست‌وجو می‌کنه هم تأثیر داره. پس بهتره نقشه رو یک راهنمای کاربردی برای کاربر بدونید، نه راه میان‌بری که رتبه بهتر رو تضمین می‌کنه.

آیا خود وردپرس بلوک نقشه داره؟

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

افزونه رایگان WP Go Maps

افزونه‌ای که قبلاً با نام WP Google Maps شناخته می‌شد، حالا WP Go Maps نام داره. نسخه رایگان اون برای ساخت نقشه، اضافه‌کردن نشانگر و نمایش نقشه در برگه یا نوشته کافیه. این افزونه چند موتور نقشه داره. موتور نقشه همون سرویس فنی‌ای هست که تصویر و اطلاعات نقشه رو بارگذاری می‌کنه.

توی این آموزش یکی از موتورهای رایگان و بدون نیاز به کلید Google Maps، مثل OpenLayers، رو انتخاب می‌کنیم. ممکنه نام یا ترتیب بعضی گزینه‌ها بعد از به‌روزرسانی افزونه کمی عوض بشه، ولی مسیر کلی ساخت نقشه تفاوت زیادی نمی‌کنه.

با نسخه رایگان چه کارهایی می‌تونید انجام بدید؟

• یک نقشه برای نمایش آدرس کسب‌وکارتون بسازید.
• موقعیت دلخواهتون رو با نشانگر روی نقشه مشخص کنید.
• اندازه، بزرگ‌نمایی و محل اولیه نقشه رو تنظیم کنید.
• نقشه رو با بلوک افزونه یا شورت‌کد داخل محتوا بذارید.
• از یک موتور نقشه رایگان و بدون کلید Google Maps استفاده کنید.

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

نصب افزونه رایگان WP Go Maps

وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید. عبارت WP Go Maps رو داخل کادر جست‌وجو بنویسید. نام افزونه و سازنده اون رو با اطلاعات صفحه رسمی مخزن وردپرس تطبیق بدید. بعد روی «نصب» و سپس «فعال‌کردن» کلیک کنید. اگه اولین باره این کار رو انجام می‌دید، آموزش نصب افزونه در وردپرس تمام مراحل رو ساده‌تر براتون توضیح می‌ده.

بعد از فعال‌شدن افزونه، گزینه مربوط به نقشه‌ها با نامی مثل Maps یا WP Go Maps به منوی پیشخوان اضافه می‌شه. روی این گزینه کلیک کنید تا صفحه مدیریت نقشه‌ها باز بشه.

انتخاب موتور نقشه رایگان

ممکنه افزونه هنگام راه‌اندازی اولیه ازتون بخواد موتور نقشه رو انتخاب کنید. برای اینکه این آموزش کاملاً رایگان بمونه، گزینه‌ای مثل OpenLayers رو انتخاب کنید. این گزینه برای شروع به کلید API گوگل یا فعال‌کردن صورت‌حساب نیاز نداره. اگه صفحه انتخاب موتور رو ندیدید، می‌تونید گزینه مربوط به اون رو در بخش Settings افزونه پیدا کنید.

API راهی هست که افزونه از طریق اون با یک سرویس دیگه ارتباط برقرار می‌کنه. کلید API هم یک شناسه اختصاصی هست که سرویس با کمک اون درخواست‌های سایتتون رو تشخیص می‌ده. با انتخاب موتور رایگان این آموزش، لازم نیست درگیر ساخت کلید Google Maps بشید.

ساخت نقشه در WP Go Maps

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

تنظیمات عمومی نقشه

اول یک نام مشخص مثل «نقشه دفتر مرکزی» برای نقشه بنویسید. این نام بیشتر برای مدیریت نقشه‌ها در پیشخوان کاربرد داره و کمک می‌کنه بعداً نقشه موردنظرتون رو راحت پیدا کنید.

عرض نقشه رو روی ۱۰۰ درصد بذارید تا تمام فضای در دسترس صفحه رو بگیره. برای ارتفاع می‌تونید از مقداری مثل ۴۰۰ پیکسل شروع کنید. بعد صفحه رو در موبایل هم باز کنید و ببینید ارتفاع نقشه مناسب هست یا نه. واکنش‌گرابودن نقشه فقط به این دو مقدار بستگی نداره و قالب سایتتون هم روی نتیجه نهایی اثر می‌ذاره.

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

بعد از هر تغییر روی Save Map یا دکمه ذخیره کلیک کنید. اگه تنظیمات رو مرحله‌به‌مرحله ذخیره کنید، احتمال ازدست‌رفتن تغییرات کمتر می‌شه.

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

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

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

اگه فیلد عنوان یا توضیح در نسخه رایگان برای شما در دسترس بود، نام شعبه و یک توضیح کوتاه رو هم اضافه کنید. اطلاعات حساس، آدرس منزل شخصی یا هر موقعیتی رو که نباید عمومی باشه روی نقشه نذارید. در پایان روی Add Marker یا Save Marker کلیک کنید و خود نقشه رو هم دوباره ذخیره کنید.

نمایش نقشه در برگه یا نوشته وردپرس

برگه‌ای مثل «تماس با ما» رو باز کنید و روی علامت «+» در ویرایشگر بزنید. WP Go Maps رو جست‌وجو کنید و بلوک افزونه رو به صفحه اضافه کنید. حالا نقشه‌ای رو که ساختید از تنظیمات بلوک انتخاب کنید و پیش‌نمایش صفحه رو ببینید.

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

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

اگه بخواید از Google Maps استفاده کنید

روش رایگانی که بالاتر دیدیم برای نمایش یک موقعیت معمولی کافیه. ولی اگه به قابلیت مشخصی از Google Maps نیاز دارید، باید موتور نقشه افزونه رو تغییر بدید و طبق راهنمای رسمی Google Maps Platform یک کلید API بسازید. گوگل برای استفاده عملی از Maps JavaScript API معمولاً فعال‌بودن صورت‌حساب پروژه رو هم بررسی می‌کنه؛ حتی اگه میزان مصرفتون داخل اعتبار یا سهمیه قابل‌استفاده باشه.

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

رفع مشکلات رایج نمایش نقشه

• نقشه خالیه: اول کش سایت و مرورگر رو پاک کنید و بعد صفحه رو در حالت ناشناس باز کنید. افزونه‌های بهینه‌سازی JavaScript هم ممکنه فایل‌های نقشه رو با تأخیر بارگذاری یا مسدود کنن.
• نشانگر جای اشتباهیه: فقط به متن آدرس تکیه نکنید. مختصات دقیق رو وارد کنید و محل نشانگر رو با خیابون‌های اطراف تطبیق بدید.
• بلوک افزونه دیده نمی‌شه: اول مطمئن بشید افزونه فعاله. اگه همچنان بلوک رو پیدا نکردید، از بلوک «کد کوتاه» و شورت‌کد همون نقشه استفاده کنید.
• پیام For development purposes only دیده می‌شه: این پیام معمولاً به تنظیمات Google Maps مربوطه. فعال‌بودن صورت‌حساب، API موردنیاز، اعتبار کلید و محدودیت دامنه رو بررسی کنید.
• نقشه روی موبایل از صفحه بیرون می‌زنه: عرض نقشه رو روی ۱۰۰ درصد بذارید و ببینید قالب یا صفحه‌ساز عرض ثابتی به نقشه اضافه کرده یا نه.
• بعد از بهینه‌سازی سایت نقشه نمایش داده نمی‌شه: فایل‌های افزونه نقشه رو به‌صورت موقت از تأخیر یا ترکیب JavaScript خارج کنید و دوباره صفحه رو آزمایش کنید.

اگه موتور رایگان بدون مشکل کار می‌کنه، فقط برای اینکه ظاهر Google Maps براتون آشناتره سراغ API گوگل نرید. برای یک سایت تازه‌کار، انتخاب ساده‌تر یعنی تنظیمات کمتر، احتمال خطای پایین‌تر و نگهداری راحت‌تر.

سؤالات ر

جمع‌بندی

حالا نقشه سایتتون آماده‌ست. بهتره هر چند وقت یک‌بار آدرس، محل نشانگر و نحوه نمایش نقشه در موبایل رو بررسی کنید؛ مخصوصاً بعد از اینکه افزونه، قالب یا ابزارهای بهینه‌سازی رو به‌روزرسانی می‌کنید.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.