اگر تاکنون برای نمایش مکان‌های کسب‌وکار یا رویدادهای خود در سایت وردپرسی‌تان به دنبال راهی ساده اما قدرتمند بودید، این مقاله دقیقاً همان پاسخی است که میخواهید. ما چهار روش معتبر برای افزودن نقشه گوگل را قدم به قدم، همراه با نکات عملی و هشدارهای رایج، بررسی می‌کنیم تا از هر مرحله به‌راحتی عبور کنید. از استفاده از بلاک‌کد ساده در ویرایشگر تا به‌کارگیری افزونههای پیشرفته‌تری که امکان سفارشیسازی عمیق را می‌دهند، همه جزئیات در اختیار شماست.
در هر روش، نکات فنی مانند دریافت API Key، تنظیمات محدودیت‌ها و بهینه‌سازی بارگذاری را بهصورت واضح و بدون اصطلاحات مبهم شرح می‌دهیم. با دنبال کردن این راهنما، میتوانید نقشه‌های تعاملی، دقیق و هماهنگ با طراحی سایت خود را به‌سرعت پیاده‌سازی کنید و تجربه بازدیدکنندگان را به‌سطح جدیدی برسانید.
فهرست مطالب
- درک پایه نقشه گوگل وردپرس
- نصب افزونه مناسب برای نقشه
- تنظیم کلید API و دسترسی‌ها
- افزودن نقشه با بلوک گوتنبرگ
- سفارشیسازی پیشرفته با کدهای کوتاه
- سوالات متداول
درک پایه نقشه گوگل وردپرس
قبل از شروع به افزودن نقشه به سایت وردپرسی، باید بدانید که دو روش اصلی برای نمایش نقشه وجود دارد: استفاده از کد iframe برای تعبیه مستقیم و استفاده از API جاوااسکریپت گوگل برای کنترل پیشرفته‌تر. اولین روش برای اکثر کاربران ساده‌ترین گزینه است؛ شما فقط کافی است یک URL تعبیه شده از گوگل‌نقشه بگیرید و در محتوا یا یک ویجت قرار دهید. اما اگر میخواهید نقشه را سفارشی کنید-مثلاً مارکرهای متعدد، لایه‌های سفارشی یا واکنش‌پذیری بهتر-آنگاه باید یک کلید API دریافت کنید و اسکریپت‌های مربوطه را در قالب یا افزونه‌تان بارگذاری کنید.
کلید API یک رشته‌ی منحصر به‌فرد است که برای شناسایی درخواست‌های شما به سرویس‌های گوگل استفاده میشود. برای دریافت آن به Google Cloud Console بروید، یک پروژه جدید بسازید، سرویس “Maps JavaScript API” را فعال کنید و سپس کلید را در بخش “Credentials” ایجاد کنید. حتماً محدودیتهای استفاده (مانند محدود کردن دسترسی به دامنه‌های شما) را تنظیم کنید تا از سوءاستفاده جلوگیری شود. پس از دریافت کلید، میتوانید آن را در wp-config.php یا بهصورت متغیر در افزونه‌تان ذخیره کنید.
در ادامه یک جدول مقایسه‌ای کوتاه بین روش‌های تعبیه و API آورده شده است تا به‌سرعت تفاوت‌های کلیدی را ببینید:
| ویژگی | تعبیه iframe | API جاوااسکریپت |
|---|---|---|
| سطح پیچیدگی | پایین، بدون نیاز به کدنویسی | متوسط تا بالا، نیاز به جاوااسکریپت |
| قابلیت سفارشیسازی | محدود (ارتفاع/عرض، زوم اولیه) | پایدار (مارکر، مسیر، لایه‌های داده) |
| نیاز به کلید API | خیر (تا حدی محدود) | بله، برای همه درخواست‌ها |
| قابلیت واکنش‌پذیری | بسته به CSS خارجی | قابلیت خودکار از طریق API |
به‌عنوان مثال، برای نمایش موقعیت فروشگاه شما در تهران میتوانید از کد زیر استفاده کنید. این کد یک iframe ساده است که طول 400 پیکسل و عرض 100 ٪ دارد و بهصورت خودکار در صفحات موبایل نیز مقیاس میشود.
اگر تصمیم گرفتید از API استفاده کنید، میتوانید اسکریپت زیر را در فایل functions.php اضافه کنید تا کلید API بهصورت امن بارگذاری شود:
function enqueue_google_maps_api() {
wp_enqueue_script(
'google-maps',
'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY',
array(),
null,
true
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_google_maps_api' );
به یاد داشته باشید که پس از افزودن این اسکریپت، میتوانید در قالب یا صفحه‌ساز خود یک div با شناسهٔ map تعریف کنید و با یک تابع جاوااسکریپت ساده، مکان دلخواه را به‌عنوان مارکر نمایش دهید. این ترکیب از تعبیه ساده و قابلیت سفارشیسازی پیشرفته به شما اجازه می‌دهد تا بسته به نیازهای پروژه‌تان، بهترین روش را انتخاب کنید.
نصب افزونه مناسب برای نقشه
اولین قدم برای افزودن نقشه به سایت وردپرس، انتخاب افزونه‌ای است که با نیازهای شما همخوانی داشته باشد. افزونههای مختلف، ویژگی‌های متفاوتی ارائه می‌دهند؛ برخی به سادگی قرار دادن یک نقطه روی نقشه می‌پردازند، در حالی که برخی دیگر امکان نمایش چندین مارکر، لایه‌های سفارشی و حتی مسیرهای رانندگی را فراهم می‌کنند. برای تصمیم‌گیری، به مواردی چون سهولت استفاده، پشتیبانی از بروزرسانی‌های گوگل‌مپ، وزن افزونه و قابلیت سازگاری با قالب‌تان توجه کنید.
در ادامه یک جدول مقایسه‌ای کوتاه بین سه افزونه محبوب ارائه میشود تا بتوانید به‌سرعت تشخیص دهید کدامیک مناسب‌ترین گزینه است:
| افزونه | ویژگی‌های کلیدی | مزایا | معایب |
|---|---|---|---|
| WP Google Maps | پشتیبانی از مارکرهای متعدد، استایل‌های سفارشی، ادغام با Elementor | رابط کاربری ساده، مستندات جامع | نسخه رایگان محدود به 3 مارکر |
| MapPress Easy Google Maps | قابلیت افزودن مسیرهای رانندگی، نمایش اطلاعات کسب‌وکار، کوتاه‌کردن URL نقشه | نصب سریع، به‌روزرسانی خودکار API | پیکربندی پیشرفته ممکن است برای تازه‌کاران پیچیده باشد |
| Google Maps Easy | پشتیبانی از نقشه‌های واکنش‌گرا، قابلیت افزودن فیلدهای سفارشی به پنجره اطلاعات | وزن کم، سازگار با اکثر قالب‌ها | قابلیت‌های پیشرفته فقط در نسخه پرمیوم موجود است |
پس از انتخاب افزونه، نصب آن شبیه سایر افزونههای وردپرس است. در پیشخوان وردپرس به افزونه‌ها → افزودن جدید رفته، نام افزونه را در کادر جستجو وارد کنید، سپس روی «نصب» و بعد «فعال‌سازی» کلیک کنید. برخی افزونه‌ها پس از فعال‌سازی یک صفحه تنظیمات مخصوص به خود ایجاد می‌کنند؛ اینجا میتوانید کلید API گوگل‌مپ (که از Google Cloud Console دریافت میشود) را وارد کنید و تنظیمات پیش‌فرض مانند زوم اولیه، سبک نقشه و مکان پیش‌فرض را تعیین کنید.
نکتهٔ کاربردی: برای جلوگیری از بارگذاری‌های اضافی، فقط در صفحات یا نوشته‌هایی که به نقشه نیاز دارند، شورتکد یا بلوک افزونه را قرار دهید. به‌عنوان مثال، اگر فروشگاه فیزیکی دارید، میتوانید شورتکد [wp_google_map id="1"] را در برگه «تماس با ما» قرار دهید تا بازدیدکنندگان به راحتی مکان شما را ببینند. همچنین، استفاده از قابلیت کش (Cache) سرور یا افزونههای کش وردپرس، می‌تواند سرعت بارگذاری نقشه‌ها را به‌طور قابل توجهی بهبود بخشد.
تنظیم کلید API و دسترسی‌ها
کلید API نقش «کلید عبور» را برای ارتباط وب‌سایت شما با سرویس‌های نقشه‌گوگل ایفا می‌کند. بدون این کلید، درخواست‌های بارگذاری نقشه یا جستجوی مکانها توسط مرورگر رد می‌شوند و کاربران هیچ نقشهای نمی‌بینند. برای جلوگیری از سوءاستفاده، گوگل به شما اجازه می‌دهد دسترسی‌ها را بهصورت دقیق تنظیم کنید؛ بنابراین قبل از هر چیز، یک پروژه جدید در Google Cloud Console ایجاد کنید و سرویس‌های مورد نیاز مثل Maps JavaScript API، Geocoding API و Places API را فعال نمایید.
کلید API را میتوانید در بخش «Credentials» (اعتبارنامه‌ها) ایجاد کنید. مراحل زیر را بهصورت گام‌به‌گام دنبال کنید:
- به Google Cloud Console وارد شوید.
- یک پروژه جدید بسازید یا از پروژه موجود استفاده کنید.
- از منوی سمت چپ به APIs & Services > Library بروید و API‑های مورد نیاز را جستجو و فعال کنید.
- به APIs & Services > Credentials رفته، روی «Create credentials» کلیک کنید و «API key» را انتخاب کنید.
- کلید تولید شده را کپی کنید؛ این کلید همان چیزی است که در تنظیمات افزونه نقشه یا کدهای سفارشی وردپرس استفاده می‌کنید.
پس از دریافت کلید، تنظیم محدودیت‌ها (restrictions) بسیار مهم است؛ این کار نه تنها هزینه‌های غیرمنتظره را کاهش می‌دهد، بلکه مانع دسترسی افراد غیرمجاز میشود. دو دسته اصلی محدودیت وجود دارد:
- محدودیتهای برنامه (Application restrictions): میتوانید دسترسی را به دامنه‌های خاص (HTTP referrers)، آدرس‌های IP یا برنامه‌های موبایل محدود کنید.
- محدودیتهای API (API restrictions): فقط API‑هایی که واقعاً استفاده می‌کنید (مانند Maps JavaScript API) را انتخاب کنید تا کلید برای دیگر سرویس‌ها کار نکند.
| نوع محدودیت | مثال تنظیم | دلیل استفاده |
|---|---|---|
| HTTP referrer | https://example.com/* | محدود به دامنه وردپرس شما |
| IP address | 203.0.113.0/24 | سرورهای اختصاصی یا CDN |
| API | Maps JavaScript, Geocoding | جلوگیری از سو استفاده از سرویس‌های دیگر |
یک نکته کاربردی: اگر سایت شما در محیط staging (آزمایشی) نیز از همان کلید استفاده می‌کند، میتوانید دو رفرر جداگانه اضافه کنید؛ مثلاً https://example.com/* برای محیط اصلی و https://staging.example.com/* برای آزمایش. این کار باعث میشود هیچ‌گاه کلید در محیط‌های دیگر (مانند localhost) کار نکند و هزینه‌های غیرقابل پیش‌بینی به‌حداقل برسد.
افزودن نقشه با بلوک گوتنبرگ
در ویرایشگر گوتنبرگ میتوانید به‌سرعت یک نقشه گوگل را به هر صفحه یا نوشته‌ای اضافه کنید، بدون اینکه نیازی به نصب افزونهٔ جداگانه داشته باشید. این کار با استفاده از بلوک «Embed» یا بلوک مخصوص «Google Maps» انجام میشود؛ کافی است آدرس صفحهٔ موردنظر را در قالب https://www.google.com/maps/place/... وارد کنید و گوتنبرگ بهصورت خودکار کد iframe را تولید می‌کند.
مراحل پایه‌ای برای به این صورت است:
- در ویرایشگر، روی دکمه + کلیک کنید و گزینهٔ Embed یا Google Maps را جستجو کنید.
- آدرس دقیق مکان موردنظر را از گوگل مپس کپی کنید (بهصورت URL کامل).
- آدرس را در فیلد متن بلوک بچسبانید؛ گوتنبرگ به‌سرعت پیشنمایش نقشه را نشان می‌دهد.
- در صورت نیاز میتوانید عرض و ارتفاع iframe را در تنظیمات بلوک (Panel) تنظیم کنید تا با طرح‌بندی سایت شما سازگار شود.
- دکمهٔ Insert را بزنید و نقشه در محتوا قرار می‌گیرد.
اگر میخواهید کنترل دقیق‌تری بر روی ظاهر یا عملکرد نقشه داشته باشید، میتوانید از بلوک Custom HTML استفاده کنید و کد iframe را بهصورت دستی وارد کنید. در این حالت میتوانید پارامترهای zoom، language یا maptype را بهصورت مستقیم در URL تنظیم کنید؛ برای مثال:
دقت کنید که برای استفادهٔ پیشرفته (مانند افزودن نشانگرهای سفارشی یا لایه‌های اطلاعاتی) نیاز به کلید API گوگل دارید؛ این کلید را میتوانید از Google Cloud Console دریافت کنید و در پارامتر key URL وارد نمایید.
| مرحله | عمل انجام شده |
|---|---|
| 1 | انتخاب بلوک Embed یا Google Maps |
| 2 | کپی URL مکان از گوگل مپس |
| 3 | چسباندن URL در فیلد بلوک |
| 4 | تنظیم عرض/ارتفاع و سایر پارامترها |
| 5 | ذخیره و انتشار محتوا |
نکتهٔ مهمی که گاهی نادیده گرفته میشود، فعال بودن HTTPS برای سایت است؛ گوگل مپس فقط بر روی صفحات امن iframe می‌دهد. اگر سایت شما از HTTP استفاده می‌کند، نقشه بهصورت خالی نمایش داده میشود. برای رفع این مشکل، گواهینامهٔ SSL نصب کنید یا از سرویس‌های رایگان مانند Let’s Encrypt استفاده کنید. پس از اعمال این تغییر، نقشه بهصورت روان و بدون خطا در همهٔ مرورگرها لود میشود.
سفارشیسازی پیشرفته با کدهای کوتاه
کدهای کوتاه (shortcodes) راهی ساده اما قدرتمند برای افزودن نقشه گوگل به هر پست یا برگه وردپرس بدون نیاز به ویرایش کدهای قالب فراهم می‌کنند. با استفاده از یک رشتهٔ کوتاه میتوانید موقعیت جغرافیایی، زوم، سبک نقشه و حتی مارکرهای سفارشی را در همانجا تنظیم کنید. این روش به ویژه برای وب‌سایت‌های خبری، وبلاگ‌های سفر یا فروشگاه‌های محلی که نیاز به نمایش چندین مکان دارند، ایده‌آل است.
کد کوتاه پایه‌ای که اکثر افزونههای نقشه ارائه می‌دهند به شکل زیر است:
[google_map address="تهران، میدان آزادی" width="100%" height="400px"]در این مثال، پارامتر address محل مورد نظر را تعریف می‌کند، در حالی که width و height ابعاد نمایش نقشه را تنظیم می‌نمایند. به‌راحتی میتوانید این کد را در ویرایشگر گوتنبرگ یا کلاسیک وارد کنید و نقشه بلافاصله رندر میشود.
برای سفارشیسازی پیشرفته‌تر میتوانید از ویژگی‌های اضافهٔ زیر استفاده کنید. هر ویژگی با یک کلید‑مقدار جدا میشود و میتوانید ترکیبی از آن‌ها را در یک کد کوتاه ترکیب کنید:
| ویژگی | مقدار پیشنهادی | توضیح |
|---|---|---|
zoom | 10‑15 | سطح زوم اولیه؛ عدد بزرگتر نمای نزدیک‌تر. |
maptype | roadmap, satellite, hybrid, terrain | نوع نمایش نقشه؛ پیش‌فرض roadmap است. |
marker | آدرس یا مختصات (lat,lng) | مکان‌نمایی یک یا چند مارکر بر روی نقشه. |
infowindow | متن HTML کوتاه | پنجرهٔ اطلاعاتی که هنگام کلیک بر مارکر ظاهر میشود. |
style | dark, light, retro | استایل سفارشی که از طریق JSON یا تم‌های آماده اعمال میشود. |
مثال ترکیبی:
[google_map address="اصفهان، مسجد جامع" width="100%" height="450px" zoom="14" maptype="satellite" marker="31.6295,51.4292" infowindow="مسجد جامع - یکی از قدیمی‌ترین مساجد ایران."]نکتهٔ عملی: اگر در قالب خود بهصورت مکرر از همان تنظیمات استفاده می‌کنید، یک تابع PHP کوتاه‌نویس (custom shortcode) بسازید که پارامترهای پیش‌فرض را در خود داشته باشد؛ سپس تنها کافی است شناسهٔ مکان را به‌عنوان آرگومان پاس دهید. این کار نه تنها کدهای شما را تمیز می‌کند، بلکه نگهداری و به‌روزرسانی نقشه‌ها را در مقیاس بزرگ بسیار ساده می‌سازد.
سوالات متداول
چگونه کلید API گوگل مپ را برای وردپرس دریافت کنم؟
ابتدا به Google Cloud Console وارد شوید و یک پروژه جدید ایجاد کنید. سپس سرویس Maps JavaScript API را فعال کنید و یک کلید API تولید کنید. حتماً محدودیتهای استفاده (IP یا referer) را تنظیم کنید تا از سوءاستفاده جلوگیری شود. کلید را در تنظیمات افزونه یا کد کوتاه وردپرس قرار دهید.
آیا میتوانم نقشه را بدون افزونه به صفحه اضافه کنم؟
به نقشهای که میخواهید نمایش دهید در گوگل مپس بروید و گزینه Share > Embed map را انتخاب کنید. کد iframe تولید شده را کپی کنید. سپس در ویرایشگر بلاک HTML در وردپرس آن را بچسبانید. این روش نیازی به افزونه ندارد اما برای سفارشیسازی پیشرفته محدود است.
چرا نقشه در موبایل به درستی نمایش داده نمی‌شود؟
در بسیاری از موارد عرض نقشه به صورت ثابت تنظیم شده است؛ برای ریسپانسیو کردن آن، container را با عرض 100٪ و ارتفاع مناسب تعریف کنید. میتوانید با افزودن کلاس wp-block-embed یا استفاده از CSS .map-container {width:100%;height:300px;} مشکل را حل کنید. همچنین اطمینان حاصل کنید که تگ meta viewport در هدر سایت فعال باشد. اگر از افزونه استفاده می‌کنید، گزینه responsive را روشن کنید.
آیا میتوانم چند مکان را در یک نقشه نشان دهم؟
برای نشان دادن چند مکان در یک نقشه میتوانید از افزونههای مانند WP Google Maps یا MapPress استفاده کنید که امکان افزودن چند Marker را دارند. اگر ترجیح میدهید کد سفارشی بنویسید، در تنظیمات API یک آرایه از مختصات تعریف کنید و با روش new google.maps.Marker برای هر مکان یک نشانگر ایجاد کنید. حتماً کلید API معتبر داشته باشید و محدودیتهای referer را تنظیم کنید. پس از ذخیره، نقشه با تمام مکانها بهصورت دینامیک بارگذاری میشود.
چک لیست سریع
- مفهوم پایه‌ای کارکرد نقشه گوگل در وردپرس را درک کنید.
- یک افزونه سازگار و به‌روز انتخاب و نصب کنید.
- کلید API را ایجاد و دسترسی‌های لازم (Geocoding, Maps JavaScript) را تنظیم کنید.
- نقشه را با بلوک گوتنبرگ به صفحه یا پست اضافه کنید.
- برای تنظیمات پیشرفته از شورتکدهای سفارشی استفاده کنید.
- پیشنمایش واکنش‌گرا و عملکرد بر روی موبایل را بررسی کنید.
- کلید API را محدود به دامنه‌تان کنید تا امنیت حفظ شود.
با ترکیب افزونههای مناسب، بلوک گوتنبرگ یا شورتکدهای سفارشی میتوانید نقشه‌های گوگل را به‌سرعت و با دقت در وب‌سایت‌تان یکپارچه کنید. هر روش مزایای خاص خود را دارد و بسته به نیاز میتوانید سطح سفارشیسازی را تنظیم کنید. نظرات یا سوالات خود را دربارهٔ بهترین روش برای پروژه‌تان به اشتراک بگذارید.