آموزش وردپرس

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

امروز قصد داریم مشکلی را بررسی کنیم که تقریبا همه ی خریداران قالب های وردپرس در ماه های اخیر با این مشکل مواجه هستند، یعنی مشکل نقشه گوگل در وردپرس! در این خطا اگر زبان سایت شما فارسی باشد، در جای نقشه ی گوگل عبارت “‏این صفحه Google Maps را درست بارگیری نکرد. برای اطلاع از جزئیات فنی، کنسول جاوا اسکریپت را مشاهده کنید.” یا معادل انگلیسی آن را مشاهده خواهید کرد. گوگل با توجه تغییراتی که در قوانین دسترسی به محتوای خود و حریم شخصی کاربران داد، این قانون را گذاشت که برای نمایش نقشه های گوگل در وبسایت خود می بایست یک API در گوگل ایجاد نمایید و آن را در سایت خود قرار دهید تا این اتصال توسط API گوگل مپ که شما ساخته اید انجام شود. این مشکل منحصر به وردپرس نیست و برای رفع مشکل عدم نمایش گوگل مپ در سایت در همه سایت ها و حتی نرم افزار های اندروید نیازمند کد API گوگل هستید. با توجه به اینکه ماهیت وبسایت ما بر اساس وردپرس است، در این آموزش نیز رفع این مشکل را در سیستم وردپرس توضیح خواهیم داد. این مشکل که در وردپرس معمولا در افزونه ویژوال کامپوزر (Visual Composer) رخ می دهد و کاربران فکر می کنند مشکل عدم نمایش نقشه گوگل در ویژوال کامپوزر به دلیل مشکل این افزونه است، دو راه حل پیشنهاد می شود.

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

روش اول- آموزش حل مشکل نقشه گوگل وردپرس با افزونه:

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

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

حال در صفحه کنونی، متن مقابل را مشاهده می کنید:

To Get a Google Maps API KEY click here

روی این لینک کلیک کنید تا به صفحه ی ساخت API در گوگل هدایت شوید. (توجه داشته باشید که با توجه به تحریم های گوگل، برای این قسمت حتما باید IP خود را عوض کنید تا بتوانید محتوای سایت را ببینید.) حال در وبسایت گوگل مانند تصویر زیر دکمه Continue را بزنید.

عدم نمایش گوگل مپ در سایت وردپرس

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

مشکل لود نشدن نقشه Google map وردپرس ویژوال کامپوسر

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

آموزش دریافت کد API گوگل مپ

دوباره به پنل تنظیمات افزونه بروید و کد کپی شده را مانند تصویر زیر در باکس قرار داده و ذخیره کنید.

مشکل ویژوال کامپوزر نقشه گوگل مپ

 

 

روش دوم – حل مشکل نمایش نقشه گوگل در وردپرس:

این روش نیز بسیار ساده است اما اگر کمی به کدنویسی و تگ های html تسلط دارید از آن استفاده نمایید. برای این روش کافیست از روش لینک بالا ابتدا کد API نقشه گوگل را بسازید، سپس در هاست خود به مسیر wp-content/themes/(ThemeName)/header.php رفته و آن را ویرایش کنید و داخت تگ Head عبارت زیر را قرار دهید:

    <script src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap” async defer></script>

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

 

2 نظر

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

پاسخ دادن به مصطفی X