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

موقعیت فروشگاه‌ اینترنتی در وردپرس
موقعیت فروشگاه‌ اینترنتی در وردپرس

آیا می‌دانید چرا از نقشه در سایت‌های معروف یا به عبارتی وبسایت‌های فروشگاهی و شرکتی استفاده می‌کنند؟ مسلما برای اینکه موقعیت مکانی را برای مشتریان به نمایش بگذارند تا در صورت لزوم بتوانند به راحتی آن‌ها را بیابند. موقعیت فروشگاه‌ اینترنتی در وردپرس را نیز می‌توان با افزونه و بدون آن فعال کرد. شما با نمایش موقعیت مکانی خود می‌توانید به کاربران کمک کنید اولا شما را سریع‌تر پیدا کنند و در ثانی بتوانند موقعیت را با دیگران به اشتراک بگذارند. در این مقاله می‌خواهیم با دو روش کاربردی دست به تعیین موقعیت مکانی در وردپرس بزنیم. موافقید؟ 

موقعیت فروشگاه‌ اینترنتی در وردپرس

روش اول برای تعیین موقعیت فروشگاه‌ اینترنتی در وردپرس بصورت دستی انجام می‌شود و نیازی به افزونه ندارد. تنها چیزی که به آن نیازمندیم دقت و مهارت است.
اما در روش دوم با کمک یک افزونه کاربردی به نام Google Maps Store Locator می‌خواهیم به تعیین موقعیت مکانی در وردپرس بپردازیم. اینگونه دست شما را در انتخاب باز می‌گذاریم تا هر روش را که تمایل دارید برای خود انتخاب کنید.

روش اول: اضافه کردن موقعیت مکانی با گوگل مپ بدون افزونه

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

store location- تعیین موقعیت دقیق فروشگاه
موقعیت مکانی فروشگاه را روی نقشه گوگل پیدا کنید

مطمئن شوید که تعیین موقعیت مکانی در وردپرس را به درستی انجام داده‌اید. با کلیک روی موقعیت مکانی پنجره کناری مانند تصویر بالا باز می‌شود؛ با کلیک روی گزینه Share باید کد اچ تی ام ال را بیابید.

html code- کد اچ تی ام ال
کد اچ تی ام ال را برای جایگذاری کپی کنید

همان‌طور که مشاهده می‌کنید می‌توان اندازه‌های مختلفی را برای نقشه خود در نظر گرفته و سپس کد اچ‌تی‌ام‌ال مربوطه را دریافت کرد.

حرکت به سمت پیشخوان وردپرس

حال باید به پیشخوان وردپرس برویم تا بتوانیم موقعیت فروشگاه‌ اینترنتی در وردپرس را در بخش مورد نظر تعیین کنیم. در ویرایشگر بلوک و کلاسیک باید این کد را در بخش متنی یا HTML جایگذاری کرد.

custom html- بلوک اچ تی ام ال
قرار دادن کد نقشه در بلوک اچ تی ام ال سفارشی
paste html- قرار دادن آیفریم
آیفرم مورد نظر را در بخش اچ تی ام ال قرار دهید

حال می‌توانید نتیجه عملکرد را با کلیک روی پیش‌نمایش مشاهده کنید:

result store location- نتیجه نهایی از موقعیت مکانی فروشگاه
با کلیک روی پیش‌نمایش، نتیجه نهایی از موقعیت فروشگاه را مشاهده کنید

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

افزونه WP Store Locator

افزونه‌ای که در این مقاله قصد معرفی و آموزش آن را داریم، افزونه WP Store Locator است که با استفاده از آن قادر به تعیین موقعیت مکانی در وردپرس توسط نقشه به همراه اطلاعات آن‌ها خواهید بود. این افزونه توانسته است امتیاز ۴/۹ از ۵ را در مخزن وردپرس به خود اختصاص دهد که نشان از رضایت اکثریت کاربران مصرف کننده از آن است.

برخی از ویژگی‌های افزونه

  • قابلیت نمایش مکان‌ها بر روی نقشه به همراه اطلاعات تماس
  • قابلیت نمایش بی‌نهایت مکان بر روی نقشه
  • قابلیت شخصی‌سازی استایل نقشه‌ها
  • پشتیبانی از افزونه‌های چندزبانه سایت
  • و…

نصب و راه‌اندازی افزونه

تعیین موقعیت مکانی در وردپرس
تعیین موقعیت مکانی در وردپرس با افزونه WP Store Locator

برای استفاده از این افزونه ابتدا نیاز به نصب آن بر روی سایت وردپرسی خود دارید. پس از نصب باید از کد API گوگل برای نمایش نقشه استفاده کنید. برای این‌کار ابتدا به بخش تنظیمات افزونه و بخش Google Maps API مراجعه کنید. در این بخش از شما می‌خواهد که برخی اطلاعات را وارد کنید که اولین آن کد API است؛ برای دریافت این کد به صفحه console.developers.google.com مراجعه کنید. در این بخش پنجره‌ای مانند صفحه زیر مشاهده می‌کنید که باید اطلاعات آن را وارد کنید.

api key- دریافت کد ای پی آی
کد API را برای فعال‌سازی افزونه و اتصال آن به سایت فعال کنید

Name: در این بخش باید نامی را برای API خود وارد کنید؛ به طور مثال می‌توانید نام سایت خود را وارد کنید.
Key Restriction: در این بخش باید نوع استفاده خود از کد API را وارد کنید.
IP Adress: در این بخش باید IP سروری را که سایت شما بر روی آن در حال میزبانی است را وارد کنید.

Search

این بخش مربوط به تنظیمات جستجوی کاربران در نقشه سایت برای پیدا کردن موقعیت فروشگاه‌ اینترنتی در وردپرس است.

search- جستجوی کاربران
تنظیمات مربوط به جستجوی کاربران بر روی نقشه

Enable autocomplete: با استفاده از این گزینه می‌توانید به صورت خودکار برخی از نتایج جستجو را به کاربران نمایش دهید.
Show the max results dropdown: با استفاده از این گزینه می‌توانید حداکثر تعداد نمایش نتایج جستجو را از کاربر بخواهید.
Enable category filters: یکی از امکانات این افزونه قابلیت دسته‌بندی نقشه‌های ایجاد شده بر روی سایت برای موقعیت فروشگاه‌ اینترنتی در وردپرس است. با استفاده از این گزینه می‌توانید نتایج جستجو را براساس دسته‌بندی‌های مختلف فیلتر کنید.
Filter type: با استفاده از این گزینه می‌توانید نوع فیلتر جستجو را فعال کنید.
Distance unit: در این بخش باید واحد مسافت‌های نمایشی بر روی نقشه را برحسب کیلومتر یا Mile مشخص کنید.
Max search results: با استفاده از این گزینه می‌توانید حداکثر تعداد نتایج جستجوی نقشه‌ها توسط کاربران را مشخص کنید.

Map

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

map- محتوای نمایشی نقشه
محتوای نمایشی نقشه را مشخص کنید

Attempt to auto-locate the user: با استفاده از این گزینه می‌توانید نزدیک‌ترین فروشگاه را براساس موقعیت کاربر به آنها نمایش دهید.
Load locations on page load: با استفاده از این گزینه، بارگذاری نقشه هم‌زمان با بارگذاری صفحه سایت صورت خواهد پذیرفت؛ با این‌کار ممکن است زمان بارگذاری سایت افزایش یابد که پیشنهاد می‌کنیم این بخش را فعال نکنید.
Max auto zoom level: با استفاده از این گزینه می‌توانید حداکثر میزان زوم بر روی نقشه را تعیین کنید.
Show the street view controls: با استفاده از این گزینه می‌توانید گزینه‌های مربوط به نمایش و انتقال در خیابان مورد نمایش در نقشه را فعال کنید.

Enable scroll wheel zooming: با استفاده از این گزینه می‌توانید قابلیت زوم کردن بر روی نقشه را با استفاده از غلتک موس کاربر فعال کنید.
Zoom control position: با استفاده از این گزینه می‌توانید موقعیت دکمه زوم کردن بر روی نقشه را تعیین کنید.
Map type: با استفاده از این گزینه می‌توانید نوع نقشه‌ی خود را تعیین کنید تا نقشه به صورت بهتری در سایت نمایش داده شود.
Map style: با استفاده از کدهای CSS می‌توانید نقشه نمایشی در سایت را شخصی‌سازی کنید؛ برای این‌کار کافی است کدهای خود را در همین بخش وارد کنید تا با همان استایل در سایت با توجه به موقعیت فروشگاه‌ اینترنتی در وردپرس نمایش داده شود.

User Experience

این بخش مربوط به تجربه کاربری یا همان نوع نمایش نقشه برای کاربران سایت شما است.

user experience- نوع نمایش نقشه به کاربران
تنظیمات مربوط به نوع نمایش نقشه به کاربران

Store Locator height: با استفاده از این گزینه می‌توانید ارتفاع موردنظر خود را جهت نمایش موقعیت فروشگاه‌ اینترنتی در وردپرس مشخص کنید.
Max width for the info window content: افزونه نقشه را برای کاربران مختلف به صورت واکنش‌گرا نمایش می‌دهد؛ با این حال باید حداکثر سایز موردنظر خود را جهت نمایش نقشه در سایت در این بخش وارد کنید.
Search field width: در این بخش باید عرض موردنظر خود را جهت نمایش باکس جستجو وارد کنید.
Store Locator template: در این بخش باید قالب موردنظر خود را برای نمایش نقشه انتخاب کنید.

Open links in a new window: در صورت استفاده از لینک در نقشه، می‌توانید با استفاده از این گزینه لینک مورد استفاده را در صفحه جدید باز کنید.
Show a reset map button: گاهی اوقات ممکن است نقشه برای کاربران به صورت کامل بارگذاری نشود! در اینصورت کاربران می‌توانند با کلیک بر روی این گزینه تنها نقشه را مجددا بارگذاری کنند و نیازی به بارگذاری مجدد صفحه نخواهد بود.

Markers

در این بخش می‌توانید نشانگرهای مربوط به نمایش موقعیت فروشگاه‌ اینترنتی در وردپرس در نقشه را سفارشی‌سازی کنید.

markers- نشانگرها نمایش موقعیت
نشانگرهای مربوط به نمایش موقعیت فروشگاه‌ اینترنتی در وردپرس در نقشه

Store Editor

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

Permalink

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

Lable

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

Tools

در این بخش می‌توانید برخی از ابزارهای اضافی و متنوع را بر روی نقشه‌های مورد استفاده در سایت خود را فعال کنید.

پس از اعمال تنظیمات بالا، با استفاده از بخش New Store می‌توانید نقشه‌ موردنظر خود را به همراه اطلاعات وارد کنید. پس از آن با استفاده از شورت‌کد [wpsl] آن را در برگه نمایش دهید؛ توجه داشته باشید این شورت‌کد تنها برای برگه‌ها فعال می‌شود و بر روی ابزارک‌ها فعال نخواهد شد.

map result- نقشه مکانی با کمک افزونه
نتیجه نهایی از ساخت نقشه با کمک افزونه


تعیین موقعیت مکانی در وردپرس

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

دانلود افزونه WP Store Locator

دانلود افزونه صفحه افزونه
  تکمیل شدن خودکار فیلد آدرس در وردپرس با Address Autocomplete Using Google Place Api

منابع:

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

319,156 نفر

پاسخی بگذارید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 5 ماه عضو همیار وردپرس

    ضمن عرض سلام و خسته نباشید. میخواهم لوگوی طراحی شده برای سایت را در بالای صفحه اصلی سایت قرار دهم(شبه سایت همیار وردپرس) . برای این کار از چه افزونه ای میتوانم استفاده کنم ؟ممنون از لطف شما

  2. با سلام
    آیا با افزونه دکان یا مولتی پلییس سازگاری دارد؟

  3. 2 سال عضو همیار وردپرس

    تو قسمت google map api به جز server key یه گزینه دیگه هم داره browser key ، این و چی باید بزنیم ؟

  4. 2 سال عضو همیار وردپرس

    سلام ممنون از مقاله خوبتون خیلی مفید بود.

مطالب زیر را حتما بخوانید

دوره‌های آموزشی