مقالات وردپرس

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

سلام دوستان؛

مدیران شرکت‌های معتبر دوست دارند، در سایت خود ( مخصوصا در صفحه تماس با ما)، آدرس شرکت خود را به‌صورت نقشه نمایش دهند. این کار هم باعث زیبایی سایت می‌شود و هم نشانه‌ی اعتبار شرکت است. البته کاربرد نقشه گوگل فراتر از صفحه تماس با ما است و هر سایتی که بخواهد مکانی را نمایش دهد، می‌تواند از این نقشه‌ها استفاده کند. اما اگر بخواهیم نقشه گوگل را در وردپرس قرار دهیم، باید وارد سایت maps.google.com شده و بعد از تعیین دقیق نقشه، کد iframe آن را به وردپرس بیاوریم. البته اگر بخواهیم اندازه نقشه را تغییر داده و یا مکانی از نقشه را علامت‌گذاری کنیم، کار پیچیده‌تر می‌شود. اما نمی‌شود نقشه گوگل را در خود سایت مدیریت کرد؟

در قالب پارالاکس Parallax One که مدتی قبل در همیار وردپرس معرفی شده است، برای نمایش نقشه گوگل از افزونه Intergeo Maps استفاده شده بود.این افزونه تمام امکانات خود سایت Google Maps را به وردپرس اضافه کرده و کار با آن را در حد یک تفریح! ساده کرده است و با استفاده از آن در هر نوع قالب وردپرس، می‌توان به راحتی از نقشه‌های گوگل استفاده کرد.

آموزش  افزودن نقشه گوگل به وردپرس با Intergeo Maps

  1. به بخش افزونه‌ها > افزودن > بارگذاری افزونه، رفته و Intergeo Maps را نصب می‌کنیم
  2. با نصب افزونه، در بخش رسانه، گزینه Intergeo Maps افزوده شده است.
  3. با کلیک روی Intergeo Maps و بعد کلیک روی Add new نقشه‌ی خود را می‌سازیم

Intergeo Maps-1-hamyarwp.com

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

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

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

اگر بخواهیم اندازه تصویر را مشخص کنیم، کافیست در تب styles روی Container’s Styles کلیک کرده و مقادیر width (عرض) و height (طول) را تغییر می‌دهیم.

Intergeo Maps-2-hamyarwp.com

هر دوی این مقادیر را می‌توان با مقدار ثابت (به پیکسل) و مقدار نسبی(درصد) مقداردهی کرد. به این دلیل که این نقشه در یک محتوا یا یک سایدبار قرار می‌گیرد، می‌توانیم به width مقدار ۱۰۰% دهیم. تا بهترین نمایش را در آن محتوا یا سایدبار داشته و همچنین نمایش مطلوبی در هر نوع صفحه نمایش (مثلا موبایل) داشته باشد.در مورد height نیز اندازه مطلوب را به پیکسل (مثلا ۴۰۰px) وارد می‌کنیم.

اگر می‌خواهیم در نقشه خود، مکان(یا مکان‌هایی) را علامت‌گذاری کنیم یا مثلا دور یک قطعه زمین خط بکشیم و …؛ می‌توانیم به بخش Overlays رفته و تیک Enable drawing tools را بزنیم تا ابزار مخصوص رسم روی نقشه ظاهر شود.

Intergeo Maps-3-hamyarwp.com

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

بعد از اتمام ویرایش، روی گزینه Create the map کلیک می‌کنیم تا کد کوتاه قالب در اختیار ما قرار بگیرد.

Intergeo Maps-4-hamyarwp.com

اگر می‌خواهیم نقشه را در برگه‌ای مثل تماس با ما قرار دهیم، کافیست به بخش برگه‌ها رفته و روی ویرایش برگه‌ی مورد نظر کلیک کنیم. حالا هر جای متن که خواستیم این کد را قرار دهیم(این کار برای نوشته‌ها یا هر نوع متن دیگر هم ممکن است)

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

افزونه Intergeo Maps

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

منبع : همیار وردپرس

درباره نویسنده

رضا ترکی

رضا ترکی

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

ارسال نظر