نحوه افزودن مکان یاب فروشگاه Google Maps در وردپرس

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

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

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

How to add a Google Maps store locator in WordPress

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

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

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

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

روش 1. افزودن Google Maps به وب سایت خود به صورت رایگان h4>

این روش آسان تر و رایگان است. نقطه ضعف این است که شما نمی توانید چندین فروشگاه را در یک نقشه نشان دهید.

برای کاربرانی که می خواهند فقط یک مکان فروشگاه Google Maps را در وب سایت خود اضافه کنند ، توصیه می شود.

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

Sharing a map in Google Maps

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

با این کار یک پنجره بازشو ظاهر می شود که در آن باید به برگه “جاسازی نقشه” بروید. اکنون مکان جستجوی خود را با کد HTML بر روی نقشه مشاهده خواهید کرد.

Copy the Google Maps embed code

برای دریافت کد جاسازی بر روی پیوند کپی HTML کلیک کنید.

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

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

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

Adding a custom HTML block in WordPress

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

Maps embed code in WordPress

اکنون می توانید برای مشاهده Google Maps جاسازی شده در صفحه خود ، به برگه پیش نمایش بروید. این مکان فروشگاه شما را با پیوندهایی به مسیرها یا برای ذخیره مکان ، روی نقشه مشخص کرده است.

Store location marked on the map

روش 2. با استفاده از یک افزونه وردپرس مکان یاب فروشگاه Google Maps را اضافه کنید h4>

این روش برای کاربرانی که می خواهند چندین مکان فروشگاه را در Google Map نشان دهند ، توصیه می شود.

اولین کاری که باید انجام دهید نصب و فعال کردن افزونه WP Store Locator . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

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

عیب این روش این است که شما را ملزم به اضافه کردن کلید API می کند. برای استفاده از کلید API باید اطلاعات صورتحساب خود را ارائه دهید. برای قیمت گذاری و سایر اطلاعات ، لطفاً به Google Maps مراجعه کنید وب سایت پلت فرم .

آماده است ، شروع می کنیم.

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

برای استفاده از افزونه WP Store Locator ، باید دو کلید API تولید کنید. کلید اول Browser API key و کلید دوم Server Key نامیده می شود.

ابتدا با کلید مرورگر شروع می کنیم. بر روی این کلیک کنید Google Developer Console پیوند و شما را با داشتن همه API های مورد نیاز به وب سایت Google API می برد.

Create a new project

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

سپس ، به صفحه پیکربندی کلید API هدایت می شوید. شما باید عنوانی برای کلید API خود ارائه دهید ، بنابراین می توانید آن را به راحتی به عنوان کلید api مرورگر برای پروژه Google Maps خود شناسایی کنید.

Browser api key settings

بعد ، شما باید “محدودیت های برنامه” را روی “ارجاع دهندگان HTTP” تنظیم کنید. در زیر آن باید قسمت “پذیرش درخواست ها از” را به نام دامنه خود در قالب زیر تنظیم کنید.

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

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

Copy browser api key

بعد ، باید کلید API سرور را ایجاد کنید. روی این کلیک کنید Google Developer Console پیوند و شما را مستقیم به کنسول با فعال بودن API ها می برد.

یک بار دیگر صفحه ایجاد پروژه را مشاهده خواهید کرد. اما از آنجا که قبلاً یک پروژه ایجاد کرده اید ، می توانید فقط روی منوی کشویی کلیک کرده و پروژه خود را انتخاب کنید.

Select your Google Maps project

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

Set IP restrictions

در بخش “محدودیت های برنامه” ، باید آدرس های IP را انتخاب کنید. اساساً ، ما به Google می گوییم که فقط درخواستهای سرور را که از آدرسهای IP خاص وارد می شوند ، بپذیرد.

اکنون باید از تا محدوده IP استفاده شده توسط حساب میزبانی شما را به شما بگوید. در قالب زیر خواهد بود:

172.16.0.0/12

بعد از آن ، برای ذخیره تنظیمات خود باید روی دکمه “ایجاد” کلیک کنید و کلید Server API را کپی کنید.

مرحله 2. راه اندازی افزونه WP Store Locator

هنگامی که کلیدهای API خود را ایجاد کردید ، برای راه اندازی افزونه باید به صفحه فروشگاه یاب »تنظیمات بروید.