Skip to main content

Cum adaug o hartă Google Maps în WordPress fără plugin

Problema vine de la mesajul de eroare Google Maps “this page didn’t load google maps correctly” sau “Pagina nu poate încărca corect Google Maps”. L-am întâlnit pe multe site-uri.

Am avut și eu această problemă pe câteva site-uri. Nu am studiat problema și am preferat să șterg harta.

Astăzi a trebuit, la cererea unui client, să pun o hartă Google la pagina de contact prin urmare trebuia în sfârșit să caut o soluție la problemă.

Am instalat vreo trei plugin-uri, care nu au funcționat, deși am generat și API Key. Se pare că trebuie plătit ceva la Google ca acest API Key să funcționeze sau nu am avut eu răbdare să-l configurez.

Mă rog am cătat o soluție mai rapidă și viabilă.

Pași inserare hartă Google în WordPress

 1. Alegere locație

Eu am ales parcul de la mine din oraș.

2. Postați locația

Apăsăm ultimul buton din dreapta “Postați locația” și alegem tabul “Încorporați o hartă”.

3. Încorporare hartă

Apăsăm buronul “Copiați codul HTML”.

La mine arată cam așa:

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Textul de mai sus se introduce în articol/pagină dar în varianta de vizualizare text.

Dacă ai urmat corect toți pașii ar trebui să vezi harta ca mai jos.

Cum facem harta responsive?

Mai am o problemă însă. Harta are dimensiunea fixă de 650×450 pixeli după cum rezultă din codul ei, prin urmare va ieși din ecran la dispozitivele mai mici, mai ales la telefoane.

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe>

Orice modificare ai face acolo harta nu va fi responsive.

Soluția este în doi pași:

1. Adăugăm codul HTML <div> </div>

<div><iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1421.6456467247178!2d26.071939483238644!3d44.55014175893068!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b21ca35f9dbcfb%3A0x1d1bf9a3b62e85d8!2sParcul%20Otopeni%2C%20Otopeni%20075100!5e0!3m2!1sro!2sro!4v1603964956135!5m2!1sro!2sro” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″></iframe></div>

2. Adăugăm câteva liniile de cod CSS în fișierul unde se regăsește stilul temei tale

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Chestia asta se face în două feluri:

a) Intrăm în menu-ul Aspect>Personalizare>CSS suplimentar din dashboardul WordPress. Mai toate temele au această opțiune. Adăugăm aici liniile de cod CSS de mai sus.

b) Intrăm în menu-ul Aspect>Editor Teme in dashboard WordPress. Adăugăm aceeași secținune de cod CSS în fișierul style.css. Nu uitați să salvați în ambele cazuri.

Harta va trebui să arate ca în pagina de contact a siteului la care lucrez acum. Verificați voi pe diverse dispozitive și veți vedea că este responsive.

În Google Chrome puteți verifica și cu click dreapta mouse + Inspect element.

Dacă toate astea ți se par complicate poți oricând să apelezi la serviciile mele.

Resurse folosite

Youtube

Blog

https://www.ostraining.com/blog/coding/responsive-google-maps/

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Am aflat de ce woocommerce nu mai trimite e-mailuri si am rezolvat problema

Zilele trecute m-a sunat un client pentru că nu mai primea e-mailuri când apărea o nouă comandă pe site-ul lui. Site realizat de mine în WordPress și Woocommerce.

Am investiga un pic problema și am constatat că este o problemă cu e-mailul unde vin comenzile care era un email free pe Yahoo. Am încercat cu un e-mail free de Gmail și se întâmpla la fel.

Am instalat un e-mail dedicat de genul contact@numedomeniu.ro și acesta primea comenzile.

Dar am observat că dacă clientul are o adresă de e-mail de Yahoo sau Gmail nu primește confirmarea comenzii, ceea ce poate duce la abandonarea comenzii.

Soluția finală vine de la pluginul Easy WP SMTP. Se instalează ușor și rezolvă problema în întregime. Acum și clientul și tu vei primi din nou e-mailuri când se realizează o comandă.

Mai am două precizări

  1. Dacă nu te descurci cu instalearea și setarea pluginului nu ezita să mă contactezi și rezolv eu totul pentru tine sau îți dau un sfat,
  2. Nu îți mai încarc memoria cu ce se înmplă în spatele Woocommerce și de ce nu mai funcționează cu e-mailurii free de la Yahoo, Gmail sau alte servicii asemănătoare. În principiu sunt blocate pentru că aducea mult prea mult spam.
____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Woocommerce templates suitable for your mobile phone

I work a lot with Woocommerce, the plugin that converts your WordPress site in an online shop. Last week I was looking for a suitable Woocommerce template that looks good on a mobile phone.

Free Woocomeerce templates

I found that most of the free templates don’t look good on the mobile phone’s because they don’t have my requested conditions:

  • big titles and prices
  • good desktop layout
  • excellent mobile phone layout

I look from a lot of free templates but I found only one that I liked and I used it on my rebranded affiliate website.

Paid Woocomeerce templates

The only site that provides Woocommerce templates that I liked was Template Monster. The templates I selected are:

Photo by Matthew Fournier on Unsplash

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Inserare fotografii 360 în website

Azi testăm inserarea de imagini 360 în website. Am testat pe platforma WordPress și cu aplicații de Android. Să testăm deocamdată câteva pluginuri.

Cardboard

Este o imagine din Câmpulung Muscel.

Pentru a funcționa se inserează shorcode-ul cardboard id=”xxx”. Îl puneți voi între paranteze pătrate pentru că eu am pluginul instalat și nu se văd. Acum, pentru a găsi ID-ul imaginii trebuie instalat și plugin-ul Show IDs by Echo Plugins.

Deși am urmat toate instrucțiunile imaginile se văd dar sunt “comprimate” și de asemenea rezoluția lasă de dorit. Este adevărat că în documentația pluginului sunt trecuta ca și camere acceptate Google Street View și Ricoh Theta. Camera mea LG 360 nu este.

Google Street view

Mergând pe logica că pluginul deschide imagini Google Street view am downloadat o imagine deja uploadată în  aplicația Google Street view. Am încărcat-o în WordPress și am inserat-o în articol. Surpriză ! Mi-a luat și ID-ul automat și se vede perfect.

Imaginea este de la Azure Window din insula Gozo, vecina mai mica a Maltei.

După cum se observă pluginul are un surf pe imagine, dar care este destul de lent. Oricum puteți surfa prin imagine cu mouse-ul. Iconița de full screen face minuni – mai mult pe telefon.

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Plugin WordPress pentru backup in cloud

Dropbox_logo_(2013).svg

 

Folosesc de ceva vreme acest plugin WordPress care mă ajută să-mi țin copiile de rezervă ale blogurilor mele în siguranță în cloud.

Dropbox Backup and restore

Așa cum îi este numele pe lângă back-up poate face și restore din cloud respectiv din contul meu de Dropbox. Operațiile se pot face și local însă mai ales pentru blogurile unde scriu articole arpoape zilnic cantitatea de informație ar deveni supărător de mare.

 

____________________________________________________

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.

Vrei să primești un e-mail de căte ori scriu un articol?

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi notificări prin email când vor fi publicate articole noi.