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

نحوه اضافه کردن Google Maps Store Locator در WordPress

نحوه اضافه کردن Google Maps در وردپرس

مکان یاب یک نقشه آنلاین است که به محل کسب و کار شما اشاره می کند.

همچنین به کاربران و دوستان شما اجازه می دهد تا محل شما را در نقشه مشاهده کنند و در پیدا کردن مسیرهای رانندگی و یا به اشتراک گذاری مکان با افراد دیگر کمک می کند.

اضافه کردن یک مکان یاب به سایت کسب و کار شما کمک می کند تا بلافاصله اعتماد کاربران را بدست آورید.

روش اول. اضافه کردن نقشه های گوگل در سایت به صورت رایگان

یکی از محدودیت های این روش،این است که نمیتوان چندین مکان را در یک نقشه واحد نشان داد.

این روش به کاربرانی توصیه می شود که می خواهند فقط یک مکان را در سایت خود قرار دهند.

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

می توانید با کلیک روی دکمه زوم،سطح زوم را انتخاب کنید و سپس روی دکمه اشتراک گذاری در ستون سمت چپ کلیک کنید.

پنجره ای نمایش داده می شود که در آن باید به برگه ‘Embed a Map’ بروید.

حالا محل جستجوی خود را بر روی نقشه با کد HTML مشاهده خواهید کرد.

برای دریافت کد روی لینک Copy HTML کلیک کنید و به قسمت مدیریت سایت وردپرس خود بروید.

در صفحه ویرایش پست، یک بلوک HTML سفارشی اضافه کنید و کد خود را که از Google Maps کپی کرده اید در آن قرار دهید.

حالا به برگه پیش نمایش رفته تا نقشه های Google که مکان شما را نشان می دهد را مشاهده کنید.

روش دوم. اضافه کردن Google Maps Store Locator با استفاده از پلاگین وردپرس

این روش به کاربرانی که مایل به نمایش چندین مکان در نقشه Google هستند توصیه می شود.

اولین کاری که باید انجام دهید نصب و پیکربندی WP Store Locator است.

پلاگین Google Maps رایگان است و اجازه می دهد یک نقشه سفارشی با مکان های متعدد و زمینه های سفارشی ایجاد کنید.

محدودیت این روش این است که شما نیاز به یک کلید API دارید.

برای استفاده از کلید API،لازم است که هزینه پرداخت کنید.

مرحله 1. ایجاد کلید های API Google Maps

برای استفاده از افزونه WP Store Locator،باید دو کلید API ایجاد کنید.

اول API مرورگر و دوم API سرور است.

ابتدا برای کلید مرورگر روی کنسول Google Developer کلیک کنید و تمام API های مورد نیاز را به سایت Google API منتقل کنید.

پس از آن، چند لحظه منتظر بمانید کنسول پروژه را برای شما ایجاد کند و به صفحه پیکربندی کلید API هدایت شوید.

یک عنوان برای API انتخاب کنید تا به عنوان کلید مرورگر برای پروژه Google Maps مشخص شود.

سپس”Application Restrictions” را به “HTTP Referrers” تغییر دهید.

‘Accept requests from’ را به نام دامنه خود مانند فرمت زیر تنظیم کنید و روی “Create” کلیک کنید.

https://example.com/*
https: //*.example.com/* (اگر از زیر دامنه استفاده می کنید)

کنسول تنظیمات را ذخیره می کند و کلید مرورگر را نشان می دهد،کلید را در یک ویرایشگر متن کپی کنید.

برای ایجاد کلید سرور روی کنسول Google Developer کلیک کنید و آن را به طور مستقیم به کنسول با استفاده از API های انتخاب شده فعال کنید.

بار دیگر صفحه پروژه نمایش داده میشود که می توانید بر روی منوی کشویی کلیک کنید و پروژه خود را انتخاب کنید.

سپس به صفحه پیکربندی API هدایت می شوید.

عنوانی برای کلید API انتخاب کنید تا به عنوان کلید سرور شناخته شود.

در قسمت “Application restrictions” ها باید IP Address را انتخاب کنید.

حالا از ارائه دهنده سرویس وردپرس خود بخواهید که محدوده IP مورد استفاده را مشخص کند.

مانند قالب زیر:

172.16.0.0/12

پس از آن، شما باید بر روی دکمه “Create” کلیک کنید تا تنظیمات خود را ذخیره و کلید سرور را کپی کنید.

مرحله 2: راه اندازی WP فروشگاه یاب پلاگین

هنگامی که کلیدهای API خود را ایجاد کردید، برای تنظیم پلاگین به Store Locator » Settings بروید.

API های مرورگر گوگل و کلیدهای API سرور را که قبلا ایجاد کرده اید وارد کنید.

بعد، زبانها و مناطق نقشه را انتخاب کنید و سپس روی دکمه save changes برای ذخیره تنظیمات کلیک کنید.

اکنون، باید در صفحه تنظیمات به قسمت «Map» بروید و نقطه شروع نقشه را مشخص کنید.

این نقطه شروع می تواند یک شهر یا یک کشور باشد، بنابراین کاربران می توانند نشانگرهای موجود در مکان های مختلف را ببینند.

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

مرحله 3. اضافه کردن مکان های موردنظر

در قسمت Store Locator » New Store یک صفحه مکان جدید درست مانند پست ویرایشگر پیش فرض در وردپرس نمایش داده میشود.

یک عنوان مشخص کنید و سپس به بخش «Store details» بروید و  آدرس موردنظر خود را وارد کنید.

یک نقشه در ستون سمت راست خواهید دید،اما به طور خودکار به آدرسی که وارد کرده اید به روز رسانی نمی شود.

برای ذخیره موقعیت مکانی روی دکمه Publish کلیک کنید.

پس از آن، صفحه را refresh کنید تا نقشه به آدرس ارائه شده اشاره کند.

همین روند را برای اضافه کردن مکان های دیگر تکرار کنید.

مرحله 4. اضافه کردن نقشه مکان یاب در وردپرس

در صفحه ویرایش پست،بلوک ‘Shortcode’ را در ویرایش پست خود اضافه کنید.

و عبارت [wpls] را داخل آن اضافه کنید.

هم اکنون می توانید بر روی دکمه پیش نمایش کلیک کنید تا Google Map Locator را در سایت خود مشاهده کنید.

درباره شرکت فناوری اطلاعات مهرسانا

ارائه دهنده خدمات طراحی وب سایت ، گرافیک ، برنامه نویسی و تولید محتوای آموزشی

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *