Wordpress

WordPress Google Maps нұсқаулығы: плагинмен немесе плагинсіз ендіру

WordPress Google Maps мазмұнын сайтыңызға ендірудің жолын іздеп жүрсіз бе?

WordPress-тегі көптеген нәрселер сияқты, қосқыңыз келетін карта мазмұнының түріне байланысты Google карталарын сайтыңызға ендірудің бірнеше түрлі жолдары бар.

Бұл постта біз сізге Google карталарын WordPress жүйесіне плагинсіз қалай қосу керектігін көрсетуден бастаймыз. Содан кейін біз бірнеше плагиндерді ұсынамыз болады Google Maps қолданбасын, сондай-ақ осы тәсілді қолданудың кейбір артықшылықтарын енгізуге көмектеседі. Біз сондай-ақ қазір талап етілетін Google Maps API интерфейсін қалай дұрыс пайдалану керектігін қарастырамыз.

Соңында, біз Google Maps қолданбасын WordPress жүйесінде пайдаланудың кейбір өнімділік мәселелерімен аяқтаймыз және Google Maps қолданбасын ендіру қажет болса да, WordPress сайтыңызды қалай жылдам жүктеуге болатыны туралы кеңестермен бөлісеміз.

Тікелей белгілі бір бөлімге өту үшін төменде басыңыз немесе жай ғана толық оқып шығуыңызға болады.

  • Енді Google Maps API қажет
  • WordPress жүйесіне плагинсіз Google карталарын қалай қосуға болады
  • Сізге көбірек икемділік беретін WordPress Google Maps плагиндері
  • Google Maps өнімділік әсері және өнімділікті жақсарту бойынша кеңестер

Google Maps API енді қажет

11 жылғы 2018 маусымдағы жағдай бойынша а API кілті енді Google Maps үшін қажет. Егер сіз өзіңіздің сайтыңызға Google Maps қолданбасын енгізіп қойған болсаңыз және ол енді жұмыс істемесе, бұл себеп болуы мүмкін. Немесе сізде API кілті жетіспейді. Жақсы жаңалық, сіздердің 99% үшін ол әлі де тегін болуы керек. Төменде Google Maps API бағасы берілген.

Google Maps API бағасы

Google Maps API бағасы

Сондай-ақ Google пайдалану шығындарыңызды өтеу үшін ай сайын төлем шотыңызға қайталанатын $200 несие береді. Көріп отырғаныңыздай, егер сіз мыңдаған сұрауларды жасамайынша, сайтыңызда Google Maps қолданбасын пайдалану сізге ешбір шығын әкелмеуі керек.

Тағы не өзгерді? Ештеңе емес, бірақ WordPress жүйесінде Google Maps қолданбасын пайдаланғыңыз келсе, енді келесі әрекеттерді орындауыңыз керек:

  1. Google Cloud Platform Console есептік жазбасына тіркеліңіз және оны конфигурациялаңыз.
  2. Сізге ешқашан шот алынбауы мүмкін болса да, төлем туралы ақпаратты қосыңыз.
  3. API кілтін Google Maps ендіру кодына немесе плагин параметрлеріне қосыңыз.

Google Maps API кілтін қалай алуға болады

Төменде Google Maps API кілтін алу жолы бойынша қадамдар берілген.

қадам 1

Google Cloud Platform Console қолданбасына өтіңіз. Егер сізде әлі тіркелгі жоқ болса, оны жасаңыз, ол тегін.

қадам 2

Жобаны таңдаңыз немесе жасаңыз.

қадам 3

Төлем тіркелгіңізді орнатыңыз. Олар сізден несие картасын файлға қоюды талап етсе де, жоғары пайдалану шектеулерінен асып кетпесеңіз, сізден ешқашан ақы алынбауы керек.

қадам 4

Сізден бір немесе бірнеше өнімді таңдау сұралады. Бұл сіз пайдаланып жатқан карта түріне байланысты. Мысалы, картаны WordPress сайтыңызға плагинсіз ендіретін болсаңыз (төмендегі қадамдарда көрсетілгендей), Google Maps Embed API таңдайсыз.

Google Maps Embed API

Google Maps Embed API

Егер сіз Google Maps Widget сияқты плагинді пайдалансаңыз (төмендегі қадамдарда көрсетілгендей), Google Maps Static API таңдайсыз.

Үшінші тарап плагинін немесе тақырыбын пайдаланып жатсаңыз, олар Google Maps қолданбасының қай түрін қолданып жатқаны туралы құжаттамаға ие болуы керек. Уайымдамаңыз, сіз әрқашан бірнеше түрді қосып, оларды кейінірек өзгерте аласыз.

қадам 5

«Қосу» түймесін басыңыз.

Google Maps API қосыңыз

Google Maps API қосыңыз

қадам 6

«API» түймесін басыңыз, содан кейін «Тіркелгі деректері» астында API кілтін көресіз.

Google Maps API кілті

Google Maps API кілті

қадам 7

Егер сіз жай ғана Google Maps API кілтін ендірсеңіз, ол бастапқы кодыңызда кәдімгі мәтін түрінде көрсетіледі. Сондықтан сіз мұны шектеуіңіз керек, әйтпесе адамдар сіздің API кілтіңізді WordPress сайтында немесе жобаларында пайдаланып, пайдалануыңызды арттыра алады.

Мұны істеу үшін жай ғана API кілтіңіздің атын басыңыз және ол шектеуді қосуға мүмкіндік береді. WordPress сайтыңыз үшін жай ғана HTTP сілтемесін қосу жеткілікті жақсы болуы керек. Сияқты https://yourdomain.com/*. Бұл тек сіздің веб-сайтыңызға қоңырау шалуға мүмкіндік береді.

Google Maps API кілт шектеуі

Google Maps API кілт шектеуі

Плагинсіз WordPress-те Google карталарын қалай қосуға болады

Қарапайым картаны ендіргіңіз келсе және реттелетін орын маркерлері немесе басқа аннотациялар сияқты егжей-тегжейлі функцияларды қажет етпесеңіз, Google Maps қолданбасын күнделікті қолданатын кәдімгі Google Maps веб-сайты арқылы плагинсіз ендіруге болады.

Міне, ол қалай жұмыс істейді ...

1-қадам: Google Maps ендіру кодын көшіріңіз

Бастау үшін кірістіргіңіз келетін картаны жасау үшін Google Maps веб-сайтын пайдаланыңыз.

Мысалы, орын белгісін ендіргіңіз келсе, сол орынды Google Maps қолданбасында ашыңыз. Немесе бағыттарды ендіргіңіз келсе, Google Maps қолданбасында бағыттарды ашыңыз.

Енгізгіңіз келетін картаны алғаннан кейін жоғарғы сол жақ бұрыштағы гамбургер мәзірін басыңыз:

Енгізу кодына қалай қол жеткізуге болады

Енгізу кодына қалай қол жеткізуге болады

Мәзір элементтерінің тізімінде опцияны таңдаңыз Картаны бөлісу немесе ендіру:

Енгізу опцияларын ашыңыз

Енгізу опцияларын ашыңыз

Бұл ашады үлес кенеттен шыққан. Сол қалқымалы терезеде түймесін басыңыз Картаны ендіру қойындысы.

Содан кейін ашылмалы тізім арқылы қажетті өлшемді таңдауға болады. Көптеген WordPress сайттары үшін әдепкі өлшем жақсы жұмыс істейді, бірақ қажет болса, картаны үлкейтуге немесе кішірейтуге болады.

Мұны жасағаннан кейін түймесін басыңыз HTML көшіріңіз ендірілген кодты көшіру үшін түймені басыңыз:

WordPress Google Maps ендіру коды

Google Maps ендіру коды

Содан кейін кодқа API кілтін қосу керек. Сондықтан сіздің кодыңыз келесідей болуы керек:

2-қадам: WordPress сайтына Google Maps ендіру кодын қосыңыз

Енді сізге сол ендірілген кодты картаңызды қосқыңыз келетін постқа немесе бетте WordPress сайтыңызға қосу жеткілікті.

WordPress 5.0 нұсқасымен бірге шығарылған жаңа WordPress Gutenberg блок редакторын пайдалансаңыз, оны қосу арқылы жасауға болады. Өзгермелі HTML блоктау және ендіру кодын блокқа қою. API кілтін қосуды ұмытпаңыз.

WordPress блок редакторында ендіру кодын қалай қосуға болады

WordPress блок редакторында ендіру кодын қалай қосуға болады

түймесін басу арқылы картаңыздың қалай көрінетінін алдын ала көре аласыз алдын-ала қарау блоктың үстіндегі түймешігін басыңыз.

Егер сіз әлі де классикалық TinyMCE өңдегішін пайдаланып жатсаңыз, Google Maps ендіру кодын ашу арқылы қосуға болады. мәтін қойындысын басып, кодты сол жерге қойыңыз:

Классикалық WordPress редакторында ендіру кодын қалай қосуға болады

Классикалық WordPress редакторында ендіру кодын қалай қосуға болады

Кодты қосқаннан кейін келесіге оралуға болады көру картаның тікелей алдын ала қарауын көру үшін қойындысын басыңыз.

Міне, болды! Сіз Google Maps-ті WordPress жүйесіне плагинсіз қалай қосу керектігін жаңа ғана білдіңіз.

Қосымша күрделі карталарды плагинсіз ендіру үшін Google My Maps қолданбасын пайдаланыңыз

Бірнеше орын маркерлері, реттелетін аннотациялар және т.б. сияқты нәрселерге қатысты креативті болғыңыз келсе, мұны Google-дың Менің карталарым қызметі арқылы плагинді қажет етпей-ақ жасай аласыз.

Менің карталарым — Google компаниясының ресми құралы, ол өзіңіздің жеке карталарыңызды жасауға және ортақ пайдалануға мүмкіндік береді. Оның көмегімен пайдаланушы маркерді басқан кезде көрсетілетін көптеген пайдаланушы маркерлері және пайдаланушы ақпараты бар төмендегі мысалға ұқсас нәрсені жасай аласыз:

Google My Maps мысалы

Google My Maps мысалы

Мұнда WordPress жүйесіне реттелетін Google карталарын қосу үшін оны пайдалану жолы берілген.

1-қадам: Google My Maps қолданбасында картаңызды жасаңыз

Бастау үшін Google My Maps қолданбасына өтіп, жаңа карта жасаңыз. Сол жерден картаңызды құру үшін карта құрастырушы интерфейсін пайдалануға болады:

Google Менің карталарым интерфейсі

Google Менің карталарым интерфейсі

Біз оны тым егжей-тегжейлі қарастырмасақ та, бұл интерфейс сізге әдемі креативті карталар жасауға мүмкіндік береді. Тереңірек қарау үшін Google ұсынған бұл анықтамалық мақала көптеген маңызды функцияларды қамтиды.

2-қадам: Енгізу кодын жасаңыз

Картаны құруды аяқтағаннан кейін ендірілген кодты жасау керек.

Бұл кодты алу үшін алдымен картаңызды жалпыға ортақ етуіңіз керек. Мұны істеу үшін түймесін басыңыз үлес түймесі. Содан кейін түймесін басыңыз өзгеріс…қалқымалы терезеде:

Google My Maps бөлісу параметрлері

Google My Maps бөлісу параметрлері

Содан кейін таңдаңыз On - Интернетте жалпыға ортақ және нұқыңыз сақтау:

Сілтемені ортақ пайдалануды қосыңыз

Сілтемені ортақ пайдалануды қосыңыз

Мұны жасағаннан кейін карта тақырыбының жанындағы ашылмалы мәзірді басып, таңдаңыз Менің сайтыма ендіру нақты ендіру кодын жасау үшін:

Менің карталарым ендіру кодына қол жеткізіңіз

Менің карталарым ендіру кодына қол жеткізіңіз

Бұл сізге көшіру керек коды бар қалқымалы терезені ашады. API кілтін қосуды ұмытпаңыз.

Менің карталарым ендіру коды

Менің карталарым ендіру коды

3-қадам: WordPress сайтына ендіру кодын қосыңыз

Енді сол ендірілген кодты WordPress сайтыңызға кәдімгі Google Maps веб-сайтынан алатын ендірілген код сияқты қосуға болады.

Мұны қалай жасау керектігін білмесеңіз, жоғарыдан оқулықтың сол бөліміне өту үшін осы жерді басыңыз.

Оның орнына WordPress Google Maps плагинін пайдаланыңыз

Жоғарыдағы қолмен берілген әдістерден басқа, сайтыңызға карталарды ендіруге көмектесетін көптеген WordPress Google Maps плагиндері бар.

Осы плагиндердің бірін қолмен орындау әдістерін қарастырғыңыз келетін бірнеше себептер бар:

  • Олар қарапайым интерфейсі бар күрделі карталарды жасауға мүмкіндік береді.
  • Сіз WordPress бақылау тақтасынан шықпай-ақ бәрін жасай аласыз.
  • Олардың кейбіреулері WordPress-ке сілтеме жасайды. Мысалы, карта маркерлерін WordPress жазбаларына байланыстыра аласыз.
  • Олардың кейбіреулері өнімділік үшін Google карталарын оңтайландыруға көмектеседі (бұл туралы кейінірек).

Осы плагиндердің барлығы үшін карталарды ендіруді бастамас бұрын өзіңіздің Google Maps API кілтін жасауыңыз қажет. Бұл оқулық мұны қалай жасау керектігін көрсетеді.

Тоқтау уақыты және WordPress мәселелерімен күресіп жатырсыз ба? Behmaster уақытыңызды үнемдеуге арналған хостинг шешімі! Біздің мүмкіндіктерді тексеріңіз

Google Maps Widget

Google Maps виджеті – Google Maps Static API көмегімен картаны ендіруге мүмкіндік беретін қарапайым Google Maps плагині, ол интерактивті карта емес, статикалық кескінді ендіру арқылы өнімділікке ыңғайлы тәсілді ұсынады (бұл туралы келесі бөлімде толығырақ түсіндіреміз).

Қарапайым және жеңіл нәрсе алғыңыз келсе, бұл тамаша нұсқа. Оны іске қосқаннан кейін сізге Google Maps API кілтін алып, оны плагин параметрлеріне қосу керек. Сайтыңыздағы кез келген виджет аймағына Google картасын қосуға болады. Содан кейін келушілер лайтбокста картаның үлкенірек интерактивті нұсқасын аша алады:

Google Maps виджетінің интерфейсі

Google Maps виджетінің интерфейсі

Сондай-ақ, қажет болса, интерактивті картаны бірден пайдалануға болады және Pro нұсқасы карталарды қысқа кодпен сайттың кез келген жеріне ендіруге мүмкіндік береді.

Google Maps Easy

Google Maps Easy өзіңіздің маркерлеріңіз бен аннотацияларыңызбен теңшелетін карталарды жасауға көмектеседі.

Маркерлерді қосқанда, өзіңіздің жеке белгішелеріңізді жүктеп салу, маркер сипаттамасына мәтін мен кескіндерді қосу және т.б. мүмкіндігіңіз болады. Сондай-ақ, пайдаланушыларға үлкейтуге рұқсат беру не бермеуді таңдау сияқты картаңыздың қалай жұмыс істейтінін басқаруға болады:

Google Maps оңай интерфейсі

Google Maps оңай интерфейсі

Картаны жасағаннан кейін оны қысқа код немесе PHP функциясы арқылы ендіруге болады.

Интергео

Intergeo - теңшелетін маркерлермен өзіңіздің карталарыңызды жасауға және карта функцияларын басқаруға мүмкіндік беретін тағы бір танымал опция.

Плагинді орнатып, іске қосқаннан кейін сіз карталарыңызды тікелей WordPress бақылау тақтасынан жасай аласыз:

Intergeo интерфейсі

Intergeo интерфейсі

Содан кейін оларды қысқа кодты пайдаланып сайтыңыздың кез келген жеріне ендіруге болады.

Google Maps Embed үшін Гутенберг блогы

Gutenberg Block for Google Maps Embed — жаңа WordPress Gutenberg блок редакторына арнайы Google Maps блогын қосатын қарапайым плагин.

Бұл блоктың көмегімен сіз кез келген мекенжайды ендіре аласыз, сонымен қатар:

  • Өлшемдері
  • Масштабтау деңгейі
  • Интерактивті карта мен статикалық карта (қайтадан, соңғы әдіс өнімділікке көмектеседі)

Ол өзіңіздің жеке карталарыңызды жасауға мүмкіндік бермейді – бірақ жаңа блок өңдегішін пайдалансаңыз және қарапайым карталарды қосудың оңай жолын қаласаңыз, бұл ыңғайлы нұсқа.

Google карталары сіздің WordPress сайтыңызды баяулатуы мүмкін – оған жол бермеңіз

Google Maps интерактивті карталарымен сайтыңызға көптеген керемет функционалдылықты енгізуге мүмкіндік бергенімен, өнімділік келісуі бар, өйткені ол барлық интерактивті функционалдылықты қамтамасыз ету үшін көптеген сценарийлерді жүктеуі керек.

Ұзын сөздің қысқасы, интерактивті Google карталарын енгізу сайтыңызды баяулатуы мүмкін.

Мұнымен күресудің бірнеше жолы бар.

Біріншіден, картаңызды интерактивті түрде шолу мүмкіндігі үшін адамдар қажет болмаса веб-сайтыңызда, кез келген үшінші тарап құралдарынсыз жұмысты жылдамдатудың қарапайым жолы:

  • Сайтыңызда пайдалану үшін картаның скриншотын алыңыз
  • Бұл скриншотты Google Maps веб-сайтындағы картаға байланыстырыңыз немесе пайдаланушы басқан кезде интерактивті картасы бар жарықтандырғыш қалқымалы терезесін ашыңыз.

Осылайша, сіздің сайтыңыз жай ғана қарапайым кескінді жүктеп жатыр - Google Maps қолданбасымен байланыстырылған барлық сценарийлер емес.

Мұны қолмен орындауға балама ретінде сіз тегін AWEOS Google Maps iframe плагинін бір басу плагинін де пайдалана аласыз. Бұл плагин Google Maps ендірілгендерін жалпы толтырғыш кескінімен автоматты түрде ауыстырады. Содан кейін, егер пайдаланушы түймесін басса Картаны жүктеңіз түймешігін бассаңыз, ол толық Google Maps ендірілгенін жүктейді:

Google Maps толтырғыш кескіні

Google Maps толтырғыш кескіні

Немесе, кез келген JavaScriptсіз кәдімгі кескінді қайтаратын Google Maps Static API интерфейсін де пайдалануға болады. Кейбір Google Maps плагиндері, соның ішінде Google Maps Widget және Gutenberg Block for Google Maps Embed – карталарды жасаған кезде Static API пайдалануға мүмкіндік береді.

Дегенмен, біз кейде бұл статикалық тәсіл оны қысқартпайтынын түсінеміз және көптеген адамдар интерактивті Google Maps тәжірибесін бірден енгізгісі келеді.

Егер солай болса, Google Maps қолданбасын жылдамдатудың тағы бір жақсы жолы - пайдалану жалқау жүктеу. Жалқау жүктелген кезде, келушілер бетті төмен қарай айналдыра бастағанша, сіздің сайтыңыз кез келген астыңғы жағындағы Google Maps ендірулерін жүктеуді күтеді. Бұл интерактивті Google Maps мазмұнын ендіруге мүмкіндік бере отырып, бастапқы бетті жүктеу уақытын жылдам сақтайды.

Біз суреттер мен бейнелерді қалай жалқау жүктеу керектігі туралы жазғанбыз және бұл Google Maps үшін де дәл осындай идея.

Мұны істеуге мүмкіндік беретін бірнеше плагиндер бар. Мысалы, a3 Lazy Load плагині iframe ендірулерді жалқау жүктеуге мүмкіндік береді, оның ішінде Google Maps:

Жалқау жүктелген Google карталары

Жалқау жүктелген Google карталары

Басқа нұсқалар:

  • BJ Lazy жүктемесі
  • WP Rocket арқылы жалқау жүктеме
  • Easy Lazy Loader

қысқаша мазмұндама

Егер сіз жай ғана сайтыңызға қарапайым картаны ендіргіңіз келсе, кірістірілген ендіру коды мүмкіндігін пайдаланып, Google Maps қолданбасын WordPress жүйесіне плагинсіз қосуға болады. Немесе өзіңіздің жеке картаңызды жасап, оны ендіру үшін Google Менің карталарым құралын пайдалануға болады.

Бұл қолмен жасалған әдістерден басқа, WordPress бақылау тақтасынан шықпай-ақ сізге көп басқаруға мүмкіндік беретін көптеген Google Maps WordPress плагиндері бар.

Қай әдісті таңдасаңыз да, Google Maps қолданбасының өнімділігіне назар аударыңыз. Google Maps қолданбасын өте қажет болғанда ғана қолдануға тырысыңыз және өнімділікке кері әсерін азайту үшін толтырғыш кескіндері немесе жалқау жүктеу сияқты тактикаларды қарастырыңыз.

Google карталарын WordPress жүйесінде пайдалану туралы басқа сұрақтарыңыз бар ма? Түсініктемелерде бізге хабарлаңыз!

Қатысты Мақалалар

пікір қалдыру

Сіздің электрондық пошта мекенжайы емес жарияланады.

Басына оралу